Client-Side Productivity with Browser Link

Browser Link Banner

As you know Angular is a client-side framework – it’s home is in the browser. Visual Studio, on the other hand, has traditionally shined as the server development environment. Well there is a technology that attempts to bridge the gap between Visual Studio and the browser – it’s called Browser Link.

This post details Browser Link’s best features and discusses why you should use it. You will learn how to set it up when using static files for your Angular project and you will be prepared for some limitations and trade offs you may encounter. Overall you will find that Browser Link is a compelling and under-utilized tool in Visual Studio that you should add to your tool belt.

What is Browser Link?

Browser Link is a feature introduced with Visual Studio 2013 that runs when you press F5 to build, deploy, and run your project. It leverages the two-way communication of SignalR to send information from Visual Studio to the client and back.

While Visual Studio-to-client communication may seem trivial, this is a rich canvas on which to build truly time-saving features. For instance, think about how much time you spend in the browser’s F12 developer tools. What if you can link the work that you do in these tools to the code in Visual Studio? How many times do you duplicate CSS changes that you make in the browser by copying them to the correct file in Visual Studio? Browser Link makes this type of workflow obsolete by communicating changes between both the client-side and server-side development environments.

Setting Up Browser Link

There isn’t much to know to setup Browser Link. The two main requirements are that Browser Link is enabled and the project is running in debug mode. To enable Browser Link, press the Browser Link button’s drop-down arrow and press Enable Browser Link.

Enable Browser Link

Unless configured otherwise, debug mode is enabled by default when you run your project with F5. However to ensure you are running in debug mode, select Start Debugging in Visual Studio’s Debug menu.

Because many Angular applications use static HTML files instead of .cshtml or .aspx files, there is one additional configuration that needs to be added to the web.config file to enable Browser Link with static HTML files:

<system.webServer>
    <handlers>
        <add name="Browser Link for HTML" path="*.html" verb="*"
            type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
            resourceType="File" preCondition="integratedMode" />
    </handlers>
</system.webServer>

For more on enabling Browser Link, read the corresponding ASP.NET documentation.

Finally, you should download and install the Web Essentials Visual Studio extension. The download and installation instructions are on the Web Essentials website.

Browser Refresh

The basic Browser Link scenario is Browser Refresh. This feature comes out-of-the-box and allows you to trigger the browser to refresh from Visual Studio. For example, you make a change to your client-side code in Visual Studio. Then for anything that doesn’t require a recompile, you would typically go to your browser and refresh the page in order to verify your changes. With Browser Link running however, you simply press the Browser Link refresh button or use the CTRL + ALT + ENTER key combination to save your files and simultaneously trigger the browser to refresh right from within Visual Studio.

Because Browser Link uses web standards, this works with any browser including mobile browsers on devices and in emulators. You can also trigger multiple browsers. If you want to check that your CSS animation runs across all of your application’s supported browsers, one button press or key combination refreshes all of them at the same time.

Web Essentials and Browser Link

Some of the most interesting Browser Link uses are found in the popular Visual Studio add-in Web Essentials. Web Essentials is a sweeping collection of tools. You should take a look for yourself when you have the chance – it’s good stuff. There are several features to discuss related to Browser Link.

Once you have installed the Web Essentials add-in and enabled Browser Link, there is a new Web Essentials toolbar that appears at the bottom of the page in your browser when you run your Visual Studio project.

Browser Link toolbar

This toolbar is displayed or hidden using the CTRL key. The toolbar provides several interesting pieces of functionality including two of the most useful: Save F12 changes and Inspect.

Have you ever spent time adjusting the CSS properties of an element in the browser to get just the right position, font size, or layout? The typical workflow is often then to copy the changes you made, if you remember them, into Visual Studio, save the files, and then refresh the browser to double check that you copied the CSS correctly. By using the Save F12 changes button, Web Essentials uses Browser Link to send the DOM changes back to Visual Studio and add them to the correct CSS selector in the correct file – it’s almost like magic.

Another feature is an easier way to find the source code for browser elements. In the past you may have found an element in the browser’s developer tools and then searched your project for the element’s id or class. Now, you can press the Inspect button on the Web Essentials toolbar to enable inspection mode. Once this mode is enabled, click on the element you are interested in and Visual Studio jumps to that markup in the appropriate code file – again, almost like magic.

Pro tip: hover over the buttons in the Web Essentials toolbar to see its keyboard shortcut.

Limitations and Trade-Offs

While the Browser Link technology enables some very useful scenarios, you should be aware of some issues that you may see. First, you are limited in Visual Studio by debug mode. Things like renaming or moving files can’t be done while running in this mode. Also, Browser Link sends a lot of network traffic so if you are using the browser’s network profiler, you may want to shut Browser Link off temporarily.

Furthermore, Web Essentials is often a proving ground for functionality before moving it into Visual Studio. You may encounter some functionality that doesn’t quite work as you expected. The key here is to try out the tooling on a non-critical project first to develop a comfort level and/or be sure to use source control or make a backup of your project. I use the features detailed in this post and find them to be stable and helpful. If for some reason the tooling doesn’t produce the output you were expecting, using CTRL+Z in Visual Studio to undo the recent changes typically works – but not always.

In Summary

Browser Link is a great Visual Studio feature for web developers. It helps to bridge the divide between development environment and browser tools to increase your productivity. It’s easy to setup and provides compelling features such as Browser Refresh, Save F12 changes, and Inspect. Regardless of whether you are using Angular or other web frameworks, you should give it a try.

The next post will dive into one of the first Angular features that developers use – expressions. They are included in practically every ‘Hello World’ Angular demo and it is important to understand what they are and what their role is in an Angular application – see you then!

6 thoughts on “Client-Side Productivity with Browser Link”

  1. Note that if you turn off Edit+Continue for your app, then BrowserLink will continue to work even after you’re done debugging.

  2. I found – in a hard way, that Browser Link when used in Visual Studio 2013 and relatively old versions of jQuery, leads to errors. There is incompatibility between Browser Link and jQuery. It’s easy to google for after you know about it, but really hard to understand initially.

    1. Yes, I’ve been moving more and more of my workflow to Visual Studio Code for these reasons. There’s certainly more manual configuration to setup your workflow and environment but I have found that emphasis on customization empowering. One of the things I’ll be diving into soon is webpack and I’m particularly interested in integrating their hot module loading into an ASP.NET Core project. It looks like it can be done. I’ve been using lite-server with the Angular 2 stuff and I’ve been on the hunt for something that can offer the auto-updating feature with ASP.NET Core. Thanks for the comments.

Leave a Reply

Your email address will not be published. Required fields are marked *