Last week I mentioned my top five Visual Studio 11 designer improvements for ASP.NET development which took a look at some new goodies for us ASP.NET devs in VS11. One of these items, the Page Inspector, did get a bit of a spotlight but I think a paragraph or two cannot contain the sheer awesomeness that is this tool.

Now I can hear some of you asking “What is this Page Inspector, and what makes it so special?” Well, let me tell you :) The Page Inspector found in VS11 brings in some of the most useful features within our favorite modern browser’s developer tools. Things like DOM navigation, finding certain elements and modifying the CSS on the fly can now all be done from within Visual Studio. Is this a replacement for the developer tools in the browser? No. However, it provides us with even more tools and information for developing our ASP.NET project before we need to take use of the browser’s dev tools.

Enough of me talking here, I know you must be super excited to see what the Page Inspector is all about! If you want to play the home game and follow along, just download the Visual Studio 11 Beta by following this here:

Inspector Gadget

In order to start using the Page Inspector we simply just have to right-click on any one of the elements inside of our ASP.NET WebForms page and select "View in Page Inspector" from the context menu that appears.

If this is your first time using the Page Inspector in this particular project, you'll see this little dialogue pop up:

Essentially all this is doing is adding the following to your web.config:

Under the <appSettings> area.

Side-note: An interesting observation that I made when setting this to false is that you can still utilize some of the Page Inspector functionalities, although it will give you a warning in the "problem area" on the top left.

To make things easy I'll try to step through the Inspector Tools by separating out the left and right sides.

Left side – The Logic

Feature #1 – DOM Traversal

Now some of you might notice the bottom of the Page Inspector. It's locked and loaded with some pretty cool stuff (that's the technical term).  First thing you might notice is the DOM inspector tool that we have on the left.

This is very similar to what you can already find in the developer tools for most modern browsers, and from the looks of things IE9 and IE10 have had some influence here! Now you can go through and expand/collapse all of the elements on your page and just get an overall feel of the DOM that is being created from your WebFroms page (notice the Modenizr integration! :D). This can be good, if you want to just step through the entire page, but it can quickly become tedious. This is where Inspection Mode comes in to save the day.

When this is selected, we can navigate through all of our HTML elements in the section above (where our page is actually being rendered) and we can simply select the element by clicking on it. One of the best things about this Inspection Mode is that you get some insight to the element while you hover over it.

As we see above, this element that I highlighted has "li.two" appear above it. This is letting me know that this is an <li> element, and the class that is applied is called "two". If I were to add another class named "test", it would display "li.two test" - giving me a quick rundown of what this element is all about.

Another thing to note is that if I still have my original ASP.NET Ajax .aspx file open in Visual Studio, it will be highlighted as well.

So now you can instantly see where that rendered element is coming from. If I decide to change this element on-the-fly (by adding that class name I talked about before), the Page Inspector lets us know that a change has been made, and prompts us to refresh (either by clicking, or using a key combination). Once the refresh has been made, we can see all of the changes we have made.

Feature #2 - Project Files

Something that you might've missed when looking on that left side of the inspector tools is the "Files" tab next to the HTML. If you click on that, you get a view of what files in your solution went into render this page. So, in our case (since this is the default ASP.NET 4.5 WebForms project) we have "~/Default.aspx" and "~/Site.Master" listed. If any other pages went into this (nested Master Pages for example), these would also be displayed here. Very useful insight that you can't really get from the browser dev tools!

Right side – The Creativity

Feature #3 – CSS Modification

At quick glance you can see that this mainly has to deal with the CSS of the element with the exception of the right-most tab "Attributes". The initial view is always on the "Styles" tab and here we can see all of the inherited CSS at the top, which can be collapsed, and the other CSS rules that affect this element below.

So here we can go through and deselect the CSS associated with our element and see the changes in real time. Something that I noticed, which can be pretty useful, is that when you are dealing with inherited CSS properties and you deselect one, the changes affect all elements that inherit that property.

If we right-click anywhere within this area, we get a nice little context menu that pops up.

This allows us to quickly add new CSS rules and properties, as well as remove them if need be. Additionally we can copy the entire rule if we'd like, which can then be easily copied and pasted into any CSS file! Pretty sweet to be able to just do a couple of quick copy & pastes to add all of your new CSS!

Feature #4 – CSS Styles

The next tab is "Trace Styles" which has a very similar view to "Styles". The main differences are that all of the styles applied are organized by CSS attributes, and you cannot add or remove rules and properties from here. You can still select and deselect styles to see how they affect the overall page.

Feature #5 – Element Layout

The "Layout" tab is interesting. It gives you the size of the element, followed by the padding, border, margin, and offset values. This is all represented by boxes that contain each other (in the proper order of inner-most to outer-most) and with pixel values of the top, right, bottom, and left values for each of these. By double-clicking on any of the values you can quickly edit them to see how adding these rules will affect the element on the page.

Feature #6 – Element Attributes

The last and final tab is "Attributes". The name kind of (or really) gives away what this tab is all about; the attributes of the selected element. Taking a look at our attributes tag for the <li> element we've been dealing with we see that we have one attribute "class" with the "two test" value. Notice that we have "Add attribute", "Remove attribute", and "Current element" at the top of this area as well. It's pretty cool that it lets us know just what kind of element we're dealing with, especially in cases where you don't realize that you accidently selected a different element (happened to me while writing this post!) and wonder why you don't see changes to your element ;)

If I were to click "Add attribute", I get a simple text box where I can input whatever I would like as an attribute. So, if I want to add "data-role" I can easily do so. Once I press enter I can give it a value as well. However, I just left it blank here. Why? Well I wanted to let you see what happened on the left side of the Inspection Tools.

Visual Studio 11 just added the attribute for us and even gave us ="" at the end. Pretty nifty! You can of course add, edit, or remove all attributes from this particular tab as freely as you'd like. If you don't like the changes, you can just refresh the Page Inspector!

I'll Get You Gadget!

So now you should be a bit more educated about the Page Inspector - isn't it great!? :D It definitely helps quite a bit when dealing with web development across ASP.NET (both WebForms and MVC). While it isn't a replacement for the Developer Tools that come with all of our favorite browsers, it adds more to what you can do in Visual Studio before having to consult the Developer Tools which is awesome. It sort of removes some of the mystery that comes between the server-side items, and what appears in the browser, which is always welcome - I know we all hate saying that "magic" was the reason for an element appearing or disappearing ;)