HTML 11 - A Browser Link alternative for Visual Studio 2017/2019

Pressing F5 in a browser to see web page changes is not a big deal. But it is a context switch nevertheless, breaking your flow. And it becomes progressively irritating when you edit multiple pages or want to see them in multiple browsers.

Browser Link is a Visual Studio feature to refresh your web application in several browsers at once just pressing Ctrl+Alt+Enter without leaving the editor:

Browser Link

Browser Link uses SignalR to create a communication channel between Visual Studio and the browser. When Browser Link is enabled, Visual Studio acts as a SignalR server that multiple clients (browsers) can connect to. Browser Link also registers a middleware component in the ASP.NET Core request pipeline. This component injects special <script> references into every page request from the server. Because the browser-side code is all JavaScript, it works on all browsers that SignalR supports without requiring a browser plug-in.

This implementation unfortunately doesn't support some popular types of pages and applications, and may require additional manual setup. For example, it doesn't work out-of-the-box in VS 2019 16.3.2 with ASP.NET Core 3.0 web applications and static .html pages.

Several extensions provide additional convenience when using Browser Link: Browser Reload on Save reloads all connected browsers when files are saved in Visual Studio, and Browser Sync synchronizes form field entry, page navigation and scroll position.

 

The recently developed HTML 11 extension offers a different approach to show static and dynamic web pages you are currently editing. The preview is displayed in a Visual Studio tool window using embedded Chromium framework:

HTML 11

You can position the tool window alongside the page editor or outside the main Visual Studio window, e.g. on a second monitor. As you switch document tabs in Visual Studio, the preview automatically switches to the corresponding web page.

HTML 11 supports ASP.NET, ASP.NET Core web applications and Blazor apps:

Blazor app

For dynamic web pages the preview is updated when you save a document. For static .html files the preview is updated as you type. HTML 11 uses double buffer like rendering and page load monitoring to combine multiple screen update steps associated with typical page reloading in a browser and tries to remove all possible distractions.

Recognizing the ubiquity of mobile devices, HTML 11 provides an additional mobile preview window that can simulate many popular phones using Chromium DevTools Device Mode:

HTML 11

HTML 11 Personal license costs $39/year. You can download the 30-day trial from the official site or Visual Studio Marketplace.