ControlFreak
LANGUAGES: HTML | CSS
IE Developer Toolbar
Free Internet Explorer Developer Toolbar Is an Essential Tool for Every Professional Web Developer
By Steve C. Orr
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.
The Internet Explorer Developer Toolbar (pictured at the bottom of Figure 1) is currently in beta 3 release as of this writing. But don t let the word beta scare you off the toolbar has actually been around for quite some time, and my testing has shown it to be reasonably solid despite its trendy semi-permanent beta label.
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 Image Report feature
will list every image on a page and detail information about each one, such as
image size and missing alt tags.
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 https://addons.mozilla.org/en-US/firefox/addon/60 or http://chrispederick.com/work/webdeveloper/. The Internet Explorer Developer Toolbar can be downloaded for free from http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en.
Steve C. Orr is an ASPInsider, MCSD, Certified ScrumMaster, Microsoft MVP in ASP.NET, and author of the book Beginning ASP.NET 2.0 AJAX by Wrox. He s been developing software solutions for leading companies in the Seattle area for more than a decade. When he s not busy designing software systems or writing about them, he can often be found loitering at local user groups and habitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.net or e-mail him at mailto:[email protected].
