Click here to Skip to main content
Click here to Skip to main content

A Starter Guide to Page Inspector

, 27 May 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
This article talks about Page Inspector that got introduced with Visual Studio 11

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

Browser developer Tools
Figure: Browser developer tools

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.

Cyclic process of fixing HTML issues
Figure:Its a cyclic process to fix HTML issues

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.

Process of fixing HTML issues
Figure: Process of fixing HTML issues

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

Process of fixing HTML issues
Figure: Client and Server side files

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
Process of fixing HTML issues

Figure: Popup asking for Page Inspector setting
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.

Process of fixing HTML issues
Figure: Asks to refresh the page
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.

Process of fixing HTML issues
Figure: How to view a page in Page Inspector

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.

Process of fixing HTML issues
Figure: Viewing a Page in Page Inspector

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

Server side files listing
Figure: Server side files listing of a page

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


Figure:Style of an element

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 

Figure:Trace style tab

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.

Attribute tab
Figure: Add/Remove css attribute

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
Attribute tab
Figure: Updating css file
Update style image

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

Attribute tab

Figure: Updating css at Page Inspector

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Brij
Software Developer (Senior)
India India
Brij is a 3-times Microsoft MVP in ASP.NET/IIS Category and a passionate .NET developer. More than 6 years of experience in IT field, currently serving a MNC as a Tech Lead/Architect.
 
He is a very passionate .NET developer and have expertise over Web technologies like ASP.NET 2.0/3.5/4.0, jQuery, JSON, Javascript, IIS and related technologies. He is also a Exchange Server (EWS) Specialist. He has great experience in design patterns and N-Tier Architecture.
 
He is also certified as Microsoft Certified Technologies Specialist-ASP.NET and Microsoft Certified Technologies Specialist-WCF in .NET 4.0. He has also received several awards at various forums and his various articles got listed as "Article of the day" at ASP.NET Microsoft Official Website www.asp.net.
 
He has done MCA from NIT Durgapur and completed his graduation from Lucknow University.
 
Learning new technologies and sharing knowledge excites him most. Blogging, solving problems at various forums, helping people, keeps him busy entire day.


Visit his Blog: Brij's arena of .NET
 
Area of Expertise :
C#, ASP.NET 2.0,3.5,4.0, AJAX, JQuery, JSON, XML, XSLT, ADO.Net, WCF, Active Directory, Exchange Server 2007 (EWS), Java script, Web Services ,Win services, DotnetNuke, WSS 3.0,Sharepoint Designer, SQL Server 2000/2005/2008
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun18-Aug-13 23:50 
GeneralMy vote of 5 PinmemberP.Salini29-May-12 2:02 
QuestionPage Inspector is installed as part of VS11 beta now PinmemberJorge Gabuardi18-Apr-12 8:43 
AnswerRe: Page Inspector is installed as part of VS11 beta now PinmentorBrij18-Apr-12 8:50 
QuestionNot convinced that this either better or lesser than Fiddler PinmemberHaripraghash11-Apr-12 21:17 
AnswerRe: Not convinced that this either better or lesser than Fiddler PinmemberHaBiX27-May-12 22:14 
GeneralMy vote of 5 Pinmemberstooboo9-Apr-12 11:09 
GeneralRe: My vote of 5 PinmentorBrij10-Apr-12 5:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411023.1 | Last Updated 28 May 2012
Article Copyright 2012 by Brij
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid