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
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.
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
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
Figure: Client and Server side files
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.
- .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.
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
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.
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.
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.
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
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
- 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.
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
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
Figure: Updating css file
Update style image
also we have an option to update the style from Page Inpector's style tab like other
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