We’re happy to announce the availability of a new beta of the IE Developer Toolbar. Along with all the features available previously this release contains some new features to improve the usability and help web designers troubleshoot issues on their pages.
User Interface Update. You’ll notice some changes to the user interface. There is now a single button on the IE command bar that allows the user to quickly toggle on and off the bottom panel which then gives easy access to all the features. After discussions with a number of web developers we decided that having the menus only available in the bottom panel made sense for most scenarios, so the toolbar at the top has been removed to avoid duplication of commands and the loss of screen real estate that entails. We’ve also slightly reorganized the menus for the panel to make it easier to find functionality.
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.
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.
We appreciate feedback on this latest beta both here and on the wiki on channel 9. One issue we are aware of is that it is necessary to logoff and then logon on Windows Vista for the toolbar to become functional, we expect to address that in a future update.
There’s lots more we hope to provide for the developer toolbar in future versions and all your ideas are welcome.
Senior Program Manager
Edit: January 12, 2007
We’ve just refreshed the download of the toolbar to address the issue some people were seeing where the Style Tracer was not working. If you have an earlier version installed, please uninstall and download the latest version. We really appreciate your feedback so far. Thanks – Dave