Browser Refresh in Visual Studio

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.



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.



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.



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



This will now open the application in 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.



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!