Welcome to WebmasterWorld Guest from 54.144.107.83

Forum Moderators: incrediBILL

Message Too Old, No Replies

IE Developer Toolbar

Shows VERY useful information

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 5, 2002
posts:1318
votes: 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...

    hasLayout!

    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)

    Senior Member

    WebmasterWorld Senior Member 10+ Year Member

    joined:June 26, 2004
    posts:1497
    votes: 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)

    Senior Member

    WebmasterWorld Senior Member 10+ Year Member

    joined:Sept 11, 2002
    posts:2024
    votes: 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)

    Preferred Member

    10+ Year Member

    joined:Nov 29, 2003
    posts:351
    votes: 0


    Even works with ie 5.5
    11:56 am on Feb 1, 2006 (gmt 0)

    Senior Member

    WebmasterWorld Senior Member 10+ Year Member

    joined:Dec 5, 2002
    posts:1318
    votes: 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)

    Senior Member from US 

    WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    joined:Apr 19, 2003
    posts:4388
    votes: 2


    Before giving it a try
    Anyone had install problem or settings messed up?
    thanks
    12:16 pm on Feb 1, 2006 (gmt 0)

    Senior Member

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    joined:Oct 1, 2002
    posts:5199
    votes: 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
    Suzy

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

    Senior Member

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    joined:Oct 1, 2002
    posts:5199
    votes: 0


    henry0, no install problems here..
    12:22 pm on Feb 1, 2006 (gmt 0)

    Senior Member from US 

    WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    joined:Apr 19, 2003
    posts:4388
    votes: 2


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

    Senior Member

    WebmasterWorld Senior Member 10+ Year Member

    joined:Dec 5, 2002
    posts:1318
    votes: 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)

    Senior Member from US 

    WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

    joined:Sept 26, 2001
    posts:5801
    votes: 64


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

    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)

    Senior Member from US 

    WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    joined:Apr 19, 2003
    posts:4388
    votes: 2


    Thanks,
    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)

    Full Member

    10+ Year Member

    joined:July 27, 2005
    posts:329
    votes: 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.