If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Microsoft has announced the latest beta (I am getting tired of that word) release of the IE Developer Toolbar.

There is an update to the user interface with a single On/Off toggle button that lets you quickly toggle on and off the bottom panel which gives you access to all the features.

A few excerpts from the post over on IEBlog:

Developer Toolbar Menu

There is now quick access to the most commonly used features through toolbar buttons at the left for “Select Element by Click”, “Refresh”, “Clear Browser Cache” and “View Element Source” (a new feature we’ll get to shortly. “Select Element by Click” is possibly the most commonly used function allowing you to hover over the page and select an element and this was previously under a menu.

Style Tracer

A useful new feature is the style tracer which allows you to locate exactly where and in which style sheet a rule is set that is effecting a particular element. In the screenshot below you can see that we have selected an element and the current style of the element shows that the font size is 11px.

Developer Toolbar Style Trace

One of the challenges when troubleshooting web pages is finding exactly where in the style hierarchy that font size has been set. With this version of the IE Developer toolbar we can now right click on the current style being displayed and select “Trace Style” which will then bring up the window in the screenshot below with the source of the style sheet and highlighting the rule that is in this case specifying that TD elements have a font size of 11px.

…

You’ll also find an option off the View menu for “CSS Selector Matches”. This will result in a window appearing that reports on all the CSS rules defined along with how many times they have effect on the page. This can be useful if you wish to optimize your style sheets so that only the rules that are needed are actually defined.

View Source

Another new feature is the ability to view the source of the original page, currently rendered version of the page or the selected element from the View menu. You can also choose to view the source of the selected element combined with the styles that currently are affecting it. In the screenshot below you can see that the source for the element we highlighted previously has been combined with the style rules that affect it so that you can save the source and recreate just that portion of the page.

…

You’ll see that the source in these windows is colored for the syntax. In the installation directory for the toolbar at Program FilesMicrosoftInternet Explorer Developer Toolbar you’ll find a vs_styles.css files where you can edit the values for the colors if you wish to adjust them.