IE Dev Toolbar

With the emphasis on usability and appearance, the previously simple HTML has become incresingly difficult to read and these days most web pages are made up of a combination of several files and use often use as much CSS and client-side script as they do HTML. Using “View Source” simply doesn’t cut it anymore. Luckily Microsoft has realized this fact and is building a tool to help developers analyze these increasingly complex web documents. It’s called the Internet Explorer Developer Toolbar. I’ll give you a quick go thru to this powerful new tool and examine some of it’s most useful features.

Firstly i can be downloaded here though the current release does not support IE8 but users of IE 6 and 7 can make best out of this version. The setup is simple.

In IE 7, the process is similar, but the names have changed. After right clicking on IE’s toolbar you choose “Customize Command Bar -> Add or Remove Components…” in order to get to the “Customize Toolbar” screen. After adding the button to the toolbar, IE’s toolbar should now have an icon like the one shown below

If you prefer, you can click the icon in the upper right corner to detatch the window from IE altogether.

The heart of the program is the DOM Explorer which lets you drill down into a page’s HTML and examine the different attributes and styles related to the objects on the page. So instead of wading through tons of HTML, you simply find the item in the page hierarchy and the toolbar display its properties for you. But what if you can’t find the element of interest in the hierarchical tree? No problem… the toolbar let’s you select a page element simply by clicking on it and then finds it for you.

While the DOM Explorer is the heart and soul of the program, it also includes tons of other useful tools. I won’t go into detail on all of them, but here are some quick highlights. It shows image information, including dimensions, size, and path

It shows outlines around things like tables, DIVs, and images to indicate where those elements are. It lets you manage page caching and cookies for debugging purposes. Finally, it even provides a validation menu to help you validate your HTML, CSS, feeds, and links.

There are many other features that help a developer to make his work more easier and error free and most important point that for troubleshooting