The Magic of Visual Studio 2012 Page Inspector

Posted by: Sumit Maitra , on 5/28/2012, in Category Visual Studio, VSTS & TFS
Views: 71969
Abstract: We take a closer look at Visual Studio 2012 new Page Inspector functionality that helps developers debug their web UI from inside Visual Studio without having to ‘Alt-Tab’ between Browser and Visual Studio.

In our previous article Visual Studio 11 – Awesome New Features for Web Developers , while introducing new features of Visual Studio 2012 (aka VS 11) we had a brief look at a new functionality called Page Inspector. Today in this post, we are going to take a look at all the things that Page Inspector can do to speed up debug times for us.

 

What is the VS 2012 Page Inspector

For a lack of better term it’s a new ‘target browser’ for your Web Projects. VS 2012 lists all the browser on your system in the ‘Run’ tool button. So out of the box you will see IE and the Page Inspector.

The Page Inspector uses the IE browser engine and runs within Visual Studio with full browser functionality - as in JavaScript's, CSS are all applied as if it were a browser. You can select Page Inspector to be your default ‘browser’ of choice so that every time you hit F5, your application executes in it.

 

select-page-inspector

On first run, Page Inspector will ask you if it’s okay to add a new config entry. This is a one-time (per project) question.

page-inspector-first-time

 

Features of Page Inspector

1. Developer Tools:

The default (Developer tools from IE) are baked in so CSS view, HTML view come by default for application being debugged INSIDE Visual Studio

page-inspector-HTML-view

2. Files View:

A “Files” view indicating the SERVER SIDE files that are used for rendering the current page. E.g. in the image below, we see the current page has been rendered by the partial outputs from Index.cshtml, _Layout.cshtml and _ViewSwitcher.cshtml.

This feature is important for reviewing/debugging portal type applications that may have multiple partial views embedded.

page-inspector-file-view

3. The Inspection Mode

Inspection Mode in Page Inspector is a real time saver when debugging rendering and layout issues in applications with complicated page hierarchies. This is because in Introspection Mode, the Page Inspector starts tracking the mouse hover over each HTML element and then ties it back to the server side page that caused that bit of markup, and then opens the cshtml/vbhtml page and highlights the selection.

toggle-page-inspector

Above we see the ‘Toggle Inspection Mode’ button. It is off by default.

 

Using the Page Inspector to Debug Web Pages

Let’s walk through a simple scenario to see how we can use the Page Inspector.

Identifying Server-Side markup issues

We start our application and the home page looks as follows

home-page-before

It seems the Delete button is rendered differently from the other ‘buttons’. So we initiate the introspection mode and hover over the Delete button

page-inspector-immediate-trace

Immediately the page in which the markup for this button exists, is brought up and the selected button is highlighted.

Note: As a part of a new VS 11 feature being leveraged by Page Inspector here, the Index.cshtml tab is opened on the right hand side. Tabs that are transient like the current one or say when you hit F12 for ‘Go To Definition’ are now opened on the right hand side. This prevents opening up lots of tabs when you are simply browsing through code.

Coming back to our errant markup see that it is missing an <li> wrapper and hence is looking different.

So we fix the markup.

Notice immediately Page Inspector detects the change and suggests you hit Ctrl+Alt+Enter to refresh with the latest changes

page-inspector-change-warning

Once we refresh, as instructed our changes are visible immediately

page-inspector-updated-ui

Done. The issue is fixed.

Without the Page Inspector our workflow for the above would probably be

  1. Jump back and forth between IE and Visual Studio after you see the error
  2. Make a guess that since it’s coming from the Home page it must be in the Home Folder under Views.
  3. But Home folder only has an Index_OLD.cshtml that probably means default route has been updated, so go to global.asax and figure out the default route.
  4. Navigate to Index.cshtml for the correct controller and then make the change.
  5. Save, jump back to browser and hit F5

As we can see, we saved ourselves a bunch of hassle using the Page Inspector. Yay!

Identifying and debugging CSS issues

In the above screenshot, we find that the Edit button is stuck to the left margin. We want to give it some whitespace there

- Again using Inspection Mode we track down the <li> which gets focus in the HTML View.

- Now we look at the Styles tab and click on the css class name post-index-footer. It immediately opens the CSS just like the cshtml earlier, with the correct css selected.

page-inspector-before-css-changes

- Here we see the left and right margin is set to 0px.

- We update it to 10px and refresh the page

- Done, the CSS changes got applied.

page-inspector-css-changes-applied

Again without Page Inspector we would have to do the following using Visual Studio:

  1. Enable IE Dev tools
  2. Trace down the css class name.
  3. Come back to VS, open the correct CSS (which would be much more complex if you had more than one CSS files),
  4. Do a Ctrl+F to get to the class definition and update it.
  5. Then tab back to IE and hit refresh. Page Inspector gave us all this inside Visual Studio.

Page Inspector helped us in each of the above steps and did it all in Visual Studio.

 

Conclusion

The Visual Studio Page Inspector tool is an awesome productivity enhancement functionality for web developers. It brings the entire debug experience inside Visual Studio and it’s navigation capabilities help reduce searching and guess work.

Once VS 2012 is released, it will definitely help speed up Web Development and Maintenance tasks for web projects.

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Sumit is a .NET consultant and has been working on Microsoft Technologies since his college days. He edits, he codes and he manages content when at work. C# is his first love, but he is often seen flirting with Java and Objective C. You can follow him on twitter at @sumitkm or email him at sumitkm [at] gmail


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Rockstar on Monday, May 28, 2012 9:32 AM
I would say then you are not using Chrome - View Source.
Comment posted by Sorkin on Monday, May 28, 2012 4:03 PM
Chrome is again an external tool. The idea is to identify and debug CSS issues, "inside visual studio".

I definitely need to download and try VS 11 today!
Comment posted by Sumit on Monday, May 28, 2012 7:07 PM
@RockStar True, most browser tools have come a long way, but to add to what Sorkin said, Chrome has no way to tell you which server-side template files combined to give you the current HTML output. To be able to navigate to the exact point where you have to make the CSS/Server Side code change is truly powerful.
Something you will quickly appreciate if you are trying to maintain markup written by someone else!

@Sorkin VS11 is in Beta so 'BETA WARNING' :-)
Comment posted by web development in chennai on Friday, August 2, 2013 5:15 AM
Thanks for this wonderful sharing.
Comment posted by ahmed on Friday, October 11, 2013 5:50 AM
thanks a lot for all your efforts :)

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel