The Beta 1 Refresh of the IE Developer Toolbar

Hello, my name is Jeff Varga and I am an intern from U.C. Berkeley on the IE team.  One of my projects this fall is to help build the IE Developer Toolbar into a great product for the IE community.

We are pleased to release the beta 1 refresh of the IE Developer Toolbar. The community feedback was incredibly helpful in finding a lot of problems and in planning for new functionality. We’ve combed through the replies to the initial release blog post and on the IE wiki at Channel 9. Please keep the feedback coming as it really helps.

The following is a list of fixes and new features in this latest update:

Bug fixes

  • We have fixed element bounding box calculations to be accurate
  • Outlining of elements is now significantly faster
  • We have fixed the image report crash
  • The installer no longer asks you to reboot (Beta 1 users will still be prompted to reboot because the Beta 1 Refresh installer invokes the Beta 1 uninstaller).  We hate reboots as much as anyone!
  • The “Resize” option no longer causes confusion with the state of the maximize/minimize buttons in IE
  • The “Select element by click” bounding box is now more visible on pages with blue backgrounds
  • The attributes editor (middle pane) now has variable width fields (e.g. you can type beyond the width of the box)
  • A few fixes to get around some pages never firing OnDocumentComplete
  • We’ve fixed the consistency of using “element” rather than “tag” in the menus (thanks to everyone who pointed out this one)
  • Scrolling and using the ruler now works better
  • Enabling/disabling images no longer closes and reopens IE
  • The installer now puts more options on the resize menu by default
  • Editing a property no longer lets keystrokes “leak” back to IE and navigate without the user expecting it
  • Trying to use the ruler while IE is in “folder mode” should no longer crash the browser

New features and functionality

  • Default styles (in the third pane) are now shown in gray to offset them from the explicit styles
  • The ruler dialog is always populated with the ruler information if there is just one ruler
  • The ruler dialog now has information on how to invoke the less discoverable features
  • “Undo all” reverts the page to the initial state
  • Remove all outlines

 – Jeff

Edit: Fixed a typographical error.

