Well, it’s week 8 and we’re talking about IE 8, so it seems fitting to wrap up this series here. The one major feature we haven’t covered in all that much detail is the IE8 Developer Tools, which are included with IE8 on every client installation.
The tools are accessible from the Tools menu (imagine that) or via the F12 key. You can dock the tool interface to the bottom of the IE window, or float it as a window in and of itself.
Here are the tools brought up while viewing the IE8 Readiness Toolkit site.
The main components of the interface are the menu bar and tabbed dialog below.
By default, the HTML tab is selected, and you’ll see a hierarchical display of the page layout on the right. If you select an element in that tree view, the Style option on the right will depict the styles applied to that element, via CSS or in-line attributes. The neat part about this display is that it tells you what styles are actually in force and where they originate. Styles that have been overridden are included, but noted in strikeout font, so you can see which style ‘won’ to be applied to the given element. These options are editable as well, so you can experiment with the values – change the color for instance or uncheck a setting so that it no longer participates in the layout calculations. Any changes you make will be reflected in the page you’re viewing in the browser; of course, these aren’t written back to the server, so you won’t be making any changes permanently. You can, however, save the changes locally if you want to eventually pull them into your production code.
The Trace Styles option (see image to the left) provides an inverted view of the applied styles and more easily allows you to focus on a given attribute to see which styles contributed to its final value.
Layout provides a pictorial view of the various margin, padding, border and offset values (and is also editable). The Attributes view is a simple property grid allowing you to modify the attribute values for the selected element.
The CSS tab offers another view of the CSS in your page, this time based on the location of the CSS whether it be from external files or in-line.
With the Profiler tab you can get a feel for where your client side scripts are spending most of their time executing. You can view the time spent in each routine and the number of times it’s invoked either by function or as a call tree.
- Undo changes
- Configure the editor for source view
- Select element by click (Ctrl+B)
Want to quickly find the markup in the HTML view responsible for rendering an element? Select this option, then click on the page on the desired element, and the HTML view will jump to the appropriate place. This is one of the most useful features in my opinion, since I’m always wondering “how’d they do that” on pages I visit. Keep in mind though that this option does not stick, so you need to select it each time you want to investigate a page element
Turns off one or more of the following features on the page
- Pop-up blocker
- Class and ID Information – superimpose this information on the page
- Link Paths – provide overlay like above for links
- Link Report – provide a separate report page containing alll the links on the page
- Tab Indexes – provide overlay showing tab indexes
- Access Keys – provide overlay showing access or accelerator keys
- Source – provide options to view source for page or given element
This menu has a number of options for outlining various elements of the page, including DIVs, tables, cells, images, or any other content you’re interested in. Below is a segment of the page with DIVs and images highlighted. Notice the color-coded bounding rectangles delimiting the various elements.
Includes a number of options for overlaying image attributes, including
- Disable Images
- Show Image Dimensions
- Show Image File Sizes
- Show Image Paths
- View Alt Text
It also has an option to provide a report of all images on the page:
Provides options to clear the browser cache completely, or just for the current domain, and likewise for cookies.
A cookie view page is also provided, analogous to the image and link reports shown above.
Provides options to quickly resize the window to common resolutions (800x600, 1024x768, 1280x768, 1280x1024) and custom settings.
Two tools, a ruler and color picker, are also available. The color picker has eye-dropper functionality to grab the color from the hotspot on the page, but the screen capture utility I’m using wasn’t able to capture the dropper in the image below.
Use this option to submit your page to various validation services. The HTML, CSS, and Link options are submitted to w3.org, and the Feeds option is submitted to feedvalidator.org. You can also validate your page for accessibility against Section 508 and the WCAG checklist, services provided by contentquality.com.
Below is the result of CSS validation on the Microsoft page we’ve been looking at.
The IE8 Developer Tools pack a lot of capabilities, and they’re always available both for helping you with your own site and learning how things work on other sites… after all, imitation is the sincerest form of flattery!
The IE Blog is a great resource for information on the new features of IE8, including this post on the Developer Tools. Channel 9 also has an interview with John Hrvatin of the IE Team specifically on the IE8 Developer Tools.
Finally, you can access the MSDN documentation here.