IE Developer Toolbar

ControlFreak

LANGUAGES:HTML | CSS

IE Developer Toolbar

Free Internet Explorer Developer Toolbar Is an EssentialTool for Every Professional Web Developer

By Steve C. Orr

We ve all been annoyed by pages that, despite our bestdevelopment efforts, inexplicably render incorrectly at run time. Often aconfusing tree of CSS elements alters page pieces in unanticipated ways. Othertimes page elements accidentally get nested inside other page elements, thusaltering the appearance or behavior. In other cases the page s rendered HTMLmight end up slightly invalid, and the browser s attempt to reconcile the issuesometimes does more harm than good by masking it or creating quirky output. Ifyou re like most Web developers, you ve probably killed countless hours debuggingsuch problematic pages, manually parsing through HTML to try to find and fixthe underlying source of such problems. I m pleased to inform you that thosedays are behind you now.

Microsoft s freely downloadable Internet ExplorerDeveloper Toolbar makes it a breeze to visually pinpoint every detail of everyelement in a page. The toolbar turns Internet Explorer into a useful instrumentfor Web developers by not only rendering the HTML, but also helping you analyzeevery aspect of it. Additionally, you can tinker with the rendered HTMLelements to instantly see the results of various What-If scenarios.

The Internet Explorer Developer Toolbar (pictured at thebottom of Figure 1) is currently in beta 3 release as of this writing. But don tlet the word beta scare you off the toolbar has actually been around forquite some time, and my testing has shown it to be reasonably solid despite itstrendy semi-permanent beta label.

Figure 1: The Developer Toolbar,shown here docked at the bottom of Internet Explorer, is an essential tool fortroubleshooting pages that stubbornly refuse to appear as expected.

Once installed, the toolbar can be activated through IE sTools | Toolbars | Explorer Bar | IE DOM Explorer dropdown menu item. Alternatively,it can be enabled via an Internet Explorer command bar button that getsautomatically installed, although I couldn t see it at first so I had torearrange my command bar a bit to make enough room for it to appear. Thetoolbar doesn t appear to be compatible with the 64-bit version of InternetExplorer, but even if you re running 64-bit Windows Vista you can still run the32-bit version of Internet Explorer without difficulty; in fact, this is thedefault browser.

It s Elemental

The toolbar has three window panes that, by default, aredocked together at the bottom of Internet Explorer. (Alternatively, the toolbarcan 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 atreeview that lists every element in the page. You can drill down through thispage element hierarchy to get a better understanding of exactly where eachelement is nested within the page structure. Selecting an element willautomatically populate the other two toolbar panes with every detail about thatelement, such as the attributes and styles that are applied to it. The elementwill also blink several times inside the page so you can be sure you veselected the correct element.

Because complex pages can have a hierarchy too cumbersometo navigate via treeview, you can also select a page element by clickingdirectly on it in the page. This is done by first clicking the Select Elementby Click button at the top left of the toolbar, or by selecting theidentically named menu item from the toolbar s Find dropdown menu. If, by somestretch 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 thatsame Find dropdown menu.

Once a page element has been selected using any of theabove techniques, its attributes can be modified or deleted to instantly seethe results. Simply double click an attribute to edit it. You can even addentirely new attributes to immediately see what things would look like withouthaving to make a trip back to Visual Studio.

Debugging by Simplification

Experienced developers know that it s sometimes necessaryto simplify a complex situation in order to isolate a problem and identify itsunderlying origin. The toolbar s Disable dropdown menu has several items tohelp you with such an approach. The first menu item disables all scripts on thepage so you can be sure that a renegade line of client-side JavaScript code (orVBScript) isn t mucking things up. The next menu item disables the browser spopup blocker to help diagnose any issues related to that.

The final menu item under the Disable menu is my personalfavorite: It turns off all CSS formatting so you can get a voyeuristic peek atthe naked page content without its CSS clothing. CSS can get quite complex, andtherefore has a high potential for introducing unwanted side effects. So it scertainly a handy feature to instantly see what things look like without allthe potentially faulty window dressing.

Discover Hidden Page Details

The toolbar s View dropdown menu contains quite a fewhandy menu items to help uncover details about your page that you might nothave known. Checking the Class and ID Information menu item will overlayinformative blue blocks of text over elements on the page that identifies alltheir IDs and classes at a glance. There are also menu items that overlay tabindexes and access key details.

Similarly, the Link Paths menu item will overlay greenblocks of text on top of every hyperlink to identify their underlying URLs. Thenext menu item, Link Report, will open a new window that lists the URL of everyhyperlink 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 youcan view the page source, but not merely in notepad as you re accustomed toseeing from Internet Explorer. Instead, it opens a custom HTML viewer thatbeautifully formats and color codes the HTML. This makes it much easier to readcompared to notepad. This HTML viewer includes line numbers, optional wordwrapping, and the ability to collapse and expand logical sections of the HTML. Youcan also choose to view the HTML source for isolated page elements by firstselecting the element (as described previously), then choosing the DOM(Element) submenu item.

Outlining

Page elements can end up nested in all kinds of complexways, some of which you may not have intended. For example, a table can benested inside a table, and that table may in turn be nested inside yet anothertable. The resulting display can vary greatly depending on the CSS applied andthe attributes of each table, row, and cell. Visual Studio tends not to be veryhelpful with this kind of thing; its designer often displays design-timedepictions of pages that look little like the final rendered output.

This is where the toolbar s Outline dropdown menu can comein handy (see Figure 2). Selecting the Tables menu item will cause every tableon the page to be outlined in red, thus clarifying precisely where one tableends and another starts. Similarly, the Table Cells menu item will outlineevery table cell in orange so you can see exactly what s nested inside eachcell. 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 andoverlay a variety of information on top of them to identify their underlyingattributes at a glance.

Another interesting feature is the ability to outline allrelatively positioned page elements, all absolutely positioned elements, or allfloating page elements. There is also an Any Element menu item, which opens adialog box that allows you to specify custom elements to be outlined withcustom colors.

The Images menu item will cause all page images to beoutlined in green. This can be useful in cases where an overzealous graphicdesigner has enhanced a page in confounding ways with images that lock togetherlike jigsaw puzzles. Of course, images are such a fundamental part of Webdesign that they deserve a toolbar menu all to themselves ...

Picture Perfect

The toolbar s Images dropdown menu contains severaloptions for working with embedded pictures. The first menu item allows imagesto be disabled, replacing them with the dreaded red x that we ve all come tohate whenever an image in our page is missing. The next menu item, Show ImageDimensions, overlays a blue text block on top of every image that summarizesits height and width in pixels. Similarly, the Show Image File Sizes menu itemoverlays the size of the source image file so you can see how many kilobytes ofbandwidth each one is eating. As you might expect, the Show Image Paths menuitem overlays the full URL of each image. The View Alt Text menu item replaceseach image with the text from its alt attribute, which is a handy way toidentify where you ve forgotten to place this important standards-compliantpiece of data.

The final menu item under the Images dropdown menu isperhaps the most useful. The View Image Report menu item opens a new windowthat lists every image in the page, along with details about each one (such asits actual size, adjusted size, and title text). Appropriately, missing altattributes are highlighted in red (see Figure 3).

Figure 3: The Image Report featurewill list every image on a page and detail information about each one, such asimage size and missing alt tags.

Cache Flow

The toolbar s Cache dropdown menu contains items fordisabling caching and for clearing the browser cache (either completely or justfor the current domain). It also provides the ability to disable cookies and toclear the cookies for the current session or domain.

The View Cookie Information menu item pops open a newwindow 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 thatcould certainly prove themselves to be useful. The Resize menu item willautomatically resize the browser window to the sizes that your users are mostlikely to have their resolution set, such as 800 x 600, 1024 x 768, etc. Thisis a great method for looking at your pages in the same way that your userswill see them. There is also a custom menu item that provides the ability tosize the browser window to any size you specify.

The Show Ruler menu item allows you to drag a ruler acrossthe screen to measure the size (in pixels) of page elements or any otherportion of the page. The resulting dialog box that hovers overhead providesseveral options, such as the ability to snap the ruler to the edges of pageelements and adjust the look of the ruler. You can hold down the Control key onthe keyboard to create multiple rulers at once. Control+M will enable amagnifying glass for more precise measurements.

The Color Picker menu item allows you to easily identifyany color on any page. Simply move the mouse over a portion of the page and theColor Picker dialog box hovering overhead will tell you the hex color value aswell as the decimal red, green, and blue values of the underlying color (seeFigure 4). Once you ve found the color you want, the convenient Copy and Closebutton in the dialog box will copy the color value to the Clipboard and closethe color picker, readying you to paste that color value wherever you need it.

Figure 4: The Color Picker dialog boxis handy for identifying the exact colors used on any Web site, enablingeffortless reuse.

Validate Everything

The final dropdown menu provided by the toolbar is theValidate menu. Select the HTML menu item to validate the HTML rendered by yourpage to ensure it meets all W3C standards (Hint: Your page probably doesn t). Evenif your page is not posted to the public Internet it can still be validated viathe Local HTML menu item. Similarly, the CSS for your page can be validated viathe CSS or Local CSS menu items. The Feed menu item will validate any RSS feedsassociated with your Web site to ensure they too meet common standards.

Clicking the Links menu item will open a new window thatlists the URL of every hyperlink on the page. Additionally, it will identifyany dead or dying links. In other words, it will ensure that each hyperlinkpoints to a valid, active Internet address. It will also identify malformedURLs and suggest fixes that will bring them into standards compliance.

Accessibility compliance can also be analyzed, which isespecially useful for US government Web sites (which are required by law tomeet such standards). Pages can be validated against section 508 and WAIstandards to allow support for disabled users and so you can be sure you renot inadvertently violating the law.

Conclusion

Microsoft s Internet Explorer development team deserves apat on the back for providing this tremendously useful tool, even if it wasn tan entirely original idea. Firefox s built-in DOM Inspector was clearly aninspiration. If you re a Firefox fan you re probably already aware that thissimilar (but less feature-rich) component is available from Firefox s Toolsdropdown menu. If you spend a lot of time with Firefox I recommend downloadingChris Pederick s Web Developer Extension, which provides a richer set of featuresmore comparable to the IE Developer Toolbar detailed in this article. You candownload this free Firefox extension from https://addons.mozilla.org/en-US/firefox/addon/60or 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 anASPInsider, MCSD, Certified ScrumMaster, Microsoft MVP in ASP.NET, and authorof the book Beginning ASP.NET 2.0 AJAX by Wrox. He sbeen developing software solutions for leading companies in the Seattlearea for more than a decade. When he s not busy designing software systems orwriting about them, he can often be found loitering at local user groups andhabitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.net or e-mail him at mailto:[email protected].