HtmlView is a free VS 2015 extension for Web developers.

It provides the HTML editor an area where it shows a preview of your HTML page. Essentially it is a Chromium engine inside Visual Studio showing your HTML page. Behind the scenes, I am using the excelent CefSharp library to instantiate a Chromium browser.

HtmlView.png

Features

  • Chrome DevTools (shortcut: F12)
  • Console area shows any log output (errors or console.log() calls)
  • CTRL+SHIFT+CLICK any element to inspect it

How to use

  • first install it by downloading at VS Gallery
  • previewer by default is always OFF for all .HTML files
  • you must enable it in a per-file basis; to do it add the following line at the start of your HTML and save the file:
<!-- HtmlView:on -->
  • it is always ON for files named 'unittest.html'
  • you can toggle the previewer by simply setting it to off (or just remove the first line) and save the file:
<!-- HtmlView:off -->
  • you can make the console area always visible:
<!-- HtmlView:on, console:off -->

For Sciter developers

The cool thing is that you can use this extension aside with OmniView, and you can simultaneously preview your HTML in Sciter engine and in a Chrome-based browser. I really don't know the usefulness of this, but anyway:

HtmlView_sciter.png