Internet Explorer Developer Toolbar
 
Published: 16 Jun 2008
Abstract
The Internet Explorer Developer Toolbar is released as a free plug-in for Internet Explorer 6.0 and above. This article discusses features and advantages in using the Internet Explorer Developer Toolbar. With this toolbar it is now possible for a developer to understand and correct the rendered HTML just as a UI designer would. It has a handful of useful features which makes it possible for even those not trained in HTML techniques to use it to its fullest.
by Satheesh Babu
Feedback
Average Rating: 
Views (Total / Last 10 Days): 36727/ 143

Introduction

The Internet Explorer Developer Toolbar is released as a free plug-in for Internet Explorer 6.0 and above. With this toolbar it is now possible for a developer to understand and correct the rendered HTML as good as a UI designer. It has a handful of useful feature which makes it possible for a developer. It is very simple to use and easy to install. Download the toolbar from the link found at the end of this article and install it. Moving forward, this article will help you to understand some of the very useful features that the toolbar offers to developers.

Using Internet Explorer Toolbar

Once we install the toolbar we need to restart the IE to enable the toolbar.

Internet Explorer Developer Toolbar can be opened by clicking the arrow icon in Internet Explorer toolbar. Figure 1 shows the toolbar shortcut found in IE.

Figure 1 - Toolbar Shortcut

 

The Internet Explorer toolbar will open at the bottom of the window similar to the below figure.

Figure 2 - Toolbar

 

In the coming sections we will see how this toolbar can be used to understand and correct the rendered html.

 

Note: I have used my site www.codedigest.com to understand the usage of this toolbar.

 

View HTML DOM structure

The rendered HTML structure can be viewed using IE developer toolbar in an understandable way and by default, like a tree view on the left pane. Also, we can view attributes and styles which will be populated on the right pane of the toolbar once we select any element in the HTML DOM structure’s treeview. Figure 3 - HTML DOM Structure will show a sample DOM structure with attributes and styles populated.

Figure 3 - HTML DOM Structure

 

Selecting an Element of the Page to view the Properties

In the last section, we understood how to see the properties and styles by selecting elements from the HTML DOM structure’s treeview. If the page is very lengthy then selecting an element from DOM treeview will be very complicated to see its details. It will be very easy if we select the actual element from the IE window and in turn get the properties and styles populated in the right pane of the toolbar window.

This can be done by selecting Find > Select Element by Click option from the IE developer toolbar window. Refer below to Figure 4 for better understanding.

Figure 4 - Selecting an Element

 

 For example, if we want to make out the properties and style attributes of an IMG element which is on the middle of the page then we need to select the above option and click the required element from the IE window. This will populate the styles and properties of the element on the toolbar window similar to the figure below.

Figure 5 - Toolbar property Population

In figure 5, I have selected the article image button which in turn populated the attributes and styles of the image button shown in the toolbar window. Also, the treeview will automatically reflect the selection in the HTML DOM structure.

Adding and Deleting Attributes to an Element

This is one of the very useful features of the IE developer toolbar which many developers will love. With this feature a developer can add or remove attributes to an HTML element that is rendered in IE without changing the actual HTML of the page in the server with a preview.

How to do this?

Select the element you need to change or add some attributes like we did in the last section. Click the green “+” button on the Attribute pane of the IE toolbar and select a new style or attribute from dropdown to specify a value. Refer the Figure 6 for selecting new property.

Figure 6 - New Property

Consider, if we want to increase the width of an image and have a preview. To do this, select the image element and reach the toolbar window then select the width property, enter a new value, and press enter to have a preview. Refer to Figure 7 where I have added width as 200px for the article image button with a preview. If the value entered matches our requirement then we can replicate the same in the HTML page on the server. Thus we can reduce the time taken for adjusting the element every time on the server and have a preview until we get the correct HTML output.

Figure 7 - Applying New Property

Note

Checking “Show Read-Only Properties” will show all the read only properties of the element which we can’t adjust to a new value. In the same way “Show Default Style Values” will show the default style value for the HTML element.

 

Also, we can use the “Find Element” option in the “Find” menu to select the elements rendered in the page. Using this menu we can find the HTML markups based on Element, Class, ID and Name of the element.

 

Other Useful Utilities on IE Developer Toolbar

There are some useful utilities that can be found on the Tools menu of Internet Explorer toolbar. In the coming sections we will see some of the utilities and their usages.

Resolution Changer

This utility is used for resizing the IE window for different resolutions to customize the HTML design for best fit. We can resize the IE window for some fixed screen resolution like 800x600, 1024x768, 1280x768 and etc. Also, we can resize the window to any custom resolutions. This feature will prevent us from changing the actual screen resolution to check the HTML design's best fit for all resolutions.

Color Picker

