Internet Explorer Developer Toolbar

I always enjoyed using Chris Pederick's Web Developer Extension when working with web pages on Firefox, and I have always hoped for something similar on Internet Explorer, as in this inperfect world, web developers do need to bow down to some of those inferior but more popular browsers out there. However, my dream has turned out to come true -- IE team at MSFT released Internet Explorer Developer Toolbar Beta a couple days of ago, and it has made web development on MSIE much more bearable.

Chris reckoned that it is a useful ripoff of Web Developer Extension, which I agree completely. However, I am more overjoyed than getting annoyed as I am getting paid to develop web applications running MSIE whole day. What features then, does it have?

  • Explore and modify the document object model (DOM) of a web page.

    Developer toolbar comes with a DOM explorer that looks very similar to Mozilla's DOM Inspector extension, but also displays IE's read-only attributes and current styles on selected element. It is "pinned" to the bottom of the webpage by default, but can be "unpinned" to a separate window.

    While it can add/remove attributes from DOM elements, but that's about it. No cutting and pasting DOM elements around the tree. No manipulating text nodes.

    DOM explorer

  • Locate and select specific elements on a web page through a variety of techniques.

    You can certainly locate elements in DOM tree by clicking on it in the page.

  • Selectively disable Internet Explorer settings.

    You can disable cache, images, cookies, scripts or popup blocker -- all from one convenient location.

  • View HTML object class names, ID's, and details such as link paths, tab index values, and access keys.

    When those features got turned on, translucent rectangles in various distracting colours got overlayed on top of their corresponding elements, displaying related information.

  • Outline tables, table cells, images, or selected tags.

    It also supports outlining "any" tag, i.e. customised tags other than DIV or IMG or TD. However the number of colours are limited (not that I need a zillion of them). I actually like to be able to outline all elements matching an XPath expression, but neither IE Developer Toolbar nor Firefox Web Developer Extension supports it.

  • Validate HTML, CSS, WAI, and RSS web feed links.

    It basically sends all validation job to W3C's Validator Service. I actually would like to have something similar to HTML Validator for Firefox which employing Tidy so everything can be done without network access.

    But I guess the biggest issue is, that a validated XHTML document does not imply that it would display properly under MSIE. Maybe IE7? Possibly later.

  • Display image dimensions, file sizes, path information, and alternate (ALT) text.

    Again, as rectangular overlays on top of images.

  • Immediately resize the browser window to 800x600 or a custom size.

    Useful to make sure your sites still works for those almost-blind users on 19" monitor setting resolution at 800x600.

  • Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.

    Again, useful functions in convenient places. I need to refresh JS files so often and it really saves me time, from doing "Tools" -> "Internet Options" -&t; "Delete Files" blah blah...

  • Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.

    Hard coded favourite links. That's all.

  • Display a fully featured design ruler to help accurately align objects on your pages.

    Now that's something I really like to have in Web Developer Extension. It lets you draw a ruler from two given points on your page canvas, and show you the position and dimension in real time. Very useful if you are trying to be pixel perfect.

    Ruler

    Once the ruler has been drawn, you can still modify it by dragging its end-points. Hold Ctrl allows you to draw multiple rulers, and hold Shift will force the ruler to snap to X/Y axis.

It is still in "beta" and there is still room for improvement. Microsoft, please copy features from Web Developer Extension and Web Accessibility Toolbar like how you have copied features from Mozilla and Mac OS X! Meanwhile, "well done"!