
The lower right of the screen shows you the CSS styles and the file name in the styles. You still have refresh the browser to see the changes. If you change anything in HTML tab in the lower left corner of the Page Inspector the changes not persisted in your source. If you change the source file when Page Inspector is open then a yellow bar will appear asking you to refresh the browser to see the changes, press CTRL + ALT + ENTER to refresh the browser. Now click the Inspect button and then hover the mouse over different elements in your page, When you perform this action, the code file that generated the element is shown with the Page Inspector as shown below When you click the files in files tab it then opens them side by side with the Page Inspector. HTML tab just shows you the html for the page. Files tab shows all server side files that are used to render this page. In the bottom the screen you see two tabs and a button, Inspect button which allows you to point at elements in your page. Now click F5 then Page Inspector is loaded in the document window inside Visual Studio as shown below If the debugging is not enabled on your site then add the following key to your web.config as shown below Ĭhoose the Page Inspector from Target Browser drop-down on the Standard tool bar as shown below Launching Page Inspector is pretty simple, in order to launch Page Inspector your site needs to be run in debug mode or you need add a key to Web.config.


#VISUAL STUDIO HTML INSPECTOR HOW TO#
This post explains the Page Inspector features and outlines how to use it inside Visual Studio editor. The Page Inspector is a debugging tool that runs inside Visual Studio and it comes with the Visual Studio. It is hard to debug the page without a tool to find a certain piece of HTML where it is coming from. The typical web page in the application includes references to JavaScript and CSS files and images.
