Over the last few months, the Browser Link team has worked on delivering these new features in the Visual Studio 2013 RC release:
- Browser Link Dashboard
- APIs for extension authoring
For those who are not familiar with Browser Link, please look at our introductory blog here.
Browser Link Dashboard
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.
APIs for extension authoring
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.
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.