IE8

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.

IE Developer Tools

The main components of the interface are the menu bar and tabbed dialog below.

Toolbar

 

HTML tab

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.  Style optionStyles 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.

Trace Styles 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.

Layout view Attributes View

 

CSS tab

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.

CSS tab

 

Script tab

The script tab is the JavaScript debugger, providing options to set breakpoints, view local and watch variables, and examine the call stack.  When you start the debugger, the IE8 tools run as a separate window, so the tools panel will undock from the page and the current page will refresh before debugging ensues.

Script tab

 

Profiler tab

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. Profiler tab

 

Menu bar

There are some great hidden nuggets on the menu bar as well.  The right side of the bar (not pictured below) shows the Browser and Document mode, something we covered in Weeks 2 and 3.

 

Menu bar

 

File

  • Undo changes
  • Configure the editor for source view

Find

  • 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

Disable

Turns off one or more of the following features on the page

    • Script
    • Pop-up blocker
    • CSS

View

  • Class and ID Information – superimpose this information on the page

Class and ID information

  • Link Paths – provide overlay like above for links
  • Link Report – provide a separate report page containing alll the links on the page

Link report 

  • 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

Outline

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.

Outline view

Images

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:

Image report

Cache

Cookie reportProvides 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.

 

 

Tools

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.

Ruler

Color picker

 

Validate

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.

CSS Validation report

 

More information

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.