What is new in Browser Link with Visual Studio 2013 RC?

What is new in Browser Link with Visual Studio 2013 RC?

  • Comments 7

Over the last few months, the Browser Link team has worked on delivering these new features in the Visual Studio 2013 RC release:

  1. Browser Link Dashboard
  2. 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.

image

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.

image

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.

A Browser Link Extension is a VS extension that will let you talk to all Browsers connected with any web project  that is open in Visual Studio. Your extension will have a CSharp part and a JavaScript part. The CSharp part is run in the context of Visual Studio. The Javascript part gets injected in the browser when a user makes a requests to that page. There are APIs on both sides that allow them to talk to each other.

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.

image

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.

Code Snippet
  1. /// <reference path="../intellisense/browserlink.intellisense.js" />
  2.  
  3. (function (browserLink, $) {
  4.     /// <param name="browserLink" value="bl" />
  5.     /// <param name="$" value="jQuery" />
  6.  
  7.     function output(message) { // Helper for the 'greeting' function
  8.         alert(message);
  9.  
  10.         if (console) {
  11.             console.log(message);
  12.         }
  13.     }
  14.  
  15.     return {
  16.  
  17.         HelloWorld: function(message)
  18.         {
  19.             var topDiv = document.createElement("div");
  20.             topDiv.id = "SimpleDiv";
  21.             var textElement = document.createTextNode(message);
  22.             topDiv.appendChild(textElement);
  23.             $("body").prepend(topDiv);
  24.         }
  25.         ,
  26.         name: "SimpleBrowserLinkProject",
  27.  
  28.         greeting: function (message) { // Can be called from the server-side extension
  29.             output(message);
  30.         },
  31.  
  32.         onInit: function () { // Optional. Is called when a connection is established
  33.            
  34.         }
  35.     };
  36. });

Step 4: Open SimpleBrowserLinkProject.cs and copy and paste the following under OnConnected.

Code Snippet
  1. public override void OnConnected(BrowserLinkConnection connection)
  2.         {
  3.             Clients.Call(connection,"HelloWorld", "This is a simple Browser link extension!!");
  4.         }

Step 5: Ctrl + F5 and this will open the experimental instance of Visual Studio. Now, Create a Web Application Project and View About.aspx in IE and Chrome. In each of these new connections, we are calling the javascript function “HelloWorld” which adds a div at the top of your page. 

image

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.

Code Snippet
  1. onInit: function () { // Optional. Is called when a connection is established
  2.             browserLink.call("SendText", "Hello from JS to VS")
  3.         }

Step 7: In your SimpleBrowserLinkProject.cs file you should have a SendText method which has a BrowserLinkCallBack Attribute. This attribute suggests that this can be called from JavaScript.

Code Snippet
  1. [BrowserLinkCallback] // This method can be called from JavaScript
  2.         public void SendText(string message)
  3.         {
  4.             MessageBox.Show(message);
  5.         }

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.

image

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.

Thanks,

Reshmi Mangalore

Leave a Comment
  • Please add 3 and 8 and type the answer here:
  • Post
  • 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 Just got VS 2013, created an MVC 5 web application, hit run and BrowserLink errors  in IE 10 - "JavaScript critical error at line 567, column 15 in http://localhost:52595/ea1ec4a455d74e3387a25162fcbf397c/browserLink\n\nSCRIPT1010: Expected identifier" .. errors on label.for = id

    any ideas?

    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.

    Details:

    stackoverflow.com/.../browser-link-js-error-on-page-load

  • @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!

Page 1 of 1 (7 items)