Developer Toolbar Refresh


As some of you noticed the developer toolbar ceased to function in the refresh preview build of IE7 made available earlier this week. We made some changes that affected the dev toolbar so we shipped a newer version to line up with the new build of IE7. A refresh of beta 2 of the developer toolbar is now available that will function in the latest available builds of IE7 as well as IE6.

As always we really appreciate all feedback on the developer toolbar. This tool for web developers is currently at beta 2 as we fix the final bugs before releasing version 1. We’ve got a few ideas on what we should add in version 2. What would you like to see?

Thanks

 – Dave

Comments (54)

  1. Anonymous says:

    Great, tools like these make the life of a developer a lot better!! Can’t wait for the final version 🙂

  2. Anonymous says:

    Looks like they came out just as I needed them today! 🙂

    I also had to go into ‘Manage Add-ons…’ and approve ‘Developer Toolbar’ and ‘IE DOM Explorer’, was this by design or possibly just something on machine?

  3. Anonymous says:

    Any chance of releasing the toolbar source code once finalised for IE7 so anyone has the opportunity of adding there own features, using the exiting code as inspiration??

  4. Anonymous says:

    Due to the Internet Explorer 7 Beta Refresh, released earlier this week the Internet Explorer Developer…

  5. Anonymous says:

    I somehow can’t get it to work. After installation the option appears in View -> Toolbars but when i activate the toolbar by clicking on it nothing happens.

    IE version 6.0.2900.2180.xpsp_sp2_gdr.050301-1519

  6. Anonymous says:

    It’s somewhat of a nitpick, but I would suggest some minor UI updates.  For instance, most of the toolbar buttons (e.g. "Disable") display a drop-down menu.  However, as all toolbar buttons are purely plain text, the toolbar as a whole has the appearance of a standard menu bar.  This implies certain behaviors other than what one would expect out of a toolbar.

    To clarify which buttons bring up drop-down menus, I would suggest inserting those upside-down triangles to the right of each button’s text and perhaps removing the “DevToolBar” label (I keep thinking it’s clickable!!)  This would more clearly label the widgets as toolbar buttons.

    Alternatively, the toolbar could be given more menu-like behaviors.  For instance, if I open the “Disable” drop-down and then mouse over “View”, “Disable” should close and the “View” drop-down should open.

    The second suggestion would be to make some dialogs pinnable somehow, like the ruler box or color picker.  I’m not sure that would necessarily be possible for smaller dialogs, but it’s something to consider.

    Lastly, I am noticing a bug with outlining DOM elements.  It seems as though for larger elements such as big DIVs or tables, the outlining does not fully surround the element.

    Overall, the toolbar is a wonderful tool for developers.  While it could use a bit of polish, it has already become a near necessity for us, both for static web designers and web application programmers.  The web certainly is a very different animal than traditional fat clients (where you KNOW that your layout will always look the same!!)  This toolbar goes a long way towards simplifying web UI design.  Keep up the good work on both IE 7 and the toolbar!

  7. Anonymous says:

    The developer toolbar is certainly a big help when debugging and building websites.  There are two things that seem lacking to me:

    – A way a viewing the rendered source.  This can be particularly useful when using lots of JavaScript to update the page at runtime

    – Built-in JavaScript debugging and AJAX logging, as seen in the Firefox extension Firebug

    Both of these capabilities are incredibly helpful when building complicated web applications, and without them, developers will be more comfortable developing in Firefox and complaining later on if it doesn’t work in IE.  

  8. Anonymous says:

    > We’ve got a few ideas on what we should add in version 2. What would you like to see?

    Just keep on ripping DOM Inspector / Web Developer Extension features off. 😉

    You may also take a look at FireBug. It’s pretty useful … https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=1843

  9. Anonymous says:

    thx

    It’s grear if there has some buttons like "view all scripts", "view all style sheets", "view all images" under "misc" menu. lol

  10. Anonymous says:

    Good tools for web developer, thank you!

  11. Anonymous says:

    If I have a menu open, I should be able to hover over another menu item and have that one open. But I have to double click.

    Is this temporary? I think it should work like the classic menu in IE7.

    Also, it looks kind of boring…any chance of having some icons like in the firefox developer toolbar? I like that toolbar, but I don’t like firefox. I’d like something (exactly) like that in IE.

  12. Anonymous says:

    After I click "Show Ruler," it would be nice if the text changed to "Hide Ruler" because that’s what it does.

    Or, you could use a checkbox.

  13. Anonymous says:

    An option to display the CSS margin/border/padding of an element would be really great. Like Macrobe Dreamweaver 8 do, for instance.

    (This would be very useful to identify which element should be given layout, when strange things happen 😉 ).

  14. Anonymous says:

    For the next version I’d like:

    1) A way to live edit CSS

    2) Viewing rendered source (after JS/DOM updates to the outputted markup)

    3) DOM logging like the Firefox extension Firebug

    Thanks for listening.

  15. Anonymous says:

    It would be really great if you could provide us with a change log documenting the changes made to the IE platform. This would help other toolbar/plug-in developers to make their applications compatible with IE7.

    I am now quite curious what particular change caused the dev toolbar ceasing to function.

    Sharing that kind of information would help us, developers, a lot and would save us hours of testing.

    Thanks

    Viktor

  16. Anonymous says:

    1. Color Picker MUST show hexadecimal color numbers, such as ff0000, a0a0a0 and so on. Or it should’n be there at all; without hex numbers it’s only useless exasperation.

    2. Disabling images sometimes doesn’t work, especially for some images embedded through CSS.

  17. Anonymous says:

    > Color Picker MUST show hexadecimal color numbers, such as ff0000, a0a0a0 and so on. Or it should’n be there at all; without hex numbers it’s only useless exasperation.

    There’s rgb(), so you can use these numbers directly.

    Besides, it would be great if IE supported rgba().

    Just dreaming …

  18. Anonymous says:

    Ah, and if you click "copy and close", the Color Picker generates hex values anyway.

  19. Anonymous says:

    Something to indicate whether IE is employing quirks or standards mode for the current page rendering.

  20. Anonymous says:

    The last time I installed this toolbar you had to reboot the whole OS *bangs head on wall* – surely that was a mistake – is this still the case?

  21. Anonymous says:

    "The last time I installed this toolbar you had to reboot the whole OS *bangs head on wall* – surely that was a mistake – is this still the case?"

    I didnt have to reboot when I uninstalled the old Dev Toolbar or when I installed the new one so you should be safe.

  22. Anonymous says:

    It would be nice to be able to copy node properties in DOM viewer. Plus, you seem to not be using the right-click menu at all. Add more functions to it. 😉

  23. Anonymous says:

    well, it would be nice if the dom explorer actually worked. when i press "View Dom" absolutely nothing happens. any ideas what might be causing this?

    WM_QUERY

    thomas woelfer

  24. Anonymous says:

    hmmm, some ideas for the final version? a few thoughts off the top of my head:

    – maybe just add an IE DEV icon next to the orange RSS icon, allowing you to click and access it’s options from a dropdown menu for the page you’re viewing… keeping it simple and sweet.

    – think the QuickTabs approach is slick, so maybe you can take advantage of it and use the same idea towards the IE Dev options… create a page to display with the options listed, javascript debugger/logging, CSS preview and outlines, etc… could pipe that back into QuickTabs (right-click on a thumbnail of a webpage in QT, and jump into dev-mode or something)

    still wish i had more space for the tabs… only feel like i can have a handful open, and find myself maximize’n the browser cuz of it… also be nice if i could move the tab order around and save those tabs as a group to fire up at startup.

    /random_thoughts_off

  25. Anonymous says:

    [OT]

    just went to send a hallmark e-card, and noticed that under IE7 the whole page seems to flicker when i mouse over the images.

    http://www.hallmark.com/webapp/wcs/stores/servlet/category2|10001|10051|-102001|-2;-102001|products|E-Cards

  26. Anonymous says:

    1. A JavaScript console that lets me execute live JavaScript. If it had IntelliSense support then all the better.

    2. A CSS console that let me type/apply live CSS

    3. A css inheritance display similar to what the Accessability Toolbar used to have. Let me click on an object and pop-up a window that tells me every CSS attribute and tell me from whence it got that attribute. If it was specified as a style directive locally, as a class, as an inherited class, as a inherited inherited class, etc.

  27. lexhat says:

    [question about toolbars in general]

    Can the IE team address the ‘missing or swapped toolbar’ issue?

    According to <a href=’http://support.microsoft.com/default.aspx?scid=kb;en-us;555130‘>MSDN 555130</a> this is specific to XP… and I’ve reproduced swapped toolbars in IE 7.0.5335.5 on XP Pro SP2.  Since the only fix is to delete HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerToolbarWebBrowserITBarLayout (ITBar7Layout for IE7) it’s quite difficult to manage in an enterprise environment.  Thanks.

  28. kproth says:

    > …to be able to copy node properties in DOM viewer

    Second the motion. Especially innerHtml for me.

  29. Anonymous says:

    Another vote for live CSS editing.

  30. Anonymous says:

    Even if I don’t like IE 7, I really appreciate IE dev toolbar.

    Thank you Microsoft for making it easier for web developers to write workarounds for IE 6 and IE 7.

  31. Anonymous says:

    Dreamweaver 8 has an interesting functionality that I think could be expanded upon.  Basically you can select any element and it will tell you something like "color: #336699, set by rule #nav A.blue_link"

  32. Anonymous says:

    Here, use the new developer toolbar to fix <a href="http://www.alistapart.com/d/horizdropdowns/littlebetter.htm">this</a&gt; bug while your at it.

    I’ll give you a hint… it’s been a bug since the beginning.

  33. Anonymous says:

    "3. A css inheritance display similar to what the Accessability Toolbar used to have. Let me click on an object and pop-up a window that tells me every CSS attribute and tell me from whence it got that attribute. If it was specified as a style directiv"

    +1

    This would make it great realy usable and maybe live css too?

  34. Anonymous says:

    The IE team released the Internet Explorer 7 Beta 2 Preview build to coincide with the MIX06 conference….

  35. Anonymous says:

    It would be great if you could view Session cookies —  thanks.

  36. Anonymous says:

    Ben: For what it’s worth, to view the active session cookies, you can just type

    javascript: alert(document.cookie);

    in the IE addressbar.  Hit CTRL+C to copy.

  37. Anonymous says:

    Thanks Eric … I wasn’t aware of that.  However for some reason that snippet of JavaScript doesn’t seem to show all cookies.

    I have an ASP.NET website that uses a session cookie and a persistent cookie.  [javascript: alert(document.cookie);] showed the persistent cookie, but did not show the session cookie.  Possibly that JavaScript snippet only shows the first cookie?  Both cookies are saved under the same domain name.

    In Firefox, I can see both cookies under Tools | Options | Privacy | Cookies | View Cookies … so I know the session cookie exists for sure.

    For this reason, it would be very helpful if the IE developer toolbar also showed session cookies.

    Thx again – Ben

  38. Anonymous says:

    > Possibly that JavaScript snippet only shows the first cookie?

    No.

  39. Anonymous says:

    For the next version, I’d like to see an option to view the rendered source chart, similar to this FireFox extension:

    http://jennifermadden.com/scripts/ViewRenderedSource.html

  40. Anonymous says:

    It appears that IE 6.0 simply doesn’t show session cookies with the javascript:alert(document.cookie); command.  Another site I went to which uses only a single session cookie didn’t show anything in IE when using the above JavaScript command.  Firefox does, however, show all cookies (persisted and session) with the same JavaScript.

    Regards, Ben

  41. Anonymous says:

    I’d like to see a feature that lets you monitor IE memory for a url to see if your javascript-based app is leaking memory.

  42. Anonymous says:

    Http Headers would be nice.

    Page File Size … would be nice to know how big the entire page is (add up the image file sizes, css , scripts, html, etc…)

    Thank you for making this… i’ve missed the old IE 5.5 developer toolbar.

    Allowing developers to add their own plugins would be nice as well.

    CSS editing would be amazing!

  43. Anonymous says:

    I build applications that make extensive use of modal dialog boxes (no toolbars). Last time I installed the devtoolbar, I loved it, but couldn’t use in on most of my pages.

    It would be nice if there were an icon in the title bar (or an option in the system menu off the application icon in the title bar) that would give me access to the features of the devtoolbar.

  44. Anonymous says:

    Is it just me, or does Shift+R launch the Ruler box for everyone?  If this happens to others, it is DEFINITELY something that must be fixed!  Just in typing this comment alone, I had to close the Ruler box THREE (now 4 with that word) times to complete the comment! This "feature" alone causes me to close the toolbar unless I specifically need to use it.

  45. Dave Massy says:

    Celina,

    Shift+R should no longer launch the ruler. the correct combination for the ruler shoudl be Ctrl+Shift+R.

    Can you check you have the latest build 1517 installed by looking at the about box from the Misc menu? If not then please uninstall adn install the latest version from http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

    Thanks

    -Dave

  46. Anonymous says:

    There are some DOM attributes that are equivalent but where one or another is the "standard" or "recommended" one to use. (This is from memory, but I think that nodeName and tagName are examples of this, and maybe some of the offsetX-, clientX-type attributes.) I think one use of the DOM viewer by developers will be to look up "what’s the name of that attribute I want to check/change?" (I’m not ashamed to admit I’ve used it that way.) It might be a good idea, when the use of one attribute vs. another is considered a best practice, to color-code them differently or in some way indicate to developers which are the preferred ones to frob and which are just present for backwards compatibility.

  47. Anonymous says:

    Hi,

    I would really like to see a feature which would outline the padding and margin of an element separately. It would make css debugging so much easier.. Does anybody know of any other tools capable of this?

    Regards,

    Tuk

  48. Anonymous says:

    As someone else mentioned, make it act like a real menu when hovering and stuff.  And I’ve never seen a menu bar in an MS product that 1) has a text label for the menu bar (that looks like all the other menue items) or 2) has a button that looks just like a menu item.

    Better would be a toolbar button with a dropdown menu containing all these items.  (Of course it would probably get installed in the least convenient place imaginable and not be relocatable!)

  49. aine says:

    Keyboard Shortcuts!

    More Keyboard Shortcuts!

    With the Firefox Web Developer toolbar, I can do a quick "control+shift+A" to validate my HTML against validator.w3.org.  With the IE toolbar, I have to click through menus.

    I am validating local HTML because I am behind a firewall/proxy.

    Customization options such the ability to "elevate" or "promote" any command so that it appears directly on the toolbar itself — for those actions that you perform all the time.

    And a little dressing up so that it looks as good as Mr Pederick’s toolbar ;-).

  50. aine says:

    A way for the toolbar to auto-update itself, when new versions are released.  Or at least a "check for updates" option under "Misc".

    This is easy in Firefox, of course.  With this IE toolbar, I find myself having to manually check microsoft.com for updates (and then trying to remember when I last downloaded it, since the website does not show the version number).

  51. Anonymous says:

    @Greg, Kev, Richard (Re: viewing the rendered source)

    The following is probably of interest for you:

    http://billfriedrich.tripod.com/index.html?Web

  52. Anonymous says:

    We are currently locking down IE7 for shipping and I wanted to give an update on the CSS work that…

  53. Anonymous says:

       Everybody who has done any cross-browser web development is aware of the many&amp;#160;quirks of IE6,…