Internet Explorer Developer Toolbar: ASP Alliance

Print Add To Favorites Email To Friend Rate This Article
Internet Explorer Developer Toolbar

page 6 of 7

by Satheesh Babu
Feedback

Average Rating:

Views (Total / Last 10 Days): 32987/ 54

Article Contents:

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.

« (Page 5)

View Entire Article

(Page 7) »

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