IE Developer Toolbar – Firebug for Internet Explorer

I delve a little bit into web development and WordPress theme customization as you can see right here. One tool I find indispensable is the Firebug Firefox extension. I can view/edit and play with live HTML/CSS code for any web page and see the possible results live for the tweak I am doing.

You can browse through the DOM tree of a webpage with Firebug. It also helps me to look up HTML & CSS code for various parts of a website using the ‘Inspect’ tool. This works great for troubleshooting or developing and viewing sites in a Firefox browser.

For those odd occasions when there is a problem in just Internet Explorer, I have always been at a loss of not having a tool like Firebug.

Until, I came across Developer Toolbar for IE developed by Microsoft recently. Even though this tool has been around for a while, it must be a well kept secret or I must have just gotten my head out of the sand.

I found it useful to troubleshoot some IE-only CSS bugs on some themes my wife and I were customizing. Let’s look at a few things this toolbar will you give after installation:

IE Developer Toolbar Quick Facts

  • An easy access button to toggle the toolbar to view or hide
  • Lets you view DOM for the current page in a tree view – similar to Firefox’s DOM Inspector
  • Selecting an element in tree lets you view attribute and the current styles for the element
  • You can disable images, javascripts and css
  • Style Tracer – helps you find exactly where and which style sheet, a rule is effecting a particular element.
  • Offers a View Source that lets you view source of the original page, currently rendered page or just the selected element. I like the way it shows the current styles associated with elements right in the view source.
  • An Outline option outlines DIVs, images, tables, table cells, etc.
  • A Validator tool cal validate HTML, CSS, Feed & Links in a webpage
  • I like the Find & Cache options as well.

IE Toolbar

If you have used Firebug or Web Developer Toolbar for Firefox, a lot of these features will be very familiar to you.

Download IE Developer Toolbar

Even if you are not a web developer, if you occasionally tweak HTML & CSS for your website/blog, I highly recommend getting used to a tool such as this one. I use it as a learning tool to see how someone has coded something or used CSS to style an element that I find interesting when I am surfing the web.

Plus, I can make changes to fonts or any CSS code for my blog in Firebug without and have a preview without having to modify any code in the server.

What kind of tool do you use for your web development needs?

Explore Tags: , , , ,

One Response to “IE Developer Toolbar – Firebug for Internet Explorer”

  1. Ian Thames October 7, 2009 at 5:59 am #

    Thanks for sharing this valuable information I was researching on the internet when I found your site and felt I must say a quick thankyou for sharing this with everyone