IE Developer Toolbar Beta 3... What?

I've just noticed that a new beta version of the Internet Explorer Developer Toolbar is available! Not yet final but I like this Web Developer tool. No more toolbar menu in IE but a shortcut button instead, which open the bottom panel, the menu is inside this one now (but I think toolbar will be back again soon, or at least as an option).
Despite all the cool things in it I advise people NOT to install this version as it is far for stable and some features simply crash.
If you still want to try it, don't forget to uninstall previous beta versions.

What's new?
Still in beta but it comes with enhancements over previous versions, including:

  • Style Tracer: Right mouse click on a style value for an element and select Style Tracer to find the style rule that is effecting that value.
  • CSS Selector Matches: View a report of all style rules set and how many times they are used on the current page.
  • View Source: View the formatted and syntax colored source of the original page, currently rendered page, element or element with the styles that are effecting it.


What is it?
In case you don't know this IE extension, here is the official description:

"The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages. This version is a preview release and behavior may change in the final release."

What's cool?
It works with Windows Vista and IE7 (and XP/IE6 too) and add lot's of great features :

  • Explore and modify the document object model (DOM) of a Web page.
  • Locate and select specific elements on a Web page through a variety of techniques.
  • Selectively disable Internet Explorer settings.
  • View HTML object class names, ID's, and details such as link paths, tab index values, and access keys.
  • Outline tables, table cells, images, or selected tags.
  • Validate HTML, CSS, WAI, and RSS Web feed links.
  • Display image dimensions, file sizes, path information, and alternate (ALT) text.
  • Immediately resize the browser window to a new resolution.
  • Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
  • Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
  • Display a fully featured design ruler to help accurately align and measure objects on your pages.
  • Find the style rules used to set specific style values on an element.
  • View the formatted and syntax colored source of HTML and CSS.


Where is it?
You can download this free tool there : 
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en


What's next?
Words from the Microsoft team : "There’s lots more we hope to provide for the developer toolbar in future versions and all your ideas are welcome."
For me the killer feature would be a live CSS replacement panel, like the one in Firefox Web Developer Toolbar, with it you can edit your CSS on-the-fly without the need to edit/save/reload/repeat.
Also a javascript console like the one in Firefox would be welcome.
If you too have feedback or suggestions go to the Developer Toolbar Wiki on Channel 9 :
http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerDevToolbar

Can't wait for the final release!

2 Comments

  • Mozilla's Web Developer Toolbar also had a recent upgrade, and FWIW, the IE toolbar pales in comparison.

  • If you have stability problems make sure you have removed all previous versions of the toolbar. I'd recommend removing all (3rd beta first) and starting afresh. Also make sure you don't have any other uneeded plugins installed and running that could be interfering.

    Also I've been using both Mozilla dev toolbar and the IE one (we support both), and I'd say they were pretty comparable; though I quite like the IE DOM view.

Comments have been disabled for this content.