IE Developer Toolbar Beta 2


Beta 2 of the developer toolbar is now available. Beta 2 includes numerous fixes to improve stability, usability and performance along with a couple of additional features such as the ability to enable and disable CSS on the page.

The developer toolbar has become an essential tool for us in diagnosing issues with web pages. Being able to click on an element in the page and find out where it is in the element hierarchy is just one of the invaluable facilities it provides.

Let us know if you have any feedback either here or at the Wiki on Channel 9 about the toolbar. We’d certainly like to hear of issues and suggestions for further improvements.

We did hear one report that the previous preview of the developer toolbar did not work with the recently released preview of beta 2 of IE7. However we have been unable to reproduce the issue. Do let us know if you have any issues with either IE6 or the IE7 preview so that we can thoroughly investigate them for final release.

Thanks

 – Dave

Comments (71)

  1. Rn says:

    Thanks for updating this, now a few requests:

    1. When clicking on View DOM, the DOM window opens up on the bottom, but clicking on the button again doesn’t do anything. It should be possible to hide the DOM by clicking on the button a second time. Especially considering it’s the first option in the menu and there’s no indication whether it’s a menu item or a single button.

    2. In the Mozilla Developer Toolbar, when you select a menu, you can mouse over the other menus and they will always drop down, in IE you have to close each menu before opening the next one. Will this be changed?

    3. "Show Ruler" has no indication of being a button or menu either.

    4. Another large problem is the massive space on the right hand side of the toolbar, I have no choice but to have the toolbar on a separate line. In Firefox I have all my options beside the file menu, and only the options I want are displayed.

    I will test it as I go, thanks for the update.

  2. Michael says:

    When opening a new window or tab, the menu items on the toolbar are hidden until something is done to force a complete re-draw of it – that is, either move the toolbar to a different line, or hide and re-display it. (Moving it side-to-side isn’t enough.)

    Additionally, it would be nice if this included a way to see HTTP headers – the plugin I used for IE6, ieHTTPHeaders, is partially incompatible with IE7 – it can only shown what’s being sent, not what’s being received.

  3. DMassy says:

    Great feedback. Thanks.

    Michael, For examining HTTP traffic we recommend Fiddler at http://www.fiddlertool.com/  It is written by Eric Lawrence one of the IE Program Managers and a frequent poster on the team blog.

    There are also articles at

    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwebgen/html/ie_introfiddler.asp and http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/IE_Fiddler2.asp

    covering some of the things you can do with Fiddler.

    Thanks

    -Dave

  4. EricLaw [MSFT] says:

    <<the plugin I used for IE6, ieHTTPHeaders, is partially incompatible with IE7 – it can only shown what’s being sent, not what’s being received.>>

    This will likely be fixed shortly.  

    In the interim, you might try Microsoft Fiddler (http://www.fiddlertool.com) as offers a pretty comprehensive feature set and it is compatible with any IE version.

  5. Michael says:

    Not a bad tool, but it seems like quite a bit more than I need – all I really want is to make sure the server output is as I expect it to be, and for that purpose, an actual debugger seems like overkill.

    That said, I’ll certainly keep Fiddler in mind for future use, it seems very useful.

  6. straight_up says:

    If anyone was wondering, the download page says MSIE6 or greater is required for this.  (So Internet Explorer 6 *or* 7 should work.)

  7. PatriotB says:

    "In the Mozilla Developer Toolbar, when you select a menu, you can mouse over the other menus and they will always drop down, in IE you have to close each menu before opening the next one. Will this be changed?"

    The IE dev toolbar’s menus aren’t menus, they’re toolbar buttons, so it makes sense that they behave like toolbar buttons and not menus.

    That said, the main IE menu bar technically isn’t a menu either, it’s a specialized toolbar, so it would certainly be possible for the IE dev toolbar to be made menu-like as well.

  8. IE Developer Toolbar Beta 2 が出たというので、早速イ…

  9. Zene says:

    IE Dev Toolbar Beta2

  10. 大头牛 says:

    IE Dev Toolbar Beta2,中文版来了没?

  11. Bryan Fennell says:

    I’m running the IE7 beta 2 preview and I installed the toolbar, but it’s nowhere to be found. According to the installation, there weren’t any errors, but I can’t see it in IE itself. I tried right-clicking the toolbar area, but it isn’t available as an option. Is there something I should be doing to enable it or is this a bug? I’ve tried repairing the installation and uninstalling and reinstalling and neither have done anything. According to the Manage Add-ons dialog, the toolbar is installed. Also, if it’s relavent, I’m also testing the Windows OneCare Live beta.

  12. EricLaw [MSFT] says:

    @Bryan Fennell:

    Did you check under the Explorer Bars (or Toolbars) menu on the View menu inside IE?  (Hit Alt+V to show the menu).

  13. Ingo Chao says:

    – How do I access pseudo-class and pseudo-element rules?

    – And how do I set pseudo-classes?

    – A small indicator if we are in quirks mode or standards mode would be nice.

    Request on usability:

    – While debugging pages, I often switch from Fx to IE, using both the FxDomInspector and the IE DevToolbar, this requires switching from CSS notation "margin-left" to your notation "marginLeft". I’d sugggest implementing some auto-correction for the correct CSS notation, if entered.

  14. Kellan says:

    "1. When clicking on View DOM, the DOM window opens up on the bottom, but clicking on the button again doesn’t do anything. It should be possible to hide the DOM by clicking on the button a second time. Especially considering it’s the first option in the menu and there’s no indication whether it’s a menu item or a single button."

    This works, in IE7b2.

    I would suggest creating some icons and making it look nice, like the firefox toolbar. It’s kind of dull right now. Other than that, it has about every function I would ever use. Nice work.

  15. Trackback from dotnetkicks.com

  16. Bill says:

    Great Work. Some suggestions: I like using shorthand #cdc type values if possible. It would be nice if the color picker also showed the # value as well as RGB. To view CSS and Javascript would be very useful. Viewing CSS for a selected area! Even better. The toolbar would be better as icons with tooltips. The menu does not popup and close in an easy manner. Get rid of the DevToolBar title it wastes space.

  17. alexander says:

    Although the DOM-tres gives roughly the same information, it would be nice with a rendered/generated source feature. (just like view source, except it should be the live sourcecode (eg. document.write(<node>), then that node should be visible).

  18. Ed P says:

    Am i missing something here or is the xhtml validator missing? Or is it just not there?

    Maybe a future item would be to be able to add your own validator websites. I was kinda bummed that it goes to w3c’s website instead of it haveing it’s own little site checker app  that might has shown better in a site, visually, where the errors are.

    Just some ranting thoughts… other than that not bad.

  19. Lionel Fourquaux says:

    Using your download link, I end up with an installer file signed on 28th october 2005, which installs version 1.00.1017.0 of the toolbar, and I can’t find how to disable CSS on a page.

    It looks like I downloaded an old version of the toolbar instead of the one announced here. Can you check your link?

    Thanks.

  20. Lionel Fourquaux says:

    It looks like I got the new version this time.

    I don’t know what happened, except that I used Fiddler to check whether I was redirected to some older page.

    Sorry for the noise.

    (Note to the moderators: feel free to delete these two comments).

  21. Einar says:

    I think the toolbar needs some javascript "debugger". I know I can use visual studio or the javascript debugger to debug javascript, but I would like to see somethink like the javascript console in the IE Dev. Toolbar.

    It would be very useful to get a list of script errors (with line numbers), and even get a list of javascript blocks on the page and be able to open each script block in notepad (or a custom editor).

  22. dwacon says:

    Hopefully the bug is fixed that causes appearance of the toolbar to "attach" to the Adobe toolbar — where they swap identities and I can’t display one without the other appearing or vice versa.

  23. twhid says:

    With XP SP2 MCE and IE6 I get a browser crash when I attempt ‘show class and id information’ or when I attempt ‘show image dimensions’ at this URL http://www.tvtonic.com

  24. The Hater says:

    Einer:

    A JavaScript debugger would make a lot more sense as a whole different tool. For Firefox (for example) I have the standard JavaScript console, Firebug (console+) and Venkman (debugger). JavaScript simply has too much going on for a single toolbar to effectively (and conveniently) try to cover everything along with the current functionality.

    Developer toolbars for me exist pretty much only for markup development – I use different tools for CSS debugging/analysis as well.

    My only nit so far with the beta 1 (haven’t installed the second just yet, not at a Windows box): it constantly asks me if I really want to empty the cache. Can someone point me to the pref where I can turn that off? Please? Hoping I just missed it somewhere…

    I have other feature requests, etc. but until you replicate the Web Developer Toolbar for Firefox in the IE toolbar, you have your todo list pretty much right there for you.

    Cheers and keep it coming.

  25. Funny reading the EULA on that one says:

    From the EULA on the Toolbar Beta 2:

    " You may not: work around any technical limitations in the software;"

    HaHaHa… Isn’t the whole toolbar, designed to work around limitations in the software?!

    E.g. For those testing in IE6, now have the ability to inspect pages like they have been able to for years in Mozilla.  Hmm, and why might you want to inspect under the covers in IE? $5 says it has something to do with "Working around the limitations in the (IE) software"!

    Otherwise I can’t complain, I would gladly take this toolbar, over no toolbar.  Glad to see that for once "Developers, Developers, Developers" actually rings true. 😉

  26. Will says:

    Clear cache clears both cache and cookies. 🙁

    Should then be called clear cache and cookies. That or make it only clear cache not both. Glad I backed up my cookies yesterday.

  27. Will says:

    Also I would like to see a hide images option. That is so no red boxes show up. 🙂

    Also disable images should be moved under images.

  28. Constantine says:

    Beta2 does outline elements with 2px borders, while Beta 1 used 1px ones. This is very annoying and i hope it will be fixed in final release.

    Color picker is very nice, but unfortunately it doesnt show hexadecimal color values.

    I hope you will make picker, ruler and magnify in the same "consistent" fashion in final release. And i also hope they will be able to use together with each other.

  29. Steve C. says:

    Uhm, good updates.

    1.) The Ruler is *painfully* slow in my opinion, but ok, as I rarely use it.

    2.) The Colour picker:

     a.) Can it report back a HEX value?

    e.g. #ffcc99

     b.) WT_?! Where is the "Copy" option?  Most times that I use a color picker, I want to "snag" the color, to "Paste" into a page (PHP,JSP,ASP,HTML,XSL,CSS,etc.)

    3.) I agree with all the posts about buttons versus menus.  They should not be buttons, and any "menu item" that opens a menu, should have a drop arrow, or something to visually indicate so.

    4.) Still missing a JavaScript Console, and NO, I don’t want to run Visual Studio to debug my JavaScript in PHP!

    5.) In the DOM Tree view, can you PLEASE properly wrap attributes in quotes? e.g. <div id="foo"> instead of <div id=foo>

    6.) In the DOM Tree view, can you PLEASE use lowercase tags, or alternatively, the case actually used in the document? (cough XHTML folks!)

    7.) Certain node attributes will not maintain a value specified after adding it. (cough EVERY GOSH DARN ONE OF THEM!)

    8.) Ability to *not* scroll to the element would be appreciated. (e.g. as I filled in this comment, referencing the errors in the toolbar, the DOM view constantly changes my location.

    9.) Backspace is sometimes blocked in the document, when the DOM Tree is open.

    10.) Same as 7, but for CSS

    11.) Dev Toolbar should be able to share the horizontal space with other toolbar items (e.g. 2/3rds of my screen width is wasted)

    12.) In the Outline "menu", DIV is all upper case, but Table is not.  Div should be written as "Div".

    13.) For any node, that contains multiline / large text, you can’t read the value.  E.g. view any <script> tag… everything except the tag, is not visible!

  30. James says:

    I’m also getting the Oct 17th of the toolbar if I try to download the new one. Is this a server-replication issue based on location or something?

  31. Steve C. says:

    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

    Woah!!!  In posting my last comment, I noticed something very wacky!

    Did I miss this before, or did pressing the [ESCAPE] key, in form fields, always ERASE all you edits?

    On my WinXP 6.x with the Dev Beta 2 Toolbar (DOM view not open), if I press ESC once, it clears my current form control, and pressing it twice, resets the entire form!!!!

    As a generally non-IE surfing user, this behaviour caught me totally off guard!  Please tell me that this isn’t a "feature" of the browser????  If it is, it is time to lose it, pronto!

    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

  32. hAl says:

    Why not split the misc button items as there is space enough wasted to the right of the menu buttons ?

    And well, it could do with a bit more spicy look.

  33. ThomasELackey says:

    I also get version 1.00.1017.0 from the download site.  The file size of that MSI is 346,624 bytes, and the md5sum is de547a1fb55da6e1af962a81408ba09f.  

    Perhaps someone with the correct version of the package could post their numbers as a reference.

    (Feel free to delete this post.)

  34. Jeff Varga [MSFT] says:

    Will, could you please provide some means of contact information for me?  I would like to follow up with you about the cache issue.  Thanks!

  35. Christopher Wigginton says:

    It would be nice if the toolbar could be parked on the side, vertically. I have a widescreen format monitor.

  36. PatriotB says:

    "On my WinXP 6.x with the Dev Beta 2 Toolbar (DOM view not open), if I press ESC once, it clears my current form control, and pressing it twice, resets the entire form!!!! … Please tell me that this isn’t a "feature" of the browser????"

    Yes, this is standard browser behavior (nothing to do with the toolbar).  It’s probably been around since the first version of IE.  Most likely, IE was copying Netscape’s behavior at the time.

  37. Ron says:

    I just realised that I seem to have the first version still, what’s up with that?

    Runing: IE 7B2 Preview

    DevToolbar Version: 1.00.0912.0

    No wonder I was wrong about the DOM button.

  38. DMassy says:

    Hi Everyone,

    We’ve just become aware of an issue where beta 2 of the toolbar did not successfully reach the servers and at least for some people the previous version has still been available for download. Apologies for this we are actively working on the issue and beta 2 should be available shortly. I’ll post here again when we are sure it is there.

    Thanks

    -Dave Massy

  39. al says:

    If your document is a .xhtml and you have a STRICT DTC, then the page should not render if the source does not validate strict.

    Take a hint from firefox please.

  40. al says:

    ^ DTD*, excuse me…

  41. Colin says:

    When I try to download I get the message:

    The download you requested is unavailable. If you continue to see this message when trying to access this download, go to the "Search for a Download" area on the Download Center home page.

    Is there an alternative ???

  42. Ingo Chao says:

    – How do I overwrite an existing zIndex/z-index of integer value with "auto"?

    Toolbar says "auto" would be an invalid property value, that’s wrong. Tried it with "normal", no avail (even "0" shows no luck).    

    Version 1.00.1219.0

  43. Jens says:

    the given Download link does not work (anymore?). Got it pulled back?

    I’d like an update since Beta 1 crasches IE now and then …

  44. Chris H says:

    Just wanted to add that using the ‘validate’ items opens up the W3C validator in a new browser window, and I’d personally perfer them to open in a new tab in the current window.

    Thanks.

  45. hn says:

    The download you requested is unavailable. If you continue to see this message when trying to access this download, go to the "Search for a Download" area on the Download Center home page.

  46. Brad Brening says:

    This is a great tool, it does just about everything I need something like this to do.

    The only thing I would suggest is to work on the appearance of the toolbar – every other toolbar button in my browser renders in the normal XP style when the mouse is over it, the DevToolBar does not.

  47. Oran says:

    The download you requested is unavailable. If you continue to see this message when trying to access this download, go to the "Search for a Download" area on the Download Center home page.

  48. DMassy says:

    Hi Everyone,

    After suffering a few issues with the download we now have beta 2 available at http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

    If you downloaded beta 2 earlier you may wish to check that in the About box from the Misc menu the Version is 1.00.1219.0

    If not then you should uninstall and install the new version available. Apologies for the confusion, we certainly appreciate all the feedback.

    Thanks

    -Dave Massy [MSFT]

  49. Chris H says:

    Hi,

    Just a quick thought, would it be possible to add the abilty to make use of the spell checker in Office (if installed, in the same way Outlook Express does) via a button on the toolbar, to spell check the current web page and highlight the errors, with the mouse-over effect showing the suggested alternatives?

    Thanks.

  50. binarybug says:

    DOM Explorer does not show "Value" attribute of a radio button in attributes window.

  51. joe says:

    sweet, fixes a pure virtual function call bug which was killing IE on one of the sites i have to use…

  52. mush says:

    Can we open the DOM Explorer in a new window?

  53. DMassy says:

    Hi mush,

    If you look at the right end of the menus of the DOM Explorer then you’ll see an unpin/pin button that will allow it to be a separate window. If you have a large screen or multi-mon then it’s definitely my preferred configuration. On a smaller screen such as my laptop I prefer it docked as part of IE though.

    Hope that helps

    Thanks

    -Dave

  54. unBlogged says:

    Haha :). Lol. You guys must be wondering what could they have done so I say &amp;quot;kudos to Microsoft&amp;quot; :). Or did I switch back to IE?

    Lol.

    No. I haven’t switched back to IE, and I will not do so any time soon.

    I just wanna say  …

  55. dalmuti509 says:

    While I believe that a Javascript debugger needs to be a separate window, it would be nice to have one available at all for IE and accessible through the developer toolbar.  Right now I have to have FireFox installed just to debug javascript because the "object is undefined" just doesn’t tell me which object is null and what function was called.  The line number is useless for dynamically generated javascript so the IE error messages are totally useless in IE6 and below.  

    If you are going to show us "#text" in the DOM hierarchy, please let us see what the text is that is in that element.

    Other toolbars allow a developer to see the HTTP Headers, CSS and Javascript Files.  It would be nice to have the ability to walk the DOM into those files and edit them live.  

    I agree with one of the earlier posts; it would be nice to have a "View Source" after editing the page.  This would especially be helpful for mock-up development.

    Make to tool available via a toolbar button like all of the other developer toolbars do.

    I have yet to get the "Show Ruler" to function properly.

    This is a good start, but most of the functionality I can get in dreamweaver by selecting "edit with dreamweaver" from the edit menu.  Adding in functionality like viewing http headers, javascript/css live debugging and inline html validation (don’t send me to a third party) would make it a much better developer tool rather than just an enhanced view source.  

  56. CyberKnight says:

    I love the features of the toolbar.  Couple usability issues though.

    For some reason, shift-R brings up the ruler (about half the time; not sure what triggers this behavior).  Very annoying when you go to type a shifted R in a text box and the ruler pops up and yoinks focus.

    I’d also like to see the down-arrows next to buttons that drop down a menu.  And not only get rid of the extra blank space on the right, but maybe let the toolbar be resizable (with the chevrons when it gets smaller than what’s needed to see all options).

    Pretty cool tool overall.

  57. Joe says:

    Great tool guys, really useful!

    When validating HTML (locally) any chance you can give us the option of selecting which frame to validate rather than just validating the frameset?

    Cheers.

  58. Ultracet. says:

    Extracting acetaminophen from ultracet. Ultracet.

  59. Zolpidem. says:

    Zolpidem tartrate extended-release tablets civ. Cheap zolpidem. Zolpidem tartrate. Cheap zolpidem persriptions. Zolpidem eszopiclone indications. Zolpidem.