Welcome to WebmasterWorld Guest from 54.167.76.176

Forum Moderators: incrediBILL

Message Too Old, No Replies

IE Developer Toolbar

Shows VERY useful information

     

Hester

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

WebmasterWorld Senior Member 10+ Year Member



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]

  • Robin_reala

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

    WebmasterWorld Senior Member 10+ Year Member



    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.

    pmkpmk

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

    WebmasterWorld Senior Member 10+ Year Member



    It works with IE6 too, not just IE7.

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

    DanA

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

    10+ Year Member



    Even works with ie 5.5

    Hester

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

    WebmasterWorld Senior Member 10+ Year Member



    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.

    henry0

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

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



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

    SuzyUK

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

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



    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

    SuzyUK

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

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



    henry0, no install problems here..

    henry0

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

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



    on my way :)

    Hester

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

    WebmasterWorld Senior Member 10+ Year Member



    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!

    keyplyr

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

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



    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.

    henry0

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

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



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

    Instead I will try it on a spare!

    SilverLining

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

    10+ Year Member



    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.
     

    Featured Threads

    Hot Threads This Week

    Hot Threads This Month