IE Developer Toolbar – A nice tool for Web (UI) developer

IE Developer Toolbar is one of the tools that I really like while doing Web (UI) development. Normally we make changes in html code and then see its effect in browser. Whereas with IE Developer Toolbar, I make changes in browser and after getting exact required effect in page, write the required html code.


Problem while configuring the IE Developer Toolbar:
I faced a problem with IE Developer Toolbar installation. After IE Developer Toolbar installation, I was unable to access its various functionalities. So I did following changes to make IE Developer Toolbar fully functional:

1) Open the Windows Components Wizard.

(Control Panel -> Add or Remove Programs -> Add / Remove Windows Components)

2) Uncheck the Internet Explorer Enhanced Security Configuration checkbox.

3) Complete the wizard by clicking the Next / Finish button.

How to open the IE Developer Toolbar pane:
There are 3 ways that I know to open the IE Developer Toolbar in IE-7 browser:

1) Toolbar (at top of the browser, below address bar) -> View -> Explorer Bar -> IE Developer Toolbar

2) Tools (at top-right corner of the browser) -> Toolbars -> Explorer Bar -> IE Developer Toolbar

3) Double arrow (at extreme top-right of the browser) -> IE Developer Toolbar

I liked the 3 rd way to open the IE Developer Toolbar, because it’s very quick to open as compare to other ways.

3 Most nice features / functionalities of IE Developer (as per me):

1) We can see the final rendered html code with or without its applied CSS styles. Here we can easily distinguish that whether the applied style is inline style or external style.

To check the html code with / without style, select a particular html element / node in IE Developer Toolbar pane. Right-click that particular element/node, a pop-up will displays 3 menus in it. Select appropriate menu as per requirement.

2) Ruler: If you want to determine / check the size of some html element like image then this ruler is really a nice tool to use.

To open / hide Ruler, click the Tools menu in IE Developer Toolbar pane, and then click Show / Hide Ruler.

Now select a particular html element (like image in above figure), select the color you want for better visibility (black is default one). Start dragging your mouse by Left-clicking at start point and stop dragging at the required end-point. This displays the co-ordinate of Start and End point, also the Width / Height between the two points.

3) We can change / add new html attribute and its value.

Here in the above diagram, I am adding a new html attribute named background-color to the selected textbox.

I set the background-color value to Green, and press enter to see its effect. This results in the green background-color of the selected textbox (as shown in above figure).
Similarly we can add / delete / update the html attribute and its value.