Your official information source from the .NET Web Development and Tools group at Microsoft.
Over the last few months, the Browser Link team has worked on delivering these new features in the Visual Studio 2013 RC release:
For those who are not familiar with Browser Link, please look at our introductory blog here.
The Browser Link Dashboard is a tool window in VS that shows all active browser link connections.
You can invoke the dashboard by clicking on the little arrow next to the Refresh Linked Browser icon.
Clicking on the Browser Link Dashboard menu item will bring up the tool window.
As you can see in the image below, the dashboard shows all active connections related to your solution. These include connections that were opened via F5 (run with debugger), Ctrl+F5 (run), View in Browser or even just by opening any browser and pasting the url.
For example, in the image below, you can see that connections to About.aspx in IE, Chrome and IPad emulator are all listed in the Browser Link Dashboard. The connections also give you details of the url.
A Problems node exists to tell you if there is a problem. In our case, we are good as the debug flag is set to true and we are on a 4.5 project.
With the RC release, we now support the authoring of Browser Link Extensions via a public API. The rest of this post describes what a Browser Link Extension is and how you can write one.
Let us start off with writing a simple Browser link Extension.
To get started you will need the following:
1. Visual Studio Ultimate 2013 RC from here. 2. VSSDK from here. 3. The Visual Studio Template for Browser Link Extension from the VS Gallery. This is available here.
1. Visual Studio Ultimate 2013 RC from here.
2. VSSDK from here.
3. The Visual Studio Template for Browser Link Extension from the VS Gallery. This is available here.
Here is a step by step explanation of how to author a simple extension:
Step 1: Create a Browser Link Project by going to:
File –>New Project ->Visual C# –>Extensibility. Search for Browser Link Extension, select it and click the OK button.
Step 2: The project is created for you at this point.
Step 3: Open SimpleBrowserLinkProject.js under the scripts folder. Copy and paste the following. I have added a simple HelloWorld function that can be called from Visual Studio.
Step 4: Open SimpleBrowserLinkProject.cs and copy and paste the following under OnConnected.
This is a simple extension which shows how VS can talk to all browsers.
Step 6: To talk from the browser to VS, make the following changes. Copy and paste this code into your OnInit function in SimpleBrowserLinkProject.js.
Step 8: Ctrl + F5 and this will open the experimental instance of Visual Studio. Create a Web Application Project in your experimental instance and invoke Browse with multiple browsers. Now each of these will pop up a VS Message box as shown below.
So that was a quick introduction to the new Browser Link feature in RC.
You can look at Mad’s Web essentials for Visual Studio 2013 (source) for some cool Browser Link Extensions. Stay tuned for more posts around knowing your Browser Link APIs.
I am currently using Visual Studio 2008. I am trying to develop a screen reader that will access all html elements on the web page. I noticed that the WebBrowser1 object is not able to access all displayed elements on all websites. Has this been improved upon in later versions of VB? I also tried using AccessibleObject with no success.
@al goncer, we are not the owner of WebBrowser object, you probably can ask IE team, or raise a question in stackoverflow to see if there is anyone know.
I have changed nothing from the default template.. uses iis express.
@Graham Evas, Thank you for your feedback!
Do you have VS 2013 RTM? Can you please give me some details on how you are creating your MVC5 app? Please mail details to reshmim at Microsoft.com and I will be able to help you.
So this is what is spamming my network tab? All this effort so people can push refresh in visual studio instead of their browser (where they should be debugging anyways so they can have a richer console, DOM + styles + script together, etc)? DevDiv really doesn't understand how real world web development happens, sigh.
I'm getting an error with Browser Link on page load. It appears that it has an issue with classes that are created by the web optimization framework for image sprites.
@Nathan, I hope by now you would have realized the KIND of powerful features Web Essentials (http://vswebessentials.com/) brings to the table via this Browser Link feature in Visual Studio 2013:. Live CSS/HTML/JS editing in multiple browsers at once using their respective developer tools and much more!