Utility SpotlightInternet Explorer Developer Toolbar

Lance Whitney

Whether you develop Web content yourself or just support your local webmaster, here's a free Microsoft utility to make your job easier. The Internet Explorer Developer Toolbar helps you fix misbehaving Web pages by letting you peek behind the scenes. The Toolbar displays all tags and styles for your text, tables, images, and other HTML content. You can view style rules, highlight specific elements on your page, and even validate your HTML and CSS.

You install the Internet Explorer Developer Toolbar from the downloaded IEDevToolBarSetup.msi file. After installation, reopen Internet Explorer, and a new button called IE Developer Toolbar appears on the command bar. Click on the button and the Toolbar opens in the lower portion of your browser window, separated into three panes (see the screenshot). The first pane displays a tree view of all your Web page elements. Clicking on any element reveals its attributes and styles in the other two panes.

Using pulldown menus, you can highlight specific elements on the screen, either by clicking on them or by searching for them. Search for all h3 tags, for example, and they appear one after another in the tree view. Selecting a tag then outlines its corresponding element on the page. You can also find elements by choosing specific categories, such as div tags, tables, images, and objects placed using absolute or relative positioning.

Behind the scenes of a Web page

The Toolbar can be especially helpful for working with style rules. It can highlight all items on a page formatted with ID or class styles. You can generate a report of all the rules in your style sheet to determine where and how they are applied. You can even disable all CSS to see how your page elements are affected.

To manage graphic objects with the Toolbar, you can enable and disable images and reveal the resolution, size, path, and alt tag for each picture. The Toolbar also will generate an easy-to-read image report displaying the key details for all graphics.

Using the Toolbar, you can easily resize your browser page to any resolution from 800x600 to 1280x1024 or your own custom size. An onscreen ruler will measure any element by pixels. A color-picker tool displays an eyedropper that allows you to select an object in order to see its color value in RGB and hex.

To help you troubleshoot Web page problems, the Toolbar can disable certain elements, such as JavaScript and cookies. You can view the HTML source of your content, either the entire page or just a selected object. Moreover, the source display is formatted and color-coded so that you can separate content from tags easily. From the tree view, you can even add and remove styles and other attributes on the rendered display of your page to see their effect. Finally, the Toolbar will ensure that your content is checked for XHTML validity, broken links, and accessibility by piping your page to the World Wide Web Consortium (W3C) validation service.

The Internet Explorer Developer Toolbar is compatible with Internet Explorer 6 and 7 under Windows XP, Windows Vista, and Windows Server 2003. Visit go.microsoft.com/fwlink/?LinkId=125120 for more details and a link to download the Toolbar.

Lance Whitney is an IT consultant, Web developer, and technical writer. He has spent countless hours tweaking Windows workstations and servers. Originally a journalist, he took a blind leap into the IT world 15 years ago.