Browser Refresh in Visual Studio

This article explains working with multiple browsers for UI designing as a very common feature.

Working with multiple browsers for UI designing is a very common feature. During the designing process, we make changes in the mark-up/css then go and refresh each browser to see how the changes are being reflected.

From Visual Studio 2013 onwards a new feature has been added within Visual Studio that allows us to refresh the browsers connected with the application. This is termed the "Browser Link". So let's explain this feature.

Start your Visual Studio and add a new web project type. We remove the default content on the View named Index and add some dummy text into it.

Index

Go to the toolbar at the top and select Browser Link, an icon looking like a curved, refresh icon. Ensure that the Enable Browser Link option is checked (it is by default). This setting is required for this feature to work.

Enable Browser Link

Next, in order to browse the application with multiple browsers, we go to the toolbar and select the IIS Express => Browse With option. This will open the settings to set multiple browsers to be used for the application.

Browse with

Select the browsers that you would like to browse the application from the available list and click Browse.

Browse

This will now open the application in multiple browsers.

multiple browsers
When you hover over the icon, it displays the browsers currently connected with it. Now let's add some HTML text and press the Browser link icon. Both of the browsers are updated. No need to update the individual browsers now.

Browser link

Just for the knowledge out of curiosity, this process uses SignalR to implement the functionality. Here Visual Studio acts as a SignalR server and the browsers act as the the clients. See the link here.

Happy designing now!