LANGUAGES: HTML | JavaScript
IE Developer Toolbar:
This Free Internet Explorer Developer Toolbar Is an Essential Tool for Every Professional
Web Developer
We’ve all been annoyed by pages that, despite our best development efforts, inexplicably
render incorrectly at run time. Often a confusing tree of CSS elements alters page
pieces in unanticipated ways. Other times page elements accidentally get nested
inside other page elements, thus altering the appearance or behavior. In other cases
the page’s rendered HTML might end up slightly invalid, and the browser’s attempt
to reconcile the issue sometimes does more harm than good by masking it or creating
quirky output. If you’re like most Web developers, you’ve probably killed countless
hours debugging such problematic pages, manually parsing through HTML to try to
find and fix the underlying source of such problems. I’m pleased to inform you that
those days are behind you now.
Microsoft’s freely downloadable Internet Explorer Developer Toolbar makes it a breeze
to visually pinpoint every detail of every element in a page. The toolbar turns
Internet Explorer into a useful instrument for Web developers by not only rendering
the HTML, but also helping you analyze every aspect of it. Additionally, you can
tinker with the rendered HTML elements to instantly see the results of various “What-If”
scenarios.
Figure 1: The Developer Toolbar, shown here docked at the bottom of Internet Explorer, is an essential tool for troubleshooting pages that stubbornly refuse to appear as expected.
Once installed, the toolbar can be activated through IE’s Tools | Toolbars | Explorer
Bar | IE DOM Explorer dropdown menu item. Alternatively, it can be enabled via an
Internet Explorer command bar button that gets automatically installed, although
I couldn’t see it at first so I had to rearrange my command bar a bit to make enough
room for it to appear. The toolbar doesn’t appear to be compatible with the 64-bit
version of Internet Explorer, but even if you’re running 64-bit Windows Vista you
can still run the 32-bit version of Internet Explorer without difficulty; in fact,
this is the default browser.
It’s Elemental
The toolbar has three window panes that, by default, are docked together at the
bottom of Internet Explorer. (Alternatively, the toolbar can be undocked and appear
in its own application window by clicking the “unpin” button at the top right of
the toolbar.) The right-most window pane shows a treeview that lists every element
in the page. You can drill down through this page element hierarchy to get a better
understanding of exactly where each element is nested within the page structure.
Selecting an element will automatically populate the other two toolbar panes with
every detail about that element, such as the attributes and styles that are applied
to it. The element will also blink several times inside the page so you can be sure
you’ve selected the correct element.
Because complex pages can have a hierarchy too cumbersome to navigate via treeview,
you can also select a page element by clicking directly on it in the page. This
is done by first clicking the “Select Element by Click” button at the top left of
the toolbar, or by selecting the identically named menu item from the toolbar’s
Find dropdown menu. If, by some stretch of the imagination, you still can’t locate
the desired page element, you can perform a search for the element by its name,
id, or class via that same Find dropdown menu.
Once a page element has been selected using any of the above techniques, its attributes
can be modified or deleted to instantly see the results. Simply double click an
attribute to edit it. You can even add entirely new attributes to immediately see
what things would look like without having to make a trip back to Visual Studio.
Debugging by Simplification
Experienced developers know that it’s sometimes necessary to simplify a complex
situation in order to isolate a problem and identify its underlying origin. The
toolbar’s Disable dropdown menu has several items to help you with such an approach.
The first menu item disables all scripts on the page so you can be sure that a renegade
line of client-side JavaScript code (or VBScript) isn’t mucking things up. The next
menu item disables the browser’s popup blocker to help diagnose any issues related
to that.
The final menu item under the Disable menu is my personal favorite: It turns off all CSS formatting so you can get a voyeuristic peek at the naked page content without
its CSS clothing. CSS can get quite complex, and therefore has a high potential
for introducing unwanted side effects. So it’s certainly a handy feature to instantly
see what things look like without all the potentially faulty window dressing.
Discover Hidden Page Details
The toolbar’s View dropdown menu contains quite a few handy menu items to help uncover
details about your page that you might not have known. Checking the Class and ID
Information menu item will overlay informative blue blocks of text over elements
on the page that identifies all their IDs and classes at a glance. There are also
menu items that overlay tab indexes and access key details.
Similarly, the Link Paths menu item will overlay green blocks of text on top of
every hyperlink to identify their underlying URLs. The next menu item, Link Report,
will open a new window that lists the URL of every hyperlink on the page, including
information about their target attributes.
The last remaining menu item under the View dropdown menu (named Source) contains
several submenu items. Using these submenu items you can view the page source, but
not merely in notepad as you’re accustomed to seeing from Internet Explorer. Instead,
it opens a custom HTML viewer that beautifully formats and color codes the HTML.
This makes it much easier to read compared to notepad. This HTML viewer includes
line numbers, optional word wrapping, and the ability to collapse and expand logical
sections of the HTML. You can also choose to view the HTML source for isolated page
elements by first selecting the element (as described previously), then choosing
the DOM (Element) submenu item.
Outlining
Page elements can end up nested in all kinds of complex ways, some of which you
may not have intended. For example, a table can be nested inside a table, and that
table may in turn be nested inside yet another table. The resulting display can
vary greatly depending on the CSS applied and the attributes of each table, row,
and cell. Visual Studio tends not to be very helpful with this kind of thing; its
designer often displays design-time depictions of pages that look little like the
final rendered output.
This is where the toolbar’s Outline dropdown menu can come in handy (see Figure
2). Selecting the Tables menu item will cause every table on the page to be outlined
in red, thus clarifying precisely where one table ends and another starts. Similarly,
the Table Cells menu item will outline every table cell in orange so you can see
exactly what’s nested inside each cell. The Div Elements menu item will outline
all page Div elements in green.
Figure 2: The Developer Toolbar (enabled via this highlighted toolbar button) can outline page elements and overlay a variety of information on top of them to identify their underlying attributes at a glance.
Another interesting feature is the ability to outline all relatively positioned
page elements, all absolutely positioned elements, or all floating page elements.
There is also an Any Element menu item, which opens a dialog box that allows you
to specify custom elements to be outlined with custom colors.
The Images menu item will cause all page images to be outlined in green. This can
be useful in cases where an overzealous graphic designer has enhanced a page in
confounding ways with images that lock together like jigsaw puzzles. Of course,
images are such a fundamental part of Web design that they deserve a toolbar menu
all to themselves ...
Picture Perfect
The toolbar’s Images dropdown menu contains several options for working with embedded
pictures. The first menu item allows images to be disabled, replacing them with
the dreaded red x that we’ve all come to hate whenever an image in our page is missing.
The next menu item, Show Image Dimensions, overlays a blue text block on top of
every image that summarizes its height and width in pixels. Similarly, the Show
Image File Sizes menu item overlays the size of the source image file so you can
see how many kilobytes of bandwidth each one is eating. As you might expect, the
Show Image Paths menu item overlays the full URL of each image. The View Alt Text
menu item replaces each image with the text from its alt attribute, which is a handy
way to identify where you’ve forgotten to place this important standards-compliant
piece of data.
The final menu item under the Images dropdown menu is perhaps the most useful. The
View Image Report menu item opens a new window that lists every image in the page,
along with details about each one (such as its actual size, adjusted size, and title
text). Appropriately, missing alt attributes are highlighted in red (see Figure
3).
Figure 3: The Developer Toolbar (enabled
via this highlighted toolbar button) can outline page elements and overlay a variety
of information on top of them to identify their underlying attributes at a glance.
Cache Flow
The toolbar’s Cache dropdown menu contains items for disabling caching and for clearing
the browser cache (either completely or just for the current domain). It also provides
the ability to disable cookies and to clear the cookies for the current session
or domain.
The View Cookie Information menu item pops open a new window that lists information
about every cookie related to this domain, including its contents and expiration
date.
Helpful Tools
The toolbar’s Tools dropdown menu has a few items that could certainly prove themselves
to be useful. The Resize menu item will automatically resize the browser window
to the sizes that your users are most likely to have their resolution set, such
as 800 x 600, 1024 x 768, etc. This is a great method for looking at your pages
in the same way that your users will see them. There is also a “custom” menu item
that provides the ability to size the browser window to any size you specify.
The Show Ruler menu item allows you to drag a ruler across the screen to measure
the size (in pixels) of page elements or any other portion of the page. The resulting
dialog box that hovers overhead provides several options, such as the ability to
snap the ruler to the edges of page elements and adjust the look of the ruler. You
can hold down the Control key on the keyboard to create multiple rulers at once.
Control+M will enable a magnifying glass for more precise measurements.
The Color Picker menu item allows you to easily identify any color on any page.
Simply move the mouse over a portion of the page and the Color Picker dialog box
hovering overhead will tell you the hex color value as well as the decimal red,
green, and blue values of the underlying color (see Figure 4).
Once you’ve found
the color you want, the convenient Copy and Close button in the dialog box will
copy the color value to the Clipboard and close the color picker, readying you to
paste that color value wherever you need it.
Figure 4: The Color Picker dialog box is handy for identifying the exact colors used on any Web site, enabling effortless reuse.
Validate Everything
The final dropdown menu provided by the toolbar is the Validate menu. Select the
HTML menu item to validate the HTML rendered by your page to ensure it meets all
W3C standards (Hint: Your page probably doesn’t). Even if your page is not posted
to the public Internet it can still be validated via the Local HTML menu item. Similarly,
the CSS for your page can be validated via the CSS or Local CSS menu items. The
Feed menu item will validate any RSS feeds associated with your Web site to ensure
they too meet common standards.
Clicking the Links menu item will open a new window that lists the URL of every
hyperlink on the page. Additionally, it will identify any dead or dying links. In
other words, it will ensure that each hyperlink points to a valid, active Internet
address. It will also identify malformed URLs and suggest fixes that will bring
them into standards compliance.
Accessibility compliance can also be analyzed, which is especially useful for US
government Web sites (which are required by law to meet such standards). Pages can
be validated against section 508 and WAI standards to allow support for disabled
users — and so you can be sure you’re not inadvertently violating the law.
Conclusion
Microsoft’s Internet Explorer development team deserves a pat on the back for providing
this tremendously useful tool, even if it wasn’t an entirely original idea. Firefox’s
built-in DOM Inspector was clearly an inspiration. If you’re a Firefox fan you’re
probably already aware that this similar (but less feature-rich) component is available
from Firefox’s Tools dropdown menu. If you spend a lot of time with Firefox I recommend
downloading Chris Pederick’s Web Developer Extension, which provides a richer set
of features more comparable to the IE Developer Toolbar detailed in this article.
You can download this free Firefox extension from here or here.
Download the Internet Explorer Developer Toolbar here.
The original version of this article was published in
the July 2007 issue of
ASP.NET Pro Magazine.