Internet Explorer Developer Toolbar – Get it Now!


At PDC in 2005, we announced the Internet Explorer Developer Toolbar and made the first buildavailable shortly after. Since then, we’ve released two additional betas; thanks to your testing and feedback, we’ve improved the quality and added new functionality like formatted source viewing and CSS selector matching.

Today I’d like to announce that v1 of the IE Developer Toolbar is complete! Please download the toolbar and read release notes here.

What’s changed since Beta 3?

This release of the Developer Toolbar does not add any major functionality but includes a number of important reliability and “fit-and-finish” improvements. For example, the installation process will automatically remove Beta 2 and newer builds so you don’t have to do so manually, and for those of you running Windows Vista, you will not have to log off and back in to make the toolbar visible. However, you do need to restart IE and then click the IE Developer Toolbar icon in the IE6 toolbar or IE7 command bar.

We want to hear your feedback!

If you have feedback or questions about the toolbar, please share them on the IE Web Development Forum on MSDN. There you’ll find a post by me that suggests using [IEDevTB] in the subject of posts pertaining to the Developer Toolbar. We’ll look through all of the posts for comments and questions about the Developer Toolbar, but the subject tag will help us find and track your feedback so we can better respond to it. While you can still use the Channel9 wiki, we’d prefer if you use the MSDN forum.

What’s next?

This tool is a direct response to your requests for free web developer tools and we hope you enjoy it. However, we see this as only the first response to your requests not only for tools, but for making development for IE easier.

John Hrvatin
Progam Manager

