When developing for Firefox, there’s firebug as well as a variety of other handy tools to assist in your development. Unfortunately, there’s not the same caliber of tools when you’re developing/debugging in Internet Explorer. However, there is the Internet Explorer Developer Toolbar; the closest thing to firebug you can find.

You can download the toolbar from Microsoft’s website:

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

It is heavily limited when compared to firebug, but still a priceless tool when tracking down those IE only bugs.  I use it with Internet Explorer 6 and 7, as 8 has some built-in developer tools (more about those in a later post). To enable it, simply click the icon that appears in your IE toolbar. The icon is a blue cursor encased in a < and a > (fancy graphics, huh?).

If you have used firebug before, a lot of the IE Developer Toolbar will quickly become second nature. Here are a few tips for those new to IE Developer Toolbar:

  • The left column is the HTML tree
  • The center column is the attributes of an element
  • The right column lists the styles assigned to the element
  • Note the check-box at the bottom of the right-hand column: “Show Default Style Values.” I have found that I use that more than I anticipated.
  • You can select elements using the icon on the far left of the toolbar (Cursor with blue outline box) or using the HTML tree
  • When you select the “Select Element by Click” button (see point above) it does not automatically become unactivated when you select an element (firebug does get out of “select element” mode once you select an element)

For more information, see Microsoft’s website regarding the IE Developer Toolbar:

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en