Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

(untagged)

Become a Visual Studio 11 Master Detective – A Look into the Page Inspector

, 5 Apr 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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

Editorial Note

This article appears in the Third Party Product Reviews section. Articles in this section are for the members only and must not be used by tool vendors to promote or advertise products in any way, shape or form. Please report any spam or advertising.

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 Smile | :) 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:

Get Visual Studio 11 Beta

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.

View in Page Inspector

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

Page Inspector Warning

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

<add key="VisualStudioDesignTime:Enabled" value="true" />

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.

Page Inspector Problem Message

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.

Page Inspector - HTML

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 WebForms page (notice the Modenizr integration! Big Grin | :-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.

Toggle Inspection Mode

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.

Inspection Element

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.

Page Inspector on .aspx page

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.

li element updated

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!

WebForms page files

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.

CSS Styles

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.

Modify CSS Styles

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.

CSS Trace Styles

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.

CSS Element Layout

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 Wink | ;)

Element Attributes

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.

Page Inspector Element Attributes

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!? Big Grin | :-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 Wink | ;)

Download the RadControls trial today!

About the author

Carl Bergenhem

Carl Bergenhem

Carl Bergenhem is an Enterprise Solutions Consultant at Telerik specializing in the ASP.NET AJAX and ASP.NET MVC products. He has always been interested in web development and has played around with various web technologies since he was a child. In his free time Carl enjoys soccer, running and playing his guitar.

@carlbergenhem

License

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

Share

About the Author

TelerikCode

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 5 Apr 2012
Article Copyright 2012 by TelerikCode
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid