Developer Toolbar for IE announced at PDC


The developer community has asked for a long time: Where is the free developer toolbar for IE? We recognized the popularity of free IE tools like Fiddler and we listened to your feedback. I am glad to announce the next addition to our developer tool support: The IE dev toolbar. This tool will help developers to explore their HTML documents and understand everything about it.

With the IE Dev Toolbar you have several features at your fingertips to go deep into existing pages or pages that you are currently creating. You will be able to explore the DOM tree and find elements on the page, disable IE settings, view information, outline elements, control images, resize pages to common screen resolutions and have a powerful ruler that lets you measure pixel perfect content on your page. It also will help you to validate against existing standards and provides pointers to W3C specs.

At Chris’ talk at the PDC on Tuesday, he announced that we would have a beta version available very soon. This is now ready and available for download. It is designed to work on IE6 as well as IE7.

I would like to thank our interns, Carl LeCompte, Mary Ann Jawili, Barbara Morales, Seth McLaughlin and Jeffrey Varga for doing a great job working on this project, and also a big thanks to David McKinnis, our developer.

I would love to hear in the comment section what you think and what additional features you would like to see added. Bugs can be reported at the Channel9 wiki.

 – Markus

Comments (137)

  1. Anonymous says:

    "It also will help you to validate against existing standards and provides pointers to W3C specs."

    Nice job guys. It’s time for the rest of the Internet to join the standards crowd.

  2. Anonymous says:

    Yeah! I’ll give it whirl right now…

    …first impression…installer requires reboot…yuch. More later.

  3. Anonymous says:

    The Internet Explorer team just released a developer toolbar for IE 6 & 7. I just installed it and…

  4. Vimpyboy says:

    Really good stuff!

    I tested it against this blog and the result could have been better. 😛

    Result: Failed validation, 75 errors

  5. Anonymous says:

    New : Toolbars to help validate with existing standards.

    STILL missing : Full standards compliance (CSS 2.1 in particular)

    Aren’t you a bit ironic?

  6. Anonymous says:

    @Andy We are aware of the reboot problem and working on a fix. Please take into account that this is a Beta.

    — Markus

  7. Anonymous says:

    The IEBlog just announced the availability of the IE Developer Toolbar.

    The FireFox guys have had something…

  8. Anonymous says:

    what about a javascript console?

  9. Anonymous says:

    Well, it looks a LOT like Firefox’s webdeveloper and DOMInspector extensions.

    BTW, it would be good if the keyboard works while editing an element property. If you press backspace, home, end etc, IEDev sends the key to the navigator and not to the edit. Annoying.

    What about DOM tree manipulation? Like deleting nodes?

    And, finally, what about being able to edit CSS properties on-the-fly?

    best regards and keep the good work!

  10. Anonymous says:

    A wiki is not well suited for tracking bugs. Why don’t you put up a real bug reporting/tracking site? Or would it be too transperent?

  11. Anonymous says:

    The DOM inspector would be really awesome IF it updated in real time. I want to be able to click an "add element" button on the page, have it draw a new div via javascript, and be able to see it in the DOM inspector below. As it stands now, the dom inspector is fairly crippled, since you have to manually refresh it (why doesn’t F5 in an un-pinned DOM inspector refresh?), and it collapses the entire tree view when you do.

    Also, the Firefox javascript console is still 10,000x more useful than the "Error on Page" notification in the bottom left corner of IE.

  12. Anonymous says:

    So far I like it, after 15mins with it. The resize feature alone is worth the reboot IMHO. I run in 1280×1024 and this makes it nice and easy to see my developement on lower settings. The view DOM and the other various Views are also nice. Good work in my opinion. I’m still trying this tool out but so the only shortcoming is the views are cut short on the links.

  13. Anonymous says:

    If you keep up this level of good news after another, I’m gonna switch to IE later this year! I’m indeed happy to see and know about the progress being made – but unfortunately there’s still the history to deal with…

    However, a developer toolbar is indeed extremely important for us – when it has live CSS-editing. The rest (more or less) we easily get with FF already, so I sincerely hope you manage to implement it in the final version…

    I’m looking very much forward to IE7, and I’m looking really, REALLY much forward to IE8! -if you manage to keep the pace.

  14. Anonymous says:

    🙂 Very helpful – overall – will be interesting to watch how it evolves!

    The only minor flaw was the only resize option 800 X 600 – perhaps more options could be added

    Also, an option to "view source" for a SELECTION would be helpful (of course this tool exists in IE toys)

    This toolbar, could also be an option for the new Phishing filter tool

  15. Anonymous says:

    Hi !!

    I installed it on my XP as well on Vista; and it asked for reboot. After reboot XP started working back, but Vista after login it is showing the following error screen and upon clicking yes, returns back to LOGIN prompt. As could not able to capture image directly so, used remote desktop and you can find the error screen shot below:

    http://www.msvistablog.net/images/vistatest/ietool1.jpg

    Means, my VISTA OS is broke, and I cant do anything now as am not able to get into desktop after the install.

    But XP works great, and I tried few validation checks, and thats aweful work. As someone pointed, it will be nice if we get list of resolutions to try instead of just 800×600.

  16. Anonymous says:

    More info about VISTA install broke is here:

    http://www.msvistablog.net/comment.php?comment.news.45

    It will be nice if someone help me in the right direction inorder to get my vista back to working state; else only option is to reinstall it.

  17. Anonymous says:

    I’m glad to see this being developed. I’ve wanted a feature like this for IE for some time. The Web Accessibility Toolbar never met my needs. I’ve posted a preliminary review of the toolbar on my site: http://c82.net/article.php?ID=23 .

  18. Anonymous says:

    Not much new from Firefox but I still like it! The ruler tool is really cool!

    Any chance that you can avoid the freeze when clicking on "View->View class and id information"? When doing it on http://www.msn.se for example my IE freeze for almost 15 seconds :(. The same function have no effect here on IEBlog also. Checking the source tells me there are lots of class attributes but nothing is shown with the toolbar.

  19. Anonymous says:

    Why the ruler? That’s just going to encourage people to focus on their site looking exactly the same everywhere, which is exactly not the point of CSS or the web in general.

  20. Anonymous says:

    Thanks for giving me a demonstration of IE7 at PDC, Markus!

    This dev toolbar is great… 🙂

  21. Anonymous says:

    I applaud this move a lot! Yeah Firefox has had the Web Developer Toolbar extension by chris pederick at…

    http://chrispederick.com/work/firefox/webdeveloper/

    …but I agree this will help spread standards.

    Matt, CSS 2.1 isn’t a standard, CSS 2.0 is.

  22. Anonymous says:

    John – actually, neither CSS2.0 or 2.1 got to recommendation stage. CSS2.0 stopped at candidate recommendation and CSS2.1 got to CR before being dropped back to Working Draft for some alterations.

    To be picky, W3 isn’t a standards body so nothing they produce is a standard, merely a recommendation.

    MS should still be aiming to implement CSS2.1 though, 2.0 never reached recommendation stage because it was pretty much unimplementable fully. That’s why we have a 2.1 version.

  23. Anonymous says:

    Hey, the next thing you copy from Firefox…

  24. Anonymous says:

    Finally i can outline elements 🙂

    Whenever I click ‘Disable Images’ it resizes the window and doesn’t disable any images. I’m sure you’re already of this bug though.

  25. Anonymous says:

    The IE Developer Toolbar Beta has been released. It requires Windows XP or Windows Server 2003 and runs on IE 6. From the download site:

    The Microsoft Internet Explorer Developer Toolbar provides…

  26. Anonymous says:

    While I’ve been out with the birth of our first child (a beautiful baby boy) the IE team have released…

  27. Anonymous says:

    Just awesome. I love the tools thank you! Anyway to get color coded correctly formatted source view built in? You guys are really raising the bar on IE good work and keep it coming..

  28. Anonymous says:

    @Me, Tyler and Allen

    You are able to live edit properties (CSS and Microsoft only extensions). Just click on the little + sign after opening the DOM view and enter the property with value. You can also delete live entries with the – sign (click on the property you wan to delete first).

    — Markus

  29. Anonymous says:

    Markus, I think you misunderstood me. I want to be able to run code on my webpage that changes the DOM, and have the DOM view automatically reflect those updates, not the other way around.

    I put together a little example. go to this page: http://tylerkaraszewski.com/test.html

    and open up the DOM Explorer (expand the "body" element). Then click "add div". It adds a new div to the page, but it doesn’t show up in the DOM Explorer. It should.

  30. Anonymous says:

    This toolbar looks very useful. Of course, it’s a beta, and it still "feels" like a beta. Here are a few ideas for improving it:

    * the DLL should be signed

    * being able to edit the CSS rules (not simply the element styles) could be very useful

    * a "disable CSS" entry

    * the menu bar doesn’t behave like the usual IE menu bars (if you open a menu, then move the mouse cursor over another bar entry, the first menu stays open, instead of following the mouse)

    * I’d like to be able to remove the "DevToolBar" bar title, and to move the bar to the bottom of the window (this may not be specific to this toolbar), or to turn this bar into one menu entry, with submenus.

  31. Anonymous says:

    <p>I haven’t had a chance to have a good play with it yet, but there’s a developer toolbar for IE now – <a href="http://blogs.msdn.com/ie/archive/2005/09/16/469686.aspx" class="ExternalLink">http://blogs.msdn.com/ie/archive/2005/09/16/469686.aspx</a></p>

    <p>Most exciting thing to me seems to be the option to inspect the page’s DOM.</p>

  32. Anonymous says:

    Very nice tool, it was much needed, thanks!

    In the DOM explorer it could be useful an option to display the current values for _all_ the properties: now only the ones ‘different from some initial/default value’ (or something like that) are displayed, but this may be confusing.

    For example "display:inline" applied to a div is not displayed (could be ok, since inline is the ‘initial’ value for the display property.) But, as soon as a value for a margin is specified, the missing values are displayed as ‘auto’, which is not exactly correct. For example an element with "margin-top:10px; margin-bottom:10px" gets in the DOM explorer a line with "margin 20px auto." The initial value for margins is 0, not auto (an element really having in the CSS "margin: 20px auto" would be horizontally centered, while the one with unspecified horizontal margins is not.)

    Thanks again, and keep up the good work.

  33. Jie Ren says:

    The width of the toolbar seems fixed, which makes it somewhat inconvinient in resizing the toolbar (especially along with other toolbars.)

  34. Anonymous says:

    It’s nice, but the bug with the backspace in the DOM editor annoys me, and more Firefox Webdeveloper toolbar functions would be nice.

    Then I’ll never have to use again 😀 😀

  35. Anonymous says:

    in regards to Why a ruler? it’s just about enforcing a strict pixel-perfect layout. It can also be handy when tracking down box model bugs or possibly CSS inheritance rules that are making boxes larger than you expected.

    (I’m not sure why people complain so much about MS copying other people… who cares? My message to MS: copy what everybody else is doing…it’d make my life easier. I’d really rather not have different ways of accomplishing the same thing in every OS, browser, or app just to be original.)

  36. Anonymous says:

    Um, whoops… I mean to say "it’s NOT just about enforcing a strict pixel-perfect layout." 🙂

  37. Anonymous says:

    Good work!

    A couple of bugs/comments:

    – View Image Report crashes IE 6 every time.

    – Can the menus act like menus when pinned? Meaning, can I click on one and move over them all to see the contents of all the items, instead of clicking on one, clicking again to close it, and clicking yet again to open the next one?

    – Nitpick: View Class and Id Information -> View Class and ID Information

    – I couldn’t get Disable Images to work (again, in IE 6), at least on Google.

    – When I click on Show Read-Only Properties and Show Default Style Values, I want it to remember my selections until the end of time. I don’t want to have to click that every time I open IE.

    Some requests/suggestions:

    – Put DOM Explorer under the Tools menu. Having the menu in two places at once makes no sense, and 99% of the time developers testing on IE will have the DOM Explorer open. So just keep the menu contained to that. Plus, it makes more sense under Tools, don’t you think?

    – Can there be a View | Dimensions (width, height) option, for all elements? That would be extremely helpful. Perhaps only make it display for table cells, tables, and divs if those things are outlined. I don’t know.

    – Find an element by Tag could use an editable select list of all HTML tags, where you can either scroll through or type one.

    – Make Select Element By Click and Find Element big, square buttons in the upper-lefthand corner of the menu. Yes, like Firefox. Those will be the two most-used functions by far. It may seem like a small thing, but clicking a big button is much easier than hunting for a word and then clicking on a menu item. Pin and Show Ruler would probably be better as buttons as well, since they currently look like menu items (a bad habit in UI).

    – A JScript Object Properties viewer!

    – Make Attributes, Styles, and Object Properties a tabbed interface in the right pane, with the tabs at the top (under the menu).

    If nothing else, I’d like to see the last two suggestions be implemented. An object properties viewer would make my life infinitely easier whenever I’m doing any kind of complicated DHTML.

  38. Anonymous says:

    We’ve all be able to use the DOM Inspector in Firefox. Now the IE Team releases the Developer Tooolbar…

  39. Anonymous says:

    Firstly, one bug for IE6 XP Home SP2, is where selecting the ‘Disable Images’ option under ‘Disable’ will close down IE.

    Now, this may be to far out of scope for this toolbar, but having an option to open a page in tabs rendered as it would in older versions of IE would be a really handy addition.

    For example, being able to open up a page in three or four tabs, where by one tab is the current browser view, the second is IE 6, the third IE 5.5 and perhaps a forth for IE 5 would enable developers to easily compare what different IE users see, and adjust their sites accordingly.

    I know that such a tool option may not be possible, but I thought I’d at least suggest it, just in case could be a possibility, as I think it would really come in handy.

  40. Anonymous says:

    Thanks guys – really thanks!

    To the pedant who commented about "us" being able to use the FF DOM toolbar- Understand that they render differently – walking the DOM isn’t as useful in FF if you need to tweak for IE.

  41. Anonymous says:

    By Mark Harrison

    The IE Developer Toolbar was announced at PDC and provides several features for…

  42. Anonymous says:

    I thought of commenting on two bugs reported here… 🙂

    1. Chris said, "<i>IE6 XP Home SP2, is where selecting the ‘Disable Images’ option under ‘Disable’ will close down IE</i>" … I tested it under the same setup, and it does not close IE..actually the behavior, it closes the current Window and reopens a new Windows with disabled pictures. May be they can avoid the restart of IE here.. or in IE7, they might open in a new tab. But remember, the Disable images will be checked for every until you wanted to enable back.

    2. Mathew said "<i>View Image Report crashes IE 6 every time</i>". ….but it all seemed to work fine. I tested with http://www.msvistablog.net/news.php; and I got a nice report telling few img links that I have does not have alt specified

  43. Anonymous says:

    Needs:

    * Disable CSS (obvious omission)

    * UI more like standard windows behaviour, i.e. sticky menus.

  44. Anonymous says:

    Deu l&#225; no blog do time do Internet Explorer: a Microsoft disponibilizou para download a vers&#227;o beta de…

  45. Anonymous says:

    Deu l&#225; no blog do time do Internet Explorer: a Microsoft disponibilizou para download a vers&#227;o beta de…

  46. Anonymous says:

    Wow, without FireFox providing us with great tools, you guys would probably not release this. I think this is a nice attempt, and I’ll give it a whirl… but you guys have lost my trust a while ago.

    Seriously, you have billions upon billions of dollars and resources beyond any other company in the software industry. Why can’t you guys innovate on your own instead of reacting to a poorly funded group of open source guys with passion.

  47. Anonymous says:

    Deu l&#225; no blog do time do Internet Explorer: a Microsoft disponibilizou para download a vers&#227;o beta de…

  48. Anonymous says:

    Nice, very nice. But ‘disable CSS’ is missing… And i don’t like I can’t collapse this toolbar like others and make this small arrow on the right to dropdown invisible elements.

  49. Anonymous says:

    Hi!

    Nice tool indeed : )

    Would be great if it could be possible to know what line of code is used to define a given property when i select an element. Could this be added in a future release?

  50. Anonymous says:

    Nice – now fix your dang pages old DHTML Dude pages (have not looked at WebTeam pages, good chance they are screwed up also)

    You guys brought all the examples into the MSDN frame set, and in doing so ended up with a bunch of

    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dhtmltechcol/cols/dndude/samples/asteroids.asp

    (when gone to through – http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dhtmltechcol/cols/dndude/dude050399.asp )

    (good chunk of those are Massy’s work from five years ago)

  51. Anonymous says:

    Very good tool!

  52. Anonymous says:

    It’s good to see some more developer tools in MSIE. Doubly so given that they include validation.

    What I think would be a very interesting thing to see would be the option to render a page approximately as it would appear on different screen DPIs (by scaling distances, fonts, etc appropriately). I use a very high resolution display (120x120dpi) and find that many developers like to lock in pixel font sizes that are entirely unreadable. Giving them the ability to test readability at "virtual" 72, 96, 120dpi and 160dpi would be very helpful.

    This will probably matter even more when Longhorn comes out, if it respects and considers the reported screen DPI when calculating font sizes and physical distances, unlike earlier Windows OSes.

    Please help make web designers understand that `px’ is pure evil!

  53. Anonymous says:

    Great toolbar. I’ve been waiting for something like this ever since IE 6 came along and broke the Web Developer Accessories for IE 5. (Remember that anybody?)

    http://www.microsoft.com/windows/ie/previous/webaccess/webdevaccess.mspx

    It would be great if this new toolbar would include some of that old functionality, like right-clicking to see view specific source code.

  54. Anonymous says:

    Eindelijk een nuttige toolbar voor ontwikkelaars. De eerste beta van de Internet Explorer Developer Toolbar…

  55. Anonymous says:

    Very useful. I’ve been waiting for this. The DOM explorer exhibits a few funnies though. The web app that I am developing, dynamically manipulates the DOM. This usually causes the DOM explorer to be totally cleared rendering it useless until I restart the browser. If that got fixed, I’d find this a very useful tool.

  56. Anonymous says:

    +1 for Disable CSS.

    When outlineing could the nested elements be outlined in a different colour to the parent element?

  57. Anonymous says:

    Well as I use Firefox with web devloper toolbar for developing and testing and in IE I just check the IE bug hacks, I don’t need this at all.

  58. Anonymous says:

    Like it, it’s a good start.

    How about some links through to the relevant section in MSDN for a particular element on the page? That way, I could see all of the documentation etc for an element with a single click!

    A JavaScript console would be great.

    An event watch would be cool too.

    Have you seen webtool?

    http://www.iconico.com/webtool/

  59. Anonymous says:

    Really nice tool – I’ve been missing an IE equivalent to Firefox’ Web Developer Extension for a long time.

    One serious problem should however be fixed: The toolbar should not save state for "disable" options. If I choose "disable cookies" it should only affect the current browser session – otherwise it is easy to forget to reset these options when you want to browse "normally". Some kind of visual indication of a non standard configuration (such as disabled script or cookies) would also be nice.

    But for a first release, and still in beta, this toolbar is still a great tool.

    Thank’s for listening.

  60. Anonymous says:

    Great! I’ve installed it and like what I see so far. The only things that I would ask for as extra features would be a javascript debugger (though I guess that’s a whole new plugin on it’s own) and the ability to view the generated source for the page.

  61. Anonymous says:

    [It also will help you to validate against existing standards and provides pointers to W3C specs.]

    Which, of course, won’t make happy the IE bashers all the same (they just hate IE and will go on complaining all the same).

    And of course it won’t change the fact that 99.999 periodic% of the Internet documents (from yahoo to Cnn, from W3C contact websites -!- to websites of worldwide famous publishers of internet books, from Ebay to BBC, from ICANN to the United Nations, from Napster to Apache) are completely invalid under the merely formalistic W3C point of view, yielding a few hundreds of "errors" each (ah! you didn’t include the ALT property, but that’s in the specs! ah!) and yet are fully browsed and have been successfully used every day, dozens of millions of times a day, by all possible OS and browsing platforms every day, by all versions and subversions every day, for a decade, and by us all, without even realizing they were "W3C invalid" 🙂

    Have you forgotten to put the ALT tag in your image? It’s good for blind persons browsing, or for those who use Netscape 1.0beta. It’s in the specs lol 🙂

    Great tool, anyway, for those who love IE regardless of fixed layers "welcome to my page". Particularly the ruler idea.

  62. Anonymous says:

    [poorly funded group of open source guys with passion. ]

    Ah ah lol. Netscape and Sun as "poorly funded group of open source guys with passion" lol. Rated at the Nasdaq, but poor and with passion 🙂

    You won’t even have a freeware browser in the first place without Microsoft.

  63. Anonymous says:

    That’s freaking sweet. The ruler kicks booty…as do many of the other features. Some obvious welcome additions for final release would be live CSS editing and view selection source (I believe both have already been mentioned in earlier comments here), but overall this is great news, even if it does still feel a bit like a beta (quite understandable since it is ;).

    One other thing which would be nice to have is the option to open anything that shows up in a new window in a new background tab instead (e.g. commands under the Validate menu), utilizing both the MSN toolbar in IE6 and built-in tabbing functionality in IE7. And please make the View DOM button depressable (i.e. clicking it a 2nd time would hide the DOM Explorer).

    Good job, Carl, Mary, Barbara, Seth, Jeffrey and any others who worked on this.

  64. Anonymous says:

    Disable Images seems to need a little tweaking. It would be nicer if IE didn’t have to reopen the window to do toggle images, but if it does, please preserve the window mode. When I’m browsing with the IE window in maximized mode, it switches IE to normal window mode. Not only that, but when the window reopens with images supposedly disabled, they all still show up until I hit F5 to refresh. An option to disable Flash would also be very helpful.

  65. Anonymous says:

    An Internet Explorer developer toolbar was announced and released at PDC on Friday. I downloaded it an installed it. Alrhough I don’t use IE, I do make sure that designs I work on, display correctly in it. This seems like…

  66. Anonymous says:

    Glad to see MSFT IE join the 21st century!

    One, *REALY BIG* ommision. Where are the options to adjust FORM ELEMENTS? e.g. show the hidden fields, make readonly fields editable, etc.

    PS Not sure how it (the toolbar, etc.) looks in XP/Vista, but it is real ugly on Win2k/IE6.

  67. Anonymous says:

    Probably you don’t know about my programm: PageSpy.

    There are many features are you taking about: http://www.sembel.net/

  68. Anonymous says:

    Great job guys! The Firefox WebDev toolbar was one of the primary reasons I started using Firefox. I’m glad to see IE finally catching up.

  69. Anonymous says:

    Awesome! Thanks!

  70. Anonymous says:

    Very nice to see a tool like this for web developers. It has a rather impressive set of features to start.

    Some possible things to add:

    – Ability to move the Dom Explorer to the left side or right side of the window (not just bottom)

    – Node information and Style information could become two tabs and possibly be made more compact. (there’s quite a bit of whitespace)

    – A way to list all: Scripts, IFrames, Links, Images, Forms, etc…

    – Better DHTML support:

    a. ability to view script source (for inline scripts as well). Debugbar (http://www.debugbar.com) has a really nice way of handling this.

    b. JavaScript Console would totally rock. Especially if there would be some way to send debug messages to it.

    c. Ability to view DHTML properties (for people who work with JavaScript and DHTML) would save so much time coding and figuring things out.

    Thanks for a great toolbar. I hope more great stuff will come with later releases.

  71. Anonymous says:

    Jim: The "right-click to view source" option in the IE5 Web Accessories still works in IE7, or you can get that and other features in a pack of IEToys. See http://www.bayden.com/ietoys/

  72. Anonymous says:

    I must say that I take extreme issue with Microsoft’s use of the word “quickly” in the description of this toolbar. My initial tests of the toolbar proved it to be in fact very slow. Not only was it slow, but it actually crashed Internet Explorer on several tests. These weren’t very difficult tests either, by the way.

    The final test, and the straw that broke the camels back: Both this toolbar and Firefox’s toolbar feature an option to resize the browser window to 800×600. In IE’s toolbar, if your screen resolution is set higher than 800×600 and if your browser window is maximized before you toggle this option, the window will be resized but will still think it is maximized, meaning you can’t drag the corners to resize and the top-right window icon still shows the window as being maximized. In order to “reset” the window you have to first click the “restore” icon (middle of the top-right three icons on any maximized window) at which point the window will be restored to it’s pre-resized-pre-maximized size… confused? I was too.

  73. Anonymous says:

    The developer toolbar is a good start in helping developers deal with some every-day issues. However IE developers could definitely benefit from some enhanced Javascript debugging capabilities.

    The free MS Script Debugger is too clumsy to be of any real use, and not everyone can afford to buy Visual Studio to debug their JavaScript. Alerts get tedious as well.

    If Microsoft were to make the functionality of it’s Visual Studio script debugger available outside of Visual Studio it would definitely be a boon to anyone who wants to develop more complex web apps on IE.

  74. Anonymous says:

    View Image Report does crash IE6, as Matthew said, or at least it did so for me.

    The ruler’s Snap to Element feature worked great on a relatively simple page, but on a page with four frames (including nested frames) and the DOM viewer open, it stopped outlining the elements I was hovering over.

    The DOM viewer’s Find > Select element by click… feature also became unreliable after a time. It seems to have trouble with frames.

    All in all, a great tool and very impressive for a beta. The pixel ruler is not just for fixed, px-perfect layouts, but also gives a developer insight into why a page is being layed out the way it is. I’ve already used the toolbar to figure out which element was the troublemaker that was causing unwanted horizontal scroll in a webapp I’m working on.

    Thanks!

  75. Anonymous says:

    A nicely designed tool.

    For features the following come to mind:

    1) Show DOM nodes in lower case AND MAYBE in the case of the source page.

    2) Ability to strap in another local validator (like CSE), and hide links to the existing (web based) ones.

  76. Anonymous says:

    AND

    3) A resize option, back to original setup is important.

  77. Anonymous says:

    The new toolbar looks good. The only thing it is missing for me is an option to look at the http headers for a given page. This is very helpfull if you are doing changes on the server side of things.

  78. Anonymous says:

    @Jason Remillard: Fiddler (mentioned in the post) does this, and much more.

  79. Anonymous says:

    Looked great when I installed it. Unfortunately, after it crashed a few times (and of course brought down IE) I had to uninstall it. Any known problems using the toolbar on XP SP2, IE6 with MSN toolbar & tabs?

  80. Anonymous says:

    Well, it seams like it changes the settings of trusted sites. When i installed it, all my trusted sites suddenly didnt accept cookies anymore. Worked when i removed the sites from trusted sites. Dunno if it has anything to do with the toolbar, but happens just after i installed it.

    When i uninstalled it, it seams like it removed some of the file type extensions registered to IE (eg. xml).

    Anyone else have had this problem ?

  81. Anonymous says:

    Great tool! I love the ruler.

    It would be great to have eyedropper/colorpicker tool included too.

  82. Anonymous says:

    I am a software engineer from India.

    Now for this tool,

    Great Tool !

    Though the documentation said that it requires Windows XP or more, but I have tested it with Windows 2000 SP4 and IE6.

    And you guys wont believe it, it worked too fine here.

    Even that Image report was also not crashing.

    Great Great Tool !

    My 5* for this.

  83. Anonymous says:

    Great comments and suggestions, everyone! I’m looking into the reported issues and hope to get some answers and fixes.

  84. Anonymous says:

    What I like about the toolbar:

    1. Doesn’t take up too much space, and no ugly icons.

    2. Outlining elements doesn’t break the layout.

    3. The ruler is very nice.

    4. The DOM is nice.

    What I don’t like about the toolbar:

    1. It crashed when using 50% of the features.

    2. There’s no CSS tools.

    3. The interface in IE is so bad that sometimes a toolbar will be right where I want it to be, but when I close and open IE again the toolbars will be so messed up it’s not even funny.

    4. The tooltips in the DOM just don’t feel right. There should also be an option to open the DOM in a seperate window.

    5. And it’s "missing" a lot of features compared to the Firefox toolbar.

  85. Anonymous says:

    Been looking for something like this for a very long time. The only missing thing is to be able to edit style sheet properties on the fly.

    You can edit element attributes on the fly, but i want to also experiment and see what style sheets really do.

  86. Anonymous says:

    Tjerk:

    Should be in Control Panel | Add Remove Programs

  87. Anonymous says:

    Fire Fox copied it from micrososft – Micrsoft had it all the way back in 2001

    http://www.microsoft.com/windows/ie/previous/webaccess/webdevaccess.mspx

    (Well if it works for the mackos…)

  88. Anonymous says:

    Overall I really like the developer toolbar, but find the ruler tool difficult to use. As others have mentioned, I too would suggest more of a "box" type ruler, similar to that in the FF Dev toolbar.

  89. Anonymous says:

    Great job. This is a wonderful tool. In particular, the ability to "Select Element by Click" is very nice, and being able to interactively update CSS styles and other element attributes is extremely useful.

    When enabling such View options as "View Link Paths", it would be helpful to be able to cut-and-paste the values displayed on the page.

    I would love to see HTTP header logging and ECMAScript event tracing included as future enhancements.

    Thanks again for this great utility.

  90. Anonymous says:

    When the Developer Toolbar is active, and from an IE window I open a new window where my Java applet is running, and then I close that new window, IE crashes. Can you check?

    Please contact me at splintor@gmail.com.

  91. Anonymous says:

    I installed the toolbar but it’s not showing up in IE even after two reboots. I checked under View > Toolbars and it’s not there. Is it a security setting that’s causing this? I’ve got it working on one system at home but not my work PC. Your help is appreciated. Thanks 🙂

  92. Anonymous says:

    Can we get an update on the progress of the toolbar? It has been quite useful so far, but the more I use it the less it works. In fact I don’t think it really works at all any more.

    Firefox’s toolbar is easily far more superior and advanced than the IE version. I know it’s beta, but betas have updates and bug fixes too.

  93. Anonymous says:

    Hey,

    Had an issue installing – couldn’t see the toolbar even after a reboot and r-clicking on toolbar to select…

    This thing breaks *all* the time! Crashing IE. Poke around on slashdot’s page for a little way and watch it blow up. Poke around on a IE-friendly site (MSN) and sooner or later it’s done…I haven’t been able to provide full repro steps but it usually accompanies drilling down through the DOM…may not want to offer these interns jobs yet. 😉

    I think we should be able to modify any css attribute – why not?

    I like the idea of clearing any outlines currently in affect (reset option).

    I would appreciate the ability to grab the source of a subset of the page, say highlight a div that I’m interested in and then click a view element’s source button to grab that element (and all children, etc) html.

    I like the idea of being able to add elements to the DOM dynamically.

    Javascript console integrated?

    The view image report is handy when/if it works. I submitted a post (when IE7 Beta dropped) asking for this funcitonality and I’m very glad that it looks like it’ll be in the final version of this thing. One question, though, why won’t it be baked in? Why make it a toolbar? Why not just give the user the option to activate it or not? Thanks!

    Firefox’s Toolbar doesn’t look as powerful (ruler, image-report et. all) but darn it – it doesn’t crash IE on a regular basis! Yes, I know this is a BETA but haven’t you guys heard of modular development? Get one thing to work *solid* and then add from there? Why release something this unstable even as a BETA? To get feedback on feature set? To build hype? Is Marketing/Management pushing you to? Tell them to back the f*ck off and let you release "when it’s ready" as Bill/Steve/Jim would say. Otherwise – good work – this has been missing for an extremely *long* time. I’ll have to check out 3rd party tools now that my appetite’s been stimulated.

  94. Anonymous says:

    Another bug – it doesn’t work with framesets.

  95. Anonymous says:

    <ctrl> – r should not bring the ruler up ! I have been using it for too long to refresh pages ! If there is a way to change it in the interface i cannot see it.

    On my companies web application the outline views fall to pieces under the weight of objects (am running ie. 7 on windows xp tablet 2005 / .Net 2(PC is sonoma 1.8ghz/ 2gb Ram)

    A great first start !

  96. Anonymous says:

    Thank you for wonderful software.

    The Web development makes progress by this software.

    However, I think it is better when not corresponding to Japanese

    corresponds.

    thank you.

    naka@wankuma.com

  97. Anonymous says:

    Ability to add/change URL’s for validators would be a nice improvement, e.g. would allow adding ATRC’s Web Accessibility Checker which checks for WCAG 2.0 guidelines

  98. Anonymous says:

    Today I installed Microsoft Script Debugger and the IE Developer Toolbar. I have problems with both.

    I experienced "Not Responding" when trying to single step (by clicking in Script Debugger), and in a couple other cases, even for very very simple html pages. Script Debugger seemed light on features anyway. With the problems, I’ve lost interest in it.

    Developer Toolbar looks very good, but a couple things are very annoying. We use frames in our UI.

    (a) The Find (by click) option is cool but the tracking on the page is off. I have to click above the actual object by about an inch. It’s as if the top frame throws off the tracking.

    (b) We have a refresh built in the page (I know, bad practice). This causes the DOM window to refresh whenever I change the page refreshes. Unfortunately, it unexpands the tree so I can’t see the lower level structure, so I do this over and over (yes, I can disable the refresh to work around this.

    I’m now off to try with Firefox and the tools mentioned. Fix the above and I would not have even gone off to look at Firefox for this. Thanks!

    Alan

    alan _at_ carwiles _dot_ com

  99. Anonymous says:

    I hope you don’t think about releasing IE7 without a Javascript console. Not only that, but please actually report the right file, and script debugger sometimes wouldn’t pick up an error. Your errors on IE6 told us there was an error on the wrong page, and then you have to just guess which of the 60 javascript files on the portal page actually had the error. 3/4 of the time I can track the error down by using Firefox, but when the error is IE-only, then we basically are reduced to intelligent guessing if the Script debugger, or throwing in a million alerts. This is no way to do web development. If you don’t fix this, web developers will think you don’t really care about us and just pretend to. Security is important, but supporting web developers is equally important. You make my job very hard.

  100. Anonymous says:

    Great tool! One comment: find element by Class needs support for elements belonging to more than one class. For example, I may have a bunch of divs with class="product" and some may have class="product outofstock" or class="product new" or class="product onsale" or class="product discontinued". How can I use find element by Class to get find all products? It should find all elements that BELONG to the class entered, not just those elements that MATCH the class entered, since elements can belong to more than one class.

  101. Anonymous says:

    Found out the issue: I’d unchecked the "Enable third-party browser extensions" under Tools > Internet Options > Advanced.

  102. Anonymous says:

    I have a feature request. The thing is, after you have outlined several elements, then you might want to see the page without the outlines. But you have to go and untick every item you have highlighted. A "Remove outline" button that cancel all previous outlining would be nice.

    (I know that you can refresh to reset the whole lot, but sometimes you don’t want to reset the whole lot, but only remove the outlining.)

  103. Anonymous says:

    Great tool…..

    1) Can you please add one more link to check the http headers.

    2)I am getting a Javascript Error on trying to view cookie information.

    Misc > view cookie information.

    Thanks !!

  104. Anonymous says:

    "WOW! It must have been fun for you guys to be abolutely unoriginal for the umpteenth time. Here’s hoping you cited Chris Pederick in your documentation, your superiors are ignorant enough to believe this is your own concept, and you dole out some of your budget to support Open Source projects like this one – b/c when you get down to it: You’ve effectively rebranded the handiwork of someone else. "

    Why is it people have this idea that if feature X is already in Firefox, then it should not be in IE? If Firefox has some great feature, I WANT Microsoft to add it to IE… I mean think about it logically… Ford put brakes in its cars, so Chevy shouldn’t becayse that would be "absolutely unoriginal"? I really don’t care how original it is, when I’m going down a hill, I want to be able to stop my car! I don’t want Microsoft to say, "lets throw out everyone else’s great ideas, and only do our own ideas," if that’s the case, I, and I assume many others, would switch to Firefox. I want Microsoft to add all the great features of other browsers, plus new ones – and I think that’s exactly what they are doing.

  105. Anonymous says:

    While I’m not one to hate IE, and very much applaud seeing IE7 coming around, and the great addition of this toolbar (a much needed tool to figure out what the heck IE is doing when it renders CSS).

    I must remind people, that thanks to alternative browsers and inspiration like the Web Developer Firefox extension, microsoft is off their ass and actually improving their browser.

    Please don’t take this as bashing, I just want it to be remembered that the IE team was disbaned (pretty much 4 years without much improvment) and has only been put together now that there is a threat. I applaud MS for doing this, however there is no need for bashing Firefox or other alt. browsers when it’s the contrary, you should be happy ms is ‘competing’ in this arena again, as it means good sftuff for all of us!

  106. Anonymous says:

    I liked the "view DOM".

    Can one of the programmers be kind enough to post here how u show the content (linked) of IFRAME ?

    I’ve tried (when handling OnDocumentComplete):

    1)====

    ….

    CComQIPtr<IHTMLFrameBase2> spFrame;

    CComQIPtr<IHTMLWindow2> spWindow2;

    ….

    spFrame->get_contentWindow(&spWindow2);

    spWindow2->get_document(&spDocInsideFrame);

    2)====

    and also KB 196340

    but it doesnt work.

    yep. I know it’s not groups.google.com here,

    but it worked for you guys.

    Thanks !!

  107. Anonymous says:

    WOW! It must have been fun for you guys to be abolutely unoriginal for the umpteenth time. Here’s hoping you cited Chris Pederick in your documentation, your superiors are ignorant enough to believe this is your own concept, and you dole out some of your budget to support Open Source projects like this one – b/c when you get down to it: You’ve effectively rebranded the handiwork of someone else.

    Thanks for continuing to be such a wild bunch of plagiarists

  108. Anonymous says:

    DOM inspector has problems showing contents of IFrames from a different domain (JavaScript security?).

  109. Anonymous says:

    Awesome; Very helpfull tool.

  110. Anonymous says:

    How can I uninstall the toolbar? I can not find it in the remove toolbar-tool.

    Sorry, since I installed, my Explorer became unstable.

  111. Anonymous says:

    I installed Developer Toolbar and it shows up on my toolbars list in IE6.

    Problem is nothing happens when I click on it. Doesn’t even add the checkmark.

    Anyone know what I am doing wrong?

  112. Anonymous says:

    There are a ton of feature requests in this thread which I agree would be great to have, but I’d like to third the request for a color picker. In order to get color values currently, I often find myself screenshotting IE and pasting into Photoshop, or looking through code.

  113. Jeff Parker says:

    Ohhhhh this is awsome, great great great, thanks you, thank you, thank you.

    Like other people the view image report, didn’t crash me but gave me an error, this page has malformed html which may prevent it from viewing properly. click ok and it shows up.

    I also fired this up on a fresh VPC Windows Server 2000 where I do my VS for web development (never install beta on production machine) with up to date IE 6 when you first turn the toolbar on it seems to cover the address bar, didn’t like that all too much but I could live with it for what this lets me do.

    Everything on it was awsome. I agree would be nice maybe a color picker tool. Too many nice things about it to mention. The ruler tool is great the prevents me from starting to develop a site layout from scratch. with a grid like background anymore. Another bug, but it is an IE bug which I hope you guys are fixing. when displaying the dom and id tags and stuff on the page. If you have Select boxes on the page they come over the top of the text so you can’t read it.

    Another minor want, the validator. When developing on a VPC sometime you just set up your own DNS on your machine or you just point to your local IP address. Well when you try to validate the w3c validator can not reach you. I know they have some upload options and copy and paste text options. Those might be better to use.

  114. Anonymous says:

    Us Firefox developers have been validating our code for awhile now