Internet Explorer Developer Toolbar
page 4 of 7
by Satheesh Babu
Average Rating: 
Views (Total / Last 10 Days): 34635/ 104

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.

View Entire Article

User Comments

Title: Reality check   
Name: Ruana
Date: 2010-12-01 9:44:12 AM
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

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
... 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
Firebug is extremely professional and feature rich. Meanwhile Internet Explorer Developer Toolbar is proved to be designed for newbie and somewhat useless
Title: RE: Debugging web design   
Name: Satheesh
Date: 2008-06-19 4:12:24 AM
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
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.

Title: Debugging web design   
Name: Dave Parslow
Date: 2008-06-17 2:51:36 PM
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
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-2021  |  Page Processed at 2021-12-04 5:03:33 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search