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

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

HTML Forum

    
IE Developer Toolbar
Shows VERY useful information
Hester

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 11696 posted 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...

    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

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 11696 posted 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.

    pmkpmk

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 11696 posted 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!

    DanA

    10+ Year Member



     
    Msg#: 11696 posted 11:53 am on Feb 1, 2006 (gmt 0)

    Even works with ie 5.5

    Hester

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 11696 posted 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.

    henry0

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



     
    Msg#: 11696 posted 12:16 pm on Feb 1, 2006 (gmt 0)

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

    SuzyUK

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



     
    Msg#: 11696 posted 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
    Suzy

    SuzyUK

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



     
    Msg#: 11696 posted 12:17 pm on Feb 1, 2006 (gmt 0)

    henry0, no install problems here..

    henry0

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



     
    Msg#: 11696 posted 12:22 pm on Feb 1, 2006 (gmt 0)

    on my way :)

    Hester

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 11696 posted 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!

    keyplyr

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



     
    Msg#: 11696 posted 6:12 pm on Feb 1, 2006 (gmt 0)

    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

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



     
    Msg#: 11696 posted 6:45 pm on Feb 1, 2006 (gmt 0)

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

    Instead I will try it on a spare!

    SilverLining

    5+ Year Member



     
    Msg#: 11696 posted 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