Comments (59)

  1. Jeff Parker says:

    Sweet, off to download and install this today. You guys have no idea how much time I have saved just using the Beta 1 or just tracking down which div tag is causing me grief. This is such a great tool.

    Curious though is this refreshed only at this location Linked or under my MSDN subscription as well.

  2. Anonymous says:

    This is such a great tool. A must for any web designer or developer. The new version is a lot less buggy. Good job!

    New Feature Request: I would like to be able to edit my cookies. I can view them and delete them but I would like to edit them without going into the file. That would save me a lot of effort.

  3. Anonymous says:

    Patrons of Firefox who may be wondering why Firefox doesn’t have a web developer toolbar should be happily surprised that Chris Pederick has for some time made the Web Developer toolbar extension available for Firefox at…

    The IE Web Developer toolbar is ok, not as pretty (but then again it’s younger then it’s Firefox competitor). Regardless there will be those who feel whatever is the default by default will be all they need and I hope this encourages such flyboys to clean their crappy code up! So ultimately I feel it is good that this toolbar is being worked on and effectively applaud MS and those who are working on it. It should do some justice to pushing the play button back on the boombox of progress as far as code goes online.

    Too bad we designers (such as myself who are in college) don’t have the $ to pay for a free preview of IE. Then again some changes are better then none?

    Preview release of Opera 9 almost perfectly renders the Acid2 browser test now. I think the 1.9 Gecko engine will probally catch up to that extent (they finally made that test pass W3C validation btw which is why I mentioned it).

    Additional features sounds nice, what will they include?

    1.) Local uploads to validators would be much appreciated as a starter.

    2.) Icon that indicates a page is being rendered in quirks/standards.

    3.) Icon that indicates various levels of WAI/508 that are achieved and not.

  4. Anonymous says:

    "Enabling/disabling images no longer closes and reopens IE"

    i just downloaded this from the link above and it’s closing msie when i disable or enable iamges. i have to manually reopen msie. is that really a fix/desirable?



  5. Anonymous says:

    I don’t think your installer updated the toolbar because "Enabling/disabling images no longer closes and reopens IE" doesn’t appear to be fixed. I even tried fully uninstalling it to no avail. I followed the link to

  6. Anonymous says:

    msp and netdragon, what version of IE are you using? I am unable to repro having to close and reopen IE for disable images to take effect.

  7. Anonymous says:

    It seems they forgot to update the download link. Current version of MSIE DevToolbar is 1.00.0912.0

  8. Anonymous says:

    Hey thanks for updating a few things. I wrote my initial review when this toolbar was released ( It’s a small update, but thanks for changing your "tag" references to "element." Small changes like that do show that you folks care which is good. I’m thrilled that outlining elements is much faster now (though displaying ID and class information is still rather slow). I also enjoy the magnifier in combination with the ruler. (Any chance on giving us controls for adjusting the modifier like magnification/viewing area?)

    While the new changes are certainly nice, there are still quite a few things that I mentioned in my review that haven’t been changed. Are you working on those since it’s still a beta? One thing I didn’t mention in my review but still want a great deal (and I’m not the only one) is the ability to outline anything. Outlining elements is great and speedy now but outlining elements based on their ID or class like #main or .info like the Firefox toolbar allows would be just as useful if not more so. I often have more need to do that than to outline all of one type of element.

    The names in the drop-down menus could be improved as well. For example, in the disable, outline, view, and validate menus, almost everything is preceded by the name of the menu such as "Outline DIVs" or "View Access Keys." I would think that if you’re clicking something saying "Outline," you don’t need to have each option saying "Outline" again. It’s redundant and kind of makes it difficult to pick out the one you want.

    Not sure if you know this but IE seems to always crash when trying to validate sets of things like HTML and CSS.

    Is it just me or is the option to disable the popup blocker checked when the toolbar is installed? I noticed this on two separate computers, on which I have the popup blocker enabled at all times. No fair being sneaky now…I truly don’t want to see ads and junk!

    Finally, how about some improvement on the overall appearance? I know it’s beta but betas don’t always have to look unpleasant. Try getting rid of that "DevToolbar" label/non-button thing and fix the resizing issue (resizing the browser window makes the DevToolbar hide other buttons instead of shrinking the giant space to the right of it). The tool windows need some help too. Maybe implement the XP visual styles and rearrange some things to make them more intuitive (and give us more color options when outlining elements)?

    While typing this, I just noticed that when I tried changing the color for rulers, I can’t pick a color. The color picker appears but I can’t choose a color or click OK/Cancel. I can only close the window.

    Those are just a few things I noticed when trying this new version out. I am glad you all made this and look forward to watching it develop. Just trying to help!

  9. Anonymous says:

    A color picker would be the icing on the cake for the toolbar. I would use it hourly.

  10. Anonymous says:

    I’m not sure if the download link is updated, but I had to restart my machine after installing the toolbar.

    I’ve been using the firefox web developer toolbar for a while. This one is almost as useful, and some of the features are implemented better than in firefox (the validation is more smooth, the ruler is better, and the DOM browser opens in a more sensible place).

    The major lacking is not being able to edit live css. This is the main reason I use the firefox toolbar, and it would be great to see this feature on the IE one. Also as was suggested above, a color picker would be great too.

    All of these things are allready available in firefox (through extensions), so in order for me to make the switch to using the IE toolbar, it should be either able to do something unique, or at least do the same things in a more integrated way.

  11. Anonymous says:

    One feature that I feel is mising from the toolbar is the ability to outline all block level elements (not just divs or a given tag). If i’m trying to figure out why some bit of CSS isn’t laying out right, I need to know all the block elements positions to accurately see what’s going on.

  12. Anonymous says:

    Just wanted to note that the image disable option now no longer closes IE, but doesn’t actually disable the images either. All it does it reload the current page.

  13. Anonymous says:

    While we’re talking about developer tools, is there any effort to make debugging javascript easier in IE?

    Everytime I see the especially annoying and uninformative "not an object or null" message in IE, along with a wrong line number and file name (it always gives the current page, not much use when several external scripts are used) I’m one step closer to just dropping IE from the cool but optional javascript parts of the sites I make.

    A full debugger like Mozilla Venkman would be nice…

  14. Anonymous says:

    Is that I had to restart my Windows box!

    I’m not usually a Windows/IE user but this seems bizare! Firefox requires a restart of the browser for some plugins, but a restart of the whole operating system? – what gives?!

    I had to walk to the other side of the office to turn the Windows box back on too (we work on Linux and test sites over RDP)… what Microsoft department should I send the bill for extra worn down shoe tread to?

  15. Anonymous says:

    Is there any way to avoid the reboot for future reference?

  16. Anonymous says:

    This doesn’t seem right – not being able to re-enable script from the toolbar itself.

  17. Anonymous says:

    Uhm, yeah, ok…

    1.) So, where’s the form manipulation tools?… these are the most important, yet non-existant in the IE dev toolbar!

    2.) A splash of color/icons would go a long way.

    3.) Most anoying missing feature in IE, is the "open this frame in a new window (cough tab)"

    If you can integrate this, you might just have a useable toolbar!

  18. Anonymous says:

    add "Show DevToolBar" in the context menu pls.

  19. Anonymous says:

    Hi Jeff!

    Thank you for your skills!!

    It’s a nice toolbar and useful!!

    Thanks a lot

  20. Anonymous says:

    Jeff [MSFT]:

    It definately didn’t update, based on seeing bugs that should have been fixed, including the "Show Ruler" issue.

    I think what might have caused it is that I accidentally chose "remove" from the new installer, so it might have left some junk behind. Afterwards, I tried every method possible to get the old version and the new version off the system, using both the old and new installer. I also used "Add Remove" programs. The toolbar disappeared from the browser in all cases, but I don’t think it was 100% removed.

    My bar says version 1.00.0912.0 and my browser is version 6.0.2900.xpsp_sp2_gdr.050301-1519 (it’d be nice if we could copy and paste these numbers instead of having to manually write them down).

    Can you please throw together a removal tool for each beta that really cleans house on the older betas? I’d like to test the newer betas, but atm I’m locked in.


    In regards to other peoples’ comments:

    Jim2: There’s the Microsoft Script Debugger, but the problem is that the errors are not descriptive enough, the debugger doesn’t catch every error, and sometimes the errors say they happen on the wrong file. I’d like to see them create a javascript console like Firefox has. The way they show errors is not developer friendly.

    Re "Still Waiting, come on MS… ": Who cares about how it looks when there are still huge issues with how it works? There are some really major issues, such as "Disable Cache" not working right, the DOM Explorer window becoming empty when some DHTML changes are made to the page, and you still can’t search for an element’s ID based on only part of an ID. Internet Explorer still doesn’t even have a Javascript console. Troubleshooting Internet Explorer issues waste more of my time than any other browser besides Opera (even more than Safari) because of how quirky the browser is and the lack of good development tools, and I really don’t care how their debugging tools look as long as they work like Firefox’s. How it looks might be important for non-developer tools/apps, but this is a developer tool, and any serious developer will favor functionality over aesthetics.

    Once your clients are asking for a workaround to some way IE fudges up standards-compliant web content (and come up with the fix ASAP), and you know tens or hundreds of thousands of dollars are riding on figuring out this issue that is due to some quirky bug in Internet Explorer, and you have a few hours to figure it out before the stuff goes live, and no way to track it down besides trial and error because of no way to see what IE is doing underneath the hood, you’ll see how little the aesthetics of the toolbar really matter and how important it is that it works as it’s supposed to. It makes me pretty angry when people bug them about looks because it’s possibly taking their focus off of getting rid of real bugs.

  21. Anonymous says:

    Jeff, I have the same versions as netdragon.

    hope that helps,


  22. Anonymous says:

    Ok, I got it now. What I thought was the new installer was just a copy of the old installer. Now everything’s fine. My version is now 1.00.1017.0 🙂

    msp: The new installer should be 339KB, not 322KB. Check to see if you are using the right one.

  23. Anonymous says:

    Here is a "funny cuz its true" piccie of Bill Gates:

  24. Anonymous says:

    Great tool. Many thanks. I have encountered one fairly serious problem though. When I try to "View Cookie Information" and my browser is set to localhost, my browser crashes with the following dialog:

    Int. Expl. has encountered a problem with an add-on and needs to close. And, of course, the file is IEDevToolbar.dll.

  25. Anonymous says:

    Can we have a IE 7 beta refresh to go along with this refreshed toolbar? We want to see some builds of IE 7 released more frequently, like the full Vista builds.

  26. Anonymous says:

    Thank you so much for removing the stupidest shortcut in the world (shift + R)

    I do still have an issue that’s bugging me (bug… get it?) – the "view cookie information" doesn’t like it when I try and view details set by an intranet site. (It crashes IE and sends a report to MS about it.) Has anyone else found a workaround / fix to this? This is the same error as reported above by Joe Rice.

  27. Anonymous says:

    When I "Validate Local CSS" from the DOM Explorer something is causing my user-agent to report as "Microsoft+Internet+Explorer". What’s up with this?

    Here’s the line out of the IIS log:

    2005-11-03 16:23:46 W3SVC1 GET /VAM/Appearance/VAMStyleSheet.css – 443 –

  28. Anonymous says:

    It’s nice to see this being worked on.

    A couple of things that would be nice to have working:

    1. You should be able to browse DOM tree and to be able to enter IFrames from different domains to see their DOM trees.

    2. I know that DOM Explorer can be unpinned, but is it possible to have it docked on the left side like a sidebar? This would also make it vertical vs horizontal. (which in some ways is more compact)

    3. Is it possible to convert Properties and Styles into a tab bar with two tabs? This would totally rock in vertical layout as a sidebar.

  29. Anonymous says:

    Bala Clark:> The major lacking is not being able to edit live css. This is the main reason I use the firefox toolbar, and it would be great to see this feature on the IE one.

    I’m 100% with Bala on this. Live editing is invaluable to me. I’ll also back up a few other recommendations posted so far:

    – I hate that big gap to the right of the bar, espcially when resizing.

    – I *know* it’s the toolbar. I do not need a big wasted space telling me so on the left.

    – Outlining all block level elements is very, very useful.

    … and some new suggestions:

    – *Remembering* what elements I prefer to highlight with "Outline any element" would save so much frustration.

    – "View Class/ID Info" hides class info behind ID fields, since I see something trying to poke out, and I can’t see my class info.

    – Instead of (or in addition to) "View Class/ID Info", it would be great to be able to hover over an element and see that information. Perhaps similar to MODI ( )

    Thank you so much for the efforts so far. Once this toolbar has a few more features I’ll actually be able to debug IE more easily. Can’t wait!

  30. Anonymous says:

    Can it be that it works only for some sites and not for others? I do not see anything on e.g.

    And also the ruler does not show up in those cases.

    IE: 6.0.2900.2180

    Toolbar: 100.1017.0

  31. Anonymous says:

    Great toolbar! A feature request:

    The ability to disable OBJECT tags on a page (i.e., to disable FLASH or similiar items).

  32. Anonymous says:

    I like it tons, thanks!

    Can you give me the ability to see all the <SCRIPT> that is known (not just that explicitly called out in the markup, include the dynamically generated stuff).

  33. Anonymous says:

    thanks for the update!

    but right off,

    i have noticed that as i browse the DOM tree,

    object flashes are totally off the IE window.

    i believe this is a new flaw, no?



  34. Anonymous says:

    >Can we have a IE 7 beta refresh to go along with this

    >refreshed toolbar? We want to see some builds of IE 7

    >released more frequently, like the full Vista builds.

    I am sure that Jeff here will get that whipped up for, right after he graduates.

    Just curious – do you people actually read these blogs? Or do you just see a new blog like its a flashing neon light and go into attack mode?

  35. Anonymous says:

    IE developer toolbar has a Outline/Outline Positioned Elements menu with following items:





    However, says:

    An element is said to be positioned if its ‘position’ property has a value other than ‘static’.

    Therefore, you got a terminology clash with the spec. Spec does not consider floats to be "positioned" (as they do not get a change in position property), and you are.

  36. Anonymous says:


    Too true, I will take functionality over pretty, any day.

    Let me rephrase, in one line.


    This *IS* the MOST important DEBUG TOOL!!!!

    What can I say, web development has been a dream for the last year. . . great tools, awesome browser & standards support… oh, wait, this is the IE blog. . . doh!. . . it has been great, but, it certainly hasn’t been on MSIE.

    Keep waiting for a reason to consider switching back. . . guess it won’t be in 2006. Is there a roadmap for IE8 yet? a feature list? tx.

  37. Anonymous says:

    Nice, really nice. Thanks guys, keep up the great work.

  38. Anonymous says:

    I installed the toolbar today and it would be great if you can add following features:

    1. Option to disable CSS on the page

    2. Option to disable FLASH content

    3. Like other said add some kind of color picker



  39. Anonymous says:

    I installed the toolbar, love it for the most part, but I can’t get the ruler to work on any sites. At all. I get no crosshairs, can create no rulers, I don’t know what to think.

  40. Anonymous says:

    wow, that very cool. it is far better than all the other i have tried so far.

    one feature though i would like to see that has been present in similar solutions i have tried is a facility that allows you to view post data and query data.

  41. Anonymous says:

    One feature for the toolbar I wouldn’t mind seeing is the ability to see which HTTP Headers IE is sending and receiving per request, as well as perhaps the ability to set your own HTTP Headers.

  42. Anonymous says:

    heh, i was just about to request the same thing as chris. the ability to view full http headers would be great. im working on something right now where that feature would really helpful…

  43. Anonymous says:

    It seems that it is possible with Eric Law’s tool, ‘fiddler’

    I previously mistook it as a stand alone app for HTTP header reading, but it seems when you browse with IE, it’ll record all the traffic too, pretty handy.

    Any chance this tool will be extended to allow other browsing devices to be logged with the tool?

  44. Anonymous says:


    I think this tool is great. It’s certainly help me out since I installed it.

    One thing which would make editing dymanic sites a lot easier would be a ‘reload CSS’ option.

    In many situations it would be much faster just to reload that data rather than reload the whole HTML page, particularly if it takes a long time to get search results.

    I would be great if you’d consider adding in that option.


    – Kevin Cannon

  45. Anonymous says:

    Showing the source file of a style is very useful. Listing the name of the CSS file that a style rule and its value came from makes it much easier to figure out why something is rendered a particular way when you have multiple stylesheets.

    Yes – this is an idea from FireFox…

  46. Anonymous says:

    It would be useful if any combination of settings in the toolbar was saveable. If I need to disable images and to disable scripts and to view link paths and to outline table cells, I have to click four different options, fnd then to uncheck them one after another. The next time, if I need the same settings, I again have to click four options and then again uncheck them one at a time. What a pity there isn’t a button “Save current settings” and another button, “Select from saved settings”. By the way, if you implement such a tool, you’ll wipe Firefox’s eye. 😉

  47. Anonymous says:

    I appreciate the updated toolbar. One issue that I have found: clearing the browser cache by selecting Misc > Clear Browser Cache completely clears the cache including cookies, whereas clearing the cache by selecting Tools > Internet Options… > Delete Files leaves cookies intact. Both options can be useful to a developer; would it be possible to provide two options: "Clear Cache (including cookies)" and "Clear Cache (excluding cookies)" ?

  48. Anonymous says:

    Wow! Ain’t this familiar from (well) "somewhere else", but that’s more welcome now as anything. If there were some miracle-cure to fix all IE CSS idiocies, now that would be great, though I know I’m asking for too much.

    So it’s a good start, but we’re witing for more. MUCH more. Sorry to say, but the IE team is (as you well know, I’m sure) lagging light-years behind other browsers in terms of features and standards support.

    So off you go developing 😉

  49. Anonymous says:

    I’ve downloaded this Beta Refresh, still no rulers. No crosshairs, nothing. I get the window with the settings, but nothing beyond that. It says the first install was un-installed, but it’s still acting like the first toolbar. Any suggestions?

    Also, I see the disable link for Script, but it would be nice if there was a differentiation between javascript and activeX, which I believe can be separated out in IE, or am I missing something?

    Thanks. Lots of potential here.

  50. Some of the stuff on my radar screen the past couple of weeks… Local/Regional Steve Eugster&amp;#39;s Blog