Outlining Elements with IE9 F12 Developer Tools

One feature of the F12 Developer Tools in IE9 that I like is its ability to outline elements on a page. You’ll find this option under the Tools menu (or Ctrl+O):

When selected, you’ll be presented with the following window:

Here, you can specify CSS selector expressions for the purpose of outlining elements on a page. Let’s say I’m reviewing the following page:

Let’s say I want to highlight all the DIV elements on my page. In the Outline Elements window, I specify the following:

Once applied, IE9 outlines all the elements that match this criteria:

Let’s take this a step further. I mentioned that this outlining capability is based on a selector, so we can specify some more power expressions that leverage pattern matching. For example, I’ll specify the universal selector and update:

As a result of this action, all elements are now outlined:

Let’s change this again. Here, I’ll have the F12 Developer Tools outline IMG elements that are child elements of any DIVs on this page:

Now I can get a better understanding – visually-speaking – of how my page is structured:

Nice!