Utility Spotlight Internet Explorer Developer Toolbar
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.
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.