This utility will help us to the get a color code by moving the mouse over any of the colors found on the HTML page. Refer below to figure 8 to see the Color Picker.

Figure 8 - Color Picker

 

Ruler

There is a ruler utility which will help us to measure the exact length of the elements. Refer to Figure 9 which shows the ruler measurement for the Search box on the rendered HTML page.

Figure 9 - Ruler

 

Once the color picker is enabled when we hit Ctrl+M key it will bring the magnifier (Figure 8).

Figure 8 - Magnifier

 

Other useful things that can be done through IE developer toolbar

·         We can disable scripts, Popups, and CSS associated with our page through the Disable menu. Also we can disable the image that is rendered on the page through image menu.

·         The View menu gives us the options for viewing CSS class, element ID’s, links, etc. This menu also gives an option to view the HTML source of the DOM rendered in the page. “CSS Selector Matches” option on this menu will gives us the report of number of matches a particular CSS class is used in the html page.

·         The outline menu gives us graphical outline of the html page elements like table, table cells, div tags, image, etc.

·         The image menu has the options to view ALT texts, size, dimensions and path of the image element.

·         The other useful feature that the toolbar offer us is disabling or clearing cookies, sessions etc. The option “Always Refresh from server” make the page to always refresh page from the server instead of using any temporary cache.

·         We have a validation menu through which we can validate our HTML, RSS, and CSS, etc.

Download & Conclusion

Download Toolbar

 

Conclusion

With this cool toolbar, a developer can become a much better web designer. Thanks to Microsoft for providing such a useful toolbar. Visit the link given in the download section of this article and see it in action.



User Comments

Title: Reality check   
Name: Ruana
Date: 2010-12-01 9:44:12 AM
Comment:
True, Firebug beats the IE Developer Toolbar. Also true that the Developer Toolbar for FF is better, provides more information, is more sophisticated, more ... than IE's. However, any Webdesigner who designs for clients and not just for himself/herself - that is for fun - is grateful that the IEDT exists. In Austria (my country) the vast majority of around 80% of all surfers use IE and probably a third of them hasn't even heard of Firefox - yet. So to all the backbiters out there: give it a break.
Title: Give it a rest   
Name: Shanimal
Date: 2008-06-26 2:14:35 PM
Comment:
Satheesh,

I appreciate that someone is trying to spread the word about IE Developer Toolbar. Anyone who says its worthless etc probably thinks its ok to use FF exclusively for their testing and development. They either don't have real customers or they need their heads examined. Unfortunately, there are a handful of people in the world (mostly nerds like us) who use FireFox and then there is a vast population of people in the world who use IE6 and IE7.

Anyone (NOOB or not) who faces real customers and real IE issues needs this tool.

Thanks for the article. As for the members of the FF street team, give it a rest.
Title: why would "those not trained in HTML techniques" ...   
Name: kevkov
Date: 2008-06-20 5:09:48 PM
Comment:
... ever consider installing the toolbar and what would they do with it. It is lame and usually the last resort only to be employed when fighting the disease that is IE6. It is very old news and really not worth the author's effort.
Title: Internet Explorer Developer Toolbar is a joke   
Name: pcdinh
Date: 2008-06-20 2:51:35 AM
Comment:
Firebug is extremely professional and feature rich. Meanwhile Internet Explorer Developer Toolbar is proved to be designed for newbie and somewhat useless

http://savethedevelopers.org/
Title: RE: Debugging web design   
Name: Satheesh
Date: 2008-06-19 4:12:24 AM
Comment:
@Dave,
I accept the fact the Firebug is a better utillity to debug web deisgn. Also, i would like to highlight whatever Nishant has pointed out here is true!
Title: Good article   
Name: Nishanth Nair
Date: 2008-06-18 1:13:17 AM
Comment:
There are lot of web apps where only IE is supported. For those sites where you cant use Firebug, this si a handy tool. Lot of developers dotn even know such a tool exists. A good intro for newbies in to UI development.

Nishanth
Title: Debugging web design   
Name: Dave Parslow
Date: 2008-06-17 2:51:36 PM
Comment:
If debugging web design or cross browser compatibility is your goal then you should really be using Firebug in Firefox. In fact, because of the "gold standard" status that Firebug was obtained, it is a really a shame that the article makes no reference to it. The main use of the developer toolbar for me is when you are on the phase of developing an IE specific stylesheet to correct IE specific web design issues. Also, you may want to check out the IE8 beta's version of the "development toolbar" which has features that come close to Firebugs features and ease of use.
Title: Mr   
Name: Scott
Date: 2008-06-17 3:33:05 AM
Comment:
The developer toolbar still is poor compared to it's firebug equivilent. Turning specific css selectors on and off to see effects and adding new ones is so much simpler than having to add them in the middle on the IE toolbar.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-02-20 2:47:08 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search