Look at Page Inspector for VS 11 Developer Preview

  • Article

In this blog, we will look into one of the plug-in for VS 11 called as Page Inspector. Page Inspector is a tool, which provides browser experience for your web page [html, ASP.NET, MVC, Web projects & Applications] within VS IDE.  It shows the mapping of your ASP.NET code, HTML with web page output in the browser. We can use this tool to find which line of code generated particular HTML element in a web page. It also allows us to modify CSS attributes and DOM elements on the fly and will reflect the changes in the tool immediately. Since, this tool is not part of VS 11 Developer preview. We can download it from here. We need to have VS 11, IE 9 & .NET 4.5 to run the tool.  This tool works similar to IE developer tools with integration to your ASP.NET code.

  Let’s have a live example of it, create a sample web application in VS 11 and name it as PageInspectorDemo. Build the project and right click inside Default.aspx and select “View in Page Inspector” as shown below:

Then, it will show below dialog to add a setting in web.config to enable Page Inspector's full functionality for your project.

We will get the output as shown below:

Click on Inspection mode and select/mouse over an element to find the code that generated that HTML markup. Doing that will show the corresponding line of ASP.NET code that generated the HTML as well as it attributes like CSS also as shown below:

We can even edit the element’s attributes and see the changes in the tool immediately as shown below:

Page Inspector can detect the changes to the dependencies for a web page automatically and alerts with a prompt to build the project as shown below:

Clicking on a page and selecting “View in Page Inspector” may not show the page properly in case of URL routing or master page etc. In those cases, tool will automatically prompt to enter a URL or file to browse in it as shown below:

 

In above screenshot, I mapped Site.master.cs to default.aspx. So, whenever i click on "View in Page Inspector" within Site.master.cs, it will open Default.aspx in Page Inspector.

Make below entry to false in web.config for disabling Page Inspector before deploying into production:

<add key="VisualStudioDesignTime:Enabled" value="false" /> 

Note: This tool is in Developer preview and final release may have changes in the features or functionality.