homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

IE Developer Toolbar
Shows VERY useful information

 11:12 am on Feb 1, 2006 (gmt 0)

One here for experts like SuzyUK. Check out the IE Developer Toolbar! It's linked on the same page as the IE7 Beta 2 download (see separate WebmasterWorld thread [webmasterworld.com...] ). In many ways, it is a rip-off, er I mean, similar product to Firefox's outstanding Web Developer toolbar by Chris Pederick. (If you haven't seen or used that, hunt it down.) Both offer incredible features to assist the designer. For IE6+, these include:

  • DOM Explorer - works like Mozilla's DOM Inspector. Enables you to see a tree of all elements on a page. Open this up to find full information on each element or attribute.

    What I like is that this goes way beyond what you put in your web code. You can see masses of extra information that IE uses to make up the page. Including... drum roll...


    That mysterious property that can affect layouts. What I noticed is that all the elements I looked at on a typical web page had this set to -1. So I assume this means hasLayout is "off"?

    This alone could be extremely useful in tracking down layout bugs!

    The DOM Explorer also allows you to add attributes to the page. It offers a huge list of these - you can even add zoom!

    Back to the rest of the toolbar...

  • You can hover over elements to outline them

  • Find elements by tag, or class, ID or name

  • Disable cache, images, cookies, script or the popup blocker

  • Show information on the page such as class, ID, link paths, tab indexes or access keys

  • Outline table cells, tables, divs, images or any custom element. Also positioned elements of the types relative, absolute, fixed or floated.

  • Validate the page for various standards

  • Show image dimensions, file sizes, paths, ALT text, or generate a report listing all images

  • Resize the window to a variety of common sizes

  • Clear things like the cache just for the domain you're on

  • There's also a Ruler, but it doesn't work for me. Well, this is still a beta program, so omissions are to be expected. It also stopped working at one point, (nothing was being outlined), but eventually I got it to work again somehow.

    So do yourselves a favour and download this excellent tool. Firefox ain't the only player in town with such a useful tool in its box of tricks.

    It works with IE6 too, not just IE7.

    [edited by: engine at 12:31 pm (utc) on Feb. 1, 2006]
    [edit reason] added beta link [/edit]



     11:21 am on Feb 1, 2006 (gmt 0)

    It's been out for a while now, and yep, it is very useful. Personally, I prefer IE's DOM inspector to Firefox's, although the Firefox webdev toolbar beats IE's in overall use.


     11:24 am on Feb 1, 2006 (gmt 0)

    It works with IE6 too, not just IE7.

    May Angels praise your name, Hester, for this find!


     11:53 am on Feb 1, 2006 (gmt 0)

    Even works with ie 5.5


     11:56 am on Feb 1, 2006 (gmt 0)

    OK, I've done some testing with regard to hasLayout. According to the MSDN Library:

    BODY, IMG, INPUT, TABLE and TD elements always have layout.

    What I'm seeing though is that any element that has the layout property shows -1 in the DOM Explorer. If the element does not have it, then nothing is shown.

    You can test this by adding a height to a P or UL etc, then removing it.


     12:16 pm on Feb 1, 2006 (gmt 0)

    Before giving it a try
    Anyone had install problem or settings messed up?


     12:16 pm on Feb 1, 2006 (gmt 0)

    Thanks Hester.. I have been using it with IE6 and now 7,
    but thanks for the heads up on the way to check haslayout! :)

    -1 means hasLayout is true, 0 means it's false

    and if you check the box to "show default styles" it will show you the hasLayout status regardless of whether it's explicitly set or not This is proving very useful in finding the child selector override hacks that are breaking, especially on the <a> elements which need hasLayout to make the hover work on the whole link not just the text portions.. (which btw is fixed in IE7 anyway ;))
    see the css report thread later for more on this!

    Thanks for the info


     12:17 pm on Feb 1, 2006 (gmt 0)

    henry0, no install problems here..


     12:22 pm on Feb 1, 2006 (gmt 0)

    on my way :)


     4:13 pm on Feb 1, 2006 (gmt 0)

    I am getting problems with it stopping working again. It even said there were no DIVs on my page when there were! I can't outline anything right now. Tried refreshing the page and the toolbar. Anyone else experiencing this? Perhaps I was too fast in my praise!


     6:12 pm on Feb 1, 2006 (gmt 0)

    Before giving it a try
    Anyone had install problem or settings messed up?

    Nothing messed up, but the IE WebDev toolbar does not display even after restarting machine; possibly because I have the G toolbar.


     6:45 pm on Feb 1, 2006 (gmt 0)

    I think that I did well by not going for it right away

    Instead I will try it on a spare!


     7:42 pm on Feb 1, 2006 (gmt 0)

    The tabbed browsing is really cool, however if i open more than three tabs, IE always crashes. I think this is part of the Dev toolbar too, cause Im still on IE6. But I must agree, the DOM model is really helpful.

    Global Options:
     top home search open messages active posts  

    Home / Forums Index / Code, Content, and Presentation / HTML
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved