A Starter Guide to Page Inspector

There is a very exciting tool that was launched by Microsoft with Visual Studio 11 Developers Preview. That is Page Inspector.

Web development has always not been a very simple job. Every web developer must have spent lots of time to give a better look to the web page and have worked a lot with HTML syntax.

There are a lots of tools that helped the web developers a lot and became a lingua franca in web development community. Some of these tools are

These tools helped a lot to web developers and made their life easy. But I never got satisfied with these developer tools and always thought to have something integrated with Visual Studio only.

As above I always felt a disconnect between aspx/ascx/master... code and the rendered HTML. Although I used above tools a lot to get the flaws of rendered HTML, lists it down, then find out the correct mapped code and fix the issues.

But this is not just a one way process. Some times this become a very long cyclic process.

As we all know that most of the time a rendered page is not just a result of single file but it comprises many user controls, master page, base page etc. So even if you have list of problems that you have found using several tools. The next Herculean task is to find the exact file where the issue blongs and then fix it. It becomes more tedious when you yourself not developed the application.

As we know that browser only understand HTML, CSS, JS etc. We can divide all in two sections

Here Client side resources contains files like HTML, CSS, JavaScript etc while server side includes aspx, ascx, master pages as our traditional ASP.NET files and it also includes latest technologies like csHTML files (Razor views) etc. It is very helpful for Razor View because it does not have any design view. ASP.NET renders all these resources into HTML and sends it to the browser. Once the browser displays your page then you have the only option to use some developer’s tool to pinpoint the problem in HTML part.

What if we have some tool that is tightly coupled with Visual Studio only to find the issues and rectify at their only, as we develop our application on Visual Studio only. Microsoft has come up with the page Inspector that is integrated with Visual Studio 11 developer's preview.

Note: This post uses developers preview not a beta or final release. So you might face few issues while using but hope all these will be taken care in final release.

Prerequisite:

• .Net framework 4.5
• Visual Studio 11 Developer Preview or later
• Internet Explorer 9 or later

What is Page Inspector?

As per Microsoft "Page Inspector is a new tool that brings browser diagnostics tools into Visual Studio and provides an integrated experience between the browser, ASP.NET, and source code.Page Inspector bridges a gap in web development between the client (browser tools) and the server (ASP.NET and source code) by bringing together the best of both worlds using a combined set of features".

How to Install it.

As I mentioned that Page Inspector works only with Visual Studio 11 Developers preview. It requires ASP.NET 4.5 and. It does not come directly with VS 11, It is like addin you need to install it in your VS 11. You can install using Web Platform Installer with the following link.

http://www.microsoft.com/web/gallery/install.aspx?appid=VSPageInspector_v1

Note: While publishing this article, Visual Studio 11 bets got released. In this release Page inspector is part of Visual Studio i e you dont need to install anything for Page Inspector.

How it works:

When we run the Page Inspector it does few steps. - Builds the project - Uses IIS express - Open the page with Page Inspector.

It needs to reverse engineer to decompose the the page.It requires a lot of metadata to provide its functionality or Source Code mapping. So when you run you project first it asks you add some settings in web config as

and it adds the following in appsettings.

A it says we need to remove this settings while deploying on production, because it requires lot of matadata to be generated that is used by Page Inspector. Which is not required on Production and adds extra overhead.

Whenever any change is made in any source file, Page Inspector prompts to refresh the page to see the changes as below.

Page Inspector works with Website and Web Application type of Projects.

So to run the Page inspector, you will get an option "View in Page Inspector" option if the Page inspector is properly installed.

Alternatively you can use the command Ctrl+K, Ctrl+G to view the page in page inspector. It opens the current active page.

So I have created a sample default ASP.NET project for the demonstration. So lets see its first view.

So Lets discuss the pointers one by one.

1: Normally in any browser diagnostics tool we just able to see browser page view and the rendered part I e HTML, CSS etc. But in Page inspector it also marks the corresponding server files i e aspx, ascx, master etc.

1 A : Inspected element on the page

1 B : Associated server side mark up. As soon as you select an element in page inspector, corresponding mark up in server side file gets highlighted. As one knows as a page is not a result of just single file normally. Page Inspector navigates to the associated file and opens it to highlight the element.

1 C : The corresponding rendered html

2: As I already mentioned that a rendered page is a result of many server side files. So Page Inspector shows you two tabs one which contains the HTML part another one show list of associated files. This looks like

As here currently, two files used so it is showing those.

3 : To show other required files like CSS, it has another tab with the following section like any other browser developer tool. These are

• Styles: Shows all the CSS attributes applied on the selected element
• Trace Styles: It shows another view of applied style to element organized by CSS attributes
• LayOut: It displays the layout
• Attributes: Lists down all the attributes applied to selected element. It gives you option to add and remove the attributes.

So Now let's dig the CSS part. Lets see the mark up

1: The selected element on HTML.

2: In style tab, It is divided in two sections : inherited and inlined. inherited includes all the style that are inherited from other elements.

3: inlined : It list down all the attributes that are applied to current element.

4: It is the hyperlink where the css attributes resides.

5: As we know, if there are multiple attributes are applied on any element so higher precedence is given to inlined element. So there are some attributes which is not applied or overridden so marked as cut.

6: You can just double click on the element to update.

Let's view another tab that is Trace styles.

Trace styles:

It lists down the applied styles organized by css attributes to the selected element. It looks like 

Layout:Layout shows the layout to the selected element as other developer tools

Attribute: This attribute tab list down all the attribute applied to the selected element. It also allows to add or remove any attribute to see the behavior.

Let's see another view:

When we select an element, it's stye is shown in style tab. Here if we click on the class, it takes us to the file which has the definition of the style class. We can update the style from there and check as below
Update style image

and also we have an option to update the style from Page Inpector's style tab like other developer tools.

I am sure, this tool will change the way we diagnose and fix the aspx page and will be used by the developers a lot.

Note: Visual Studio 11 Beta got released. It does not require to install any addin. VS 11 has pre installed Page Inspector.

Please share your valuable feedback and do let me know if I missed something