Comments (80)

  1. Eric says:

    There’s really no need to make us see monkey boy. And to compare yourself to him is just an insult (to you)

  2. Drel says:

    When can we expect a development tool integrated into IE similar to Firebug for Firefox?  There’s nothing remotely as good for IE at this point, and I can’t imagine trying to debug or profile in Internet Explorer any more.

    By the way, there’s no indication given that one needs to restart one’s browser after installing Silverlight, at least in Firefox.  Clicking on the install Silverlight button prompts you to save the installer, if you then run it, it installs, but the web browser still displays the install Silverlight button.  

    Clunky.

  3. thats_an_un_user_friendly_install says:

    Thats quite the install!.. follow a link from the IE Blog, to install the addon, and the addon requires me to close all open IE windows!

    You should try to do what Firefox does, install the addon, then inform the user (if req’d) that the addon will be available on the next USER_INITIATED restart of the browser.

  4. foo says:

    don’t see much improved, but still see bugs.

    open the dev toolar panel in a separate window (e.g. detach from the bottom)

    navigate to a node.

    Click Add (+) to add an attribute, scroll to an item, and select it.

    now, click elsewhere in the grid, of attributes (e.g. below) to "unhighlight it"..

    Poof! the dev window, goes under the current document window… and when you go back to the dev window, the new attribute is gone!

  5. Tom Clancy says:

    Next step: support console.log()

  6. Chrys says:

    What I’m looking forward to is being able to debug javascript.  IE may as well tell us nothing about the javascript errors… oh wait, they already do!

  7. vince says:

    Well, I’m glad that in this version, the "trace style" feature actually does someting (XP), but I’m not sure I understand completely.

    I was under the impression, that the "coolness" of this feature, was that if you wanted to figure out, where the "margin-right" came from on the selected element, it would give you some sort of inheritance tree to follow how it got set.

    e.g. if the element was a [p] node.

    html: margin: 0px;

    body: margin: 0px;

    p: margin-right: 4px; <——+

    div#foo: margin: 2px;        |

    #foo p: margin-right: 4px; –+

    All it seems to do, is pull out the first matching CSS declaration that appears applicable (which, in many cases, is not correct), especially if your scripts have generated styles, and applied them to elements.

    Kind of a big let down.

  8. janet says:

    Auto-starting a video on a page is highly annoying. If we want to watch/listen to the monkey boy video, we can click Play.  Lets not forget that most readers on this blog saw that video years ago, so it isn’t news.

  9. Jean-Marc says:

    Hi,

    While IE Dev Toolbar is a "must have", it crashes IE each time i add "tags" in a blog post (using "Community Server" at http://msmvps.com/ ).

    So, each time i want to write a blog post, i must launch IE in "no add-in mode". It’s very annoying…

  10. Odegaard says:

    Clunky: To me its the other way around: When can I get the superior javascript debugging environment of Visual Studio for FireFox? To me the VS debugging by far surpasses that of FireBug, and with Orcas it gets even better.

  11. Alex says:

    Oh my god… that man is really crazy. And he runs Microsoft? Poor Microsoft…

  12. JP LeClair says:

    Sliverlight error message

    error code: undefined

    error type: undefined

    message: undefinded

    hmmmmm…

  13. I find this invaluable for working around IE’s various CSS bugs. I don’t think I could do my job without it for complex layouts. :)

    Once criticism I have is that the syntax highlighting is extremely ugly. Primary colours and all-uppercase text is a bit late-20th-century, don’t you think?

    Having attribute values coloured the same as angle brackets on the ends of tags makes the code hard to read. Having everything in capital letters is even worse.

    I’d suggest using the syntax colouring of Firefox’s source code view, or at least provide a way for it to be customised.

    But overall I this is a very useful tool for any CSS developer who has to support Internet Explorer.

  14. Ron says:

    I’d rather not use the MSDN forums.

    There’s a number of annoyances that make this addon very awkward to use.

    - Tooltips should not appear when hovering over random areas of the toolbar’s window. The tooltips repeatedly cover up portions of the toolbar window making it difficult to see what I’m doing. Even hovering over a scrollbar triggers a tooltip!

    - In windowed mode, every time you add, edit or cancel an attribute the toolbar window moves behind IE. This happens even if no attributes are updated.

    - There’s no way to clear the outline caused by the element selector. You would expect the option "Clear outlines" to do this, but it doesn’t.

    - Why can’t I edit Current Styles? Why can’t it function like the attribute window?

    - The node view has no colour coding, it doesn’t show closing tags (would be useful to see if a tag is unclosed), tags are in uppercase, etc…

    Otherwise all the other functionality seems satisfactory, but it’s annoying that I can’t just toggle the DOM inspector while leaving the actual toolbar open.

  15. sunbee says:

    It is not important.

    IE7`autoupdate is important in korea, china and japan.

  16. Matty Smith says:

    I am running XP and had a previous version of the toolbar ( I think Beta 2 ).

    This blog entry claims that "the installation process will automatically remove Beta 2 and newer builds so you don’t have to do so manually" so I installed this new version straight away.

    Now my ‘IE Developer Toolbar" button no longer brings up the dev toolbar.  The next quickest way I’m aware involves hunting through menus (View | Explorer Bar | IE Developer Toolbar ).

    When I DO get the toolbar displayed, all of the menu options are disabled, rendering it all but useless.

    I went to "Add/Remove programs" and it had two entries for the toolbar in there.  I removed both and reinstalled the new one.  Still doesn’t work.

    The install file is exactly the same name as the previous version’s install file, and as such it overwrote my previous installer.  This means I can no longer install my last working version.

    All links I’ve found to download the IEDevToolbar from Microsoft seem to point to the new version, INCLUDING the one mentioned here: http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=1585975&SiteID=1

    There are a number of things wrong here.

  17. Ben Buchanan says:

    The dev toolbar is a fantastic start, although next to tools like Firebug it still feels a bit clunky. I keep clicking the current styles expecting to edit them!

    BTW, please don’t bombard us with marketing like that. If I want Silverlight information I’ll go find it myself. That turned the post into a really obvious bait-and-switch.

  18. zhouqb says:

    Even with this toolbar, development for IE is still hard hard work, and costs more than too much than other browsers.

  19. Guru Stop says:

    IE Developer Toolbar 1.0 [No more BETAs for this version]

  20. Ingo Chao says:

    How do I reset an existing z-index of integer value with ‘auto’?

  21. EuGeNe says:

    a good companions to IE dev toolbar for those of us working with IE: http://www.debugbar.com

  22. Andy Smith says:

    Just another request for some Javascript related features. The ability to see which scripts are linked to the page and quickly view them would be a start.

  23. Gregor says:

    Thanks – the tool is really handy.  I had the odd bug with beta so hopefully it’s ironed out.

  24. Chris Keeble says:

    Excellent tool, very useful, thanks.

    Missing features described above (e.g. clear outlines) are there already (e.g. Outline -> Clear Outlines). Much prefer this than losing it whenever I want to click around etc.

    Keep up the good work.

    As for the adverts – it’s a free tool, so I don’t mind getting the odd advert in the blog. Makes good business sense to me.

    Regards

    Chris

  25. Ewar Woowar says:

    What would be cool would be a meta-tag in IE that one could use which would mean IE used Firefoxe’s HTML rendering engine to render the code. That way we might actually start to get some consistency in our web pages! :-)

    Oh, FYI, the IE developer toolbar is primitive compared to Firebug.

  26. Jim says:

    Installed it this morning on XP (SP2) running IE6. The toolbar button does nothing when clicked. The toolbar can be opened from the Explorer Bar menu, but the DOM shows up empty. All menu items and buttons are inactive and cannot be clicked.

    Needless to say, I’ve uninstalled it.

  27. Russell Weed says:

    I have the exact same problem.

    I tried posting on the MSDN boards but didn’t get an answer there either. Was told a URL for the previous version, but that was incorrect too.

  28. JP LeClair says:

    Thanks for the update on not seeing the silverlight video…

    I love my IE toolbar. Very handy!

  29. davidparslow says:

    Thanks for dev toolbar it is critical, but I agree iwth Ewar, "the IE developer toolbar is primitive compared to Firebug."  Because Firebug is SO much more advanced and easier to use, I often do most of my web design in FireFox and then go back and use ms dev toolbar to make corrections in IE (mostly due to the incorrect implementation of the box model, when is that going to get fixed?).  By the way, IE is my primary browser so I claim not to be biased.

  30. Jonathan Hoersch [MSFT] says:

    @Matty Smith, Jim, Russell Weed: The symptoms you describe (button does nothing, options are all disabled) sounds to me like the toolbar’s browser helper object (BHO) is not getting created.

    Try going into Manage Add-ons and ensuring that the "IE Developer Toolbar BHO" add-on is set to enabled.

    Also, I believe that BHOs are automatically disabled by default when running Windows Server 2003 in the enhanced security configuration (ESC).  In this case you would need to enable the BHO manually or disable ESC.

  31. Using IE control for View Source not a good idea at all.

    I tried to open http://www.msn.com/ and than:

    View -> Source -> Original

    Everything hangs… I see the first line and if I try to resize it… Everything hangs again…

  32. Michael Madsen says:

    @davidparslow: I’d like to point you to http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug. Something tells me you aren’t writing your pages properly if that’s still a problem for you, as it’s been fixed ever since IE6 came out – so long as you’re not relying on quirks mode, that is.

  33. blake says:

    The onresize event in IE is quite painful to work with.

    If you restore/maximize a browser window, either by the context menu from the task on the taskbar, or from doubleclicking the title bar… numerous resize events are fired.

    In all Non-IE browsers (Firefox, Opera, Safari, Konqueror…), 1 resize event is fired.

    In IE6, 3 events are fired

    In IE7, 2 events are fired

    Since only 1 resize event *actually* occurred, is there a way to suppress the additional event(s) in IE?  Or at least be able to detect them?

    Oh, and will the IE Dev Toolbar support some sort of event hooking in the future, so we can trace bugs like this, to determine if our code is at fault, or IE’s.

    Thanks

  34. Russell Weed says:

    @Matty Smith, Jim, Jonathan:

    I figured out the problem!

    Tools -> Internet Options -> Advanced and Enable third-party browser extensions.

    Don’t know why it’s flagged as 3rd party when the old version wasn’t, but it great works now.

  35. En algún momento habia un post de mi amigo Sergio Tarrillo acerca Internet Explorer Developer Toolbar

  36. Steve says:

    @blake

    As I understand it this is something to do with XP’s visual styles. If I remember rightly its something like explorer redrawing the window when it gets resized, and this apparently fires the resize event.

    But someone else here will probably be able to give a better answer.

  37. I don’t see the silverlight content. All I see through myh Mac is a pink rectangle (and I have a clean install of the latest version of the plug-in). I guess there is still something funky with this version :-

  38. Corentin says:

    I found out what it waas…. the plug-in works with Safari, but not OmniWeb :’-(

  39. Ollie says:

    Rest assured Corentin; You’re not the only, OmniWeb wielding, IEBlog visitor wondering what that pink box is :)

    Doesn’t work in NetNewsWire either.

  40. Piere says:

    @Ingo Chao

    Reseting the z-index is not possible in the IE dev toolbar, most CSS and JavaScript options are not available like the ones in Firebug or WebDev Toolbar for Firefox.

    Keep in mind, that the z-index in IE also has many bugs, where new stacking orders are created when you inter-mix absolute and relatively possitioned elements (which is the kind of thing that drives us developers up the wall!)

    Too bad the IE toolbar can’t fix these problems, or even identify them! You have to take the values it displays with a grain of salt….. meaning that you shouldn’t trust them to be 100% accurate.

    The only tool I’ve seen so far, for IE that tells the truth, is the XMP view of the document, which shows the 100% IE-accurate view of the current content.  Of course, the tag case is wrong, attributes are not quoted, and the closing/valid xhtml tags are out the window, but it is the only view I’ve seen that is 100% accurate in terms of showing code, that IE is actually rendering.

  41. Jack says:

    Can you PLEASE make that video NOT AUTO-START? Further example of how Microsoft doesn’t usability in web pages.

  42. Mitch 74 says:

    The day I might consider Silverlight is the day it shows at least as much platform support as Flash does – as in, Windows, Mac and Linux at the very least.

    It doesn’t.

    Thus, as the miserable copycat it is, I won’t consider it and keep using Flash.

  43. Aedrin says:

    "I won’t consider it and keep using Flash."

    Why is why we see more and more crappy Flash interfaces.

    Flash has one purpose, showing videos. Because it is the only thing it does well.

  44. Mike Robertson says:

    Is it just my upgrade to 1.0.2188 that breaks the Validate/Local HTML menu behaviour.  This was a great feature to test IntraNet pages (behind firewalls) – it now just takes me to http://validator.w3.org/ without uploading a dump of the HTML to be tested.

  45. Mitch 74 says:

    Flash handles vector graphics quite well. It also uses a scripting language that is quite easy to use: it’s ECMAscript (yes, ActionScript is compliant with ECMA script specs – see Tamarin). The fact that video players have been programmed to use Flash as a platform able to output pretty much any video (MPEG4, WMV, QT…) or audio (MP3, WMA, AAC, Vorbis…) format doesn’t hurt.

    Programming an interface in Flash or in Silverlight is the summum of stupidity; it is non-accessible.

    What Flash has over Silverlight is that:

    -it exists on many platforms,

    -it includes published standards,

    -its specs are published, and interpreters can be made for it – meaning anybody can use the format.

    What about Silverlight? From what I could see, it’s completely closed, and not available outside of Mac and Windows PCs – while Flash can be accessed on Mac, PC (win and linux), and small appliances. Older Flash content can be accessed on any Unix platform (see Gnash).

    As for the developer toolbar, it is still unable to allow you to create a valid XHTML page – since IE7 doesn’t support XHTML (only backward-compatible Annex C XHTML 1.0 with MIME text/html), not real XHTML (with XML namespaces and application/xhtml+xml MIME type).

  46. Aedrin says:

    "Programming an interface in Flash or in Silverlight is the summum of stupidity; it is non-accessible."

    I think that is the important line.

  47. Ian Hickson says:

    Is that content available in a form that I can view from my machine? I’m running Linux and the installer doesn’t start when I click the button.

  48. Dan says:

    This is a great tool but a major bug still remains in this release which makes it unusable. I am forced to revert to Beta 2 which is the only version which doesn’t have this problem.

    I refer you to several comments in the Beta 3 release discussion both below and on the Channel 9 Wiki.

    http://blogs.msdn.com/ie/archive/2007/01/09/ie-developer-toolbar-beta-3-now-available.aspx

    On many pages (I mean most) a script error occurs as follows:

    Object doesn’t support this property or method

    The code breaks on the following line in the ParseDoc function.

    collSelectors.item(i).SetQuirksMode(true);

    I am not sure but I think this has something to do with the dtd used in the doctype of the page. I am using Win XP SP2 and IE7

  49. walter says:

    can you please turn off the auto-start on the video! it is highly aggravating to have the audio come in over whatever I’m listening to on my headphones.

  50. steve_web says:

    Quick question.  As a web developer, we find various bugs in IE6/7, some with workarounds, and some without, but in particular, for bugs in IE6, is the "rule-of-thumb" that unless the bug causes a security risk, there is no chance it is getting fixed?

    I ask because I found an odd bug in IE6 (that’s fixed in IE7, btw) that isn’t quite a security risk… but it does allow HTTP GET Requests to any server without user interaction, or display of the page requested.  The user actually sees nothing that would indicate the request was made, and it requires no ActiveX or AJAX stuff.  These requests do not show up in the user’s history either.

    I would post this to the public bug tracking for IE, but it is still offline (and likely not valid for IE6-only issues.

    Can you indicate where I can send a test case/bug report to, so this can get looked at?

    Thanks,

    Steve

  51. amused says:

    second bold title:

    "We want to hear your feedback!"

    ..but not on IE, only on the toolbar!

    what happened to the feedback site for IE?

    a bug found in the toolbar, isn’t a major issue, but a bug found in IE, is a major issue.  Why is there not a tool available for this?

  52. Daemach says:

    I’m doing a ton of client-side work lately, and I’ve grown increasingly frustrated with having to support IE as a platform.  I switched to Firefox months ago because of Firebug and I’ve never looked back.  Javascript development with Firebug is actually a joy because of the huge amount of visibility I have.  A complete profiler for tuning slower functions, full breakpoint debugger + watches, complete DOM/CSS/HTML access, including the ability to EDIT any of those and see changes in real time, and an http sniffer mean I finally have the power to do some really interesting stuff – and it’s free.

    In comparison, the IE developer toolbar lets me look at the HTML DOM, but not window or frame objects.  Limited CSS information and NO javascript debugging/profiling information.  IOW, 1% visibility instead of 0.  Progress maybe, but it is so incredibly lacking compared to Firebug that you should be ashamed that you can’t even equal the functionality, much less surpass it.  

    Yes, I’m grumpy.  I hate having to support IE, and I try to push people to firefox  with every chance I get because I can actually give them a good experience there.   Go check out the demo on my site (link on my name) in Firefox then IE.  IE is literally 10x slower and there’s not a damn thing I can do about it because I can’t see where the problem lies.

  53. Peter says:

    Can’t you just post a screenshot?

    P.S.

    NO I WILL NOT INSTALL ANOTHER PLUGIN ON MY BROWSER. NEITHER SILVERLIGHT NOR SHOCKWAVE, QUICKTIME OR ANOTHER S**T

  54. Branko says:

    DEVELOPERS!!! DEVELOPERS!!! DEVELOPERS!!! DEVELOPRS!!! DEVEL!!! DEVE!!!! DEV!!! ARGHHH!!!

    What I would like to know is: Why is there a video of Steve Ballmer sweating like a pig and screaming DEVELOPERS!!! on this page?

  55. steve_web says:

    Kudos for turning the auto-play off on the Monkey Boy video!

    Now, onto important things.. when is Feedback going to be back up?

    I’m with Daemach on this one… debugging in IE is a royal pain… but it is made worse, when there is no source to check if a bug is your own, or the vendors (i.e. Microsoft), and worse yet, when you discover that odd scenario where under condition X, feature Y breaks, you have no way to spread the news to other developers to save them the headaches.

    I hate to be the squeaky wheel on this, but come on, publish a date when this will be up! Its gone beyond funny, and a laugh that it doesn’t exist, now it is just down right aggravating that Microsoft says "Were Listening", and "We want your feedback", but doesn’t offer a tool to do so.

    Extremely Disappointed.

    Steve

  56. add says:

    still no javascript console? maaaan…

  57. Me says:

    Is anybody else getting JScript errors after installing this?  I cannot run any website with scripts.  If I disable the toolbar the sites run fine.

  58. Tuan says:

    You’ve made a developer toolbar for IE? Who’s a good developer. Yes you are!! Yessssyouuuareee! Good job little buddy!

  59. Tae says:

    Someone develope a better font for the screen

  60. Tae says:

    I’m seeing double with my glasses and quadruple with out

  61. amidude says:

    With every lame attempt at copying others and failing to do so I can only ask one question? Why is anyone still using Microsoft products? Why would anyone download Silverlight when Flash is already out there and working far better than anything Microsoft can attempt? If you want me to see your stupid developer bar let me choose which plug-in I want to use to view your demo. Then, if I’m impressed and see some value in it I will consider putting them on my computer…till then I will continue to test using Firefox and it’s vastly superior plug-ins. Sorry but your browser only gets used to see if I’ve covered all the problems it has displaying web pages.

  62. Michael says:

    All I can say it is poor considering the time you have had to do it.  DOMi (Fx) is still vastly better.

    But thanks for having a go at it.

  63. Michael says:

    Me again, just watched the movie.  If all Microsoft employees are one tenths as mad as that then I can see why the software is so bad.

  64. We tried talking to Microsoft about supporting IE with our coverage, profiler and memory analysis tools.

    We were getting somewhere (teleconference with the IE team discussing issues), then the IE 7 bug  push came and that killed it. The team we spoke with was disbanded and moved elsewhere. We still get Microsoft staff checking out our software and/or asking if we are going to support IE.

    Clearly people in MS want us to support their tools, but MS itself appears uninterested.

    Stephen

    stephen <at> softwareverify.com

  65. jlawhk says:

    A javscript error occurred on every page I load. Make the tool totally unusable..

  66. Lee says:

    This is by far the best Microsoft’s product for web developer even though it’s still beta! I am now ready to completely switch from Firefox. I just can’t believe I haven’t found it until now.

    Microsoft has developed the web developer toolbar prior to any other browsers in this planet. It is such an innovative decision you guys. Way to go, IE Team!

    IE7, with this developer toolbar, is far more compliant to W3C standard than any other browsers. No wonder that other browsers market shares have declined so much! I am so happy now that MSIE has little to no bugs and much more secure compared to any other web browsers.

    Go Microsoft! YEAHH! You are the best!

    Microsoft should sue the developer of the not-so-innovative Firebug for their lame attempt in creating copies of this tool. Come on, go sue! Sue! Sue!

    Say Amen? Amen brother.

  67. Port80 says:

    IE版Firebugといえる Internet Explorer Developer Toolbar が2007年5月9日に公開された。エクスプローラ バーとして機能するInternet Explorer用アドオン。

  68. I’ve been demonstrating the IE Dev Toolbar for a while now to many of my customers. It’s really great

  69. V1 of the IE Developer Toolbar is available. One of the many features that Public Sector developers will

  70. Minefeed.com says:

    Every month we take a look around and select some of the most interesting web-development-related web-sites. […]

  71. It is legitimate that obtaining confirmed info on this matter can be difficult.

  72. Over at Remy’s space he’s posted a collection of screenshots of the Silverlight applications being delivered

  73. PeteL's Blog says:

    A couple of days ago, I got an email from the guys at DebugBar letting me know that they had just released

  74. A couple of days ago, I got an email from the guys at DebugBar letting me know that they had just released

  75. &#160; This is a simple, and completely unofficial, inventory of many cool Silverlight applications…

  76. This is a simple, and completely unofficial, inventory of many cool Silverlight applications that use…

  77. This is a simple, and completely unofficial, inventory of many cool Silverlight applications that use…

  78. This is a simple, and completely unofficial, inventory of many cool Silverlight applications that use…

  79. I&#39;ve been wanting to make a list for my own reference of all the best-of-breed tools that I prefer