IE8 This is a follow up post for a talk I recently gave at the The Ajax Experience conference in Boston about using the developer tools included with Internet Explorer 8.

Want to see the tools in action?  I have a screencast on Internet Explorer 8 from a dev perspective on Channel 9. I also cover new features and compatibility, but skip to 24:30 for just the developer tools:

IE8 Screencast

Getting Started with the Developer Tools

Simple enough! In IE8, hit F12 or choose Tools-> Developer Tools to start.

DevTools

Window Options You can either run the tools in browser or press the double window icon at top right to detach for a second monitor or to use side by side with the browser.

The tools offer a full menu and four tabbed sections of features: HTML, CSS, Script, and Profiler.

Working with HTML and CSS

The first tab (HTML) gives access to inspecting the structure of the page, selecting and searching elements and HTML, modifying values, saving locally-made changes, and more.  Tip: click the button that looks like a mouse pointer to quickly select a page element (or press CTRL+B).

The right-hand pane shows a per-element CSS summary (Style) and hierarchy/trace (Trace Styles), offers a visual layout tool, and a way to set custom attributes.  Tip: Trace Styles is particularly effective way to diagnose style inheritance issues (e.g. “why is that text red!?”).

Layout Mode

The second tab (CSS), displays current CSS classes and styles, allowing you to view specific CSS files in use by the page, make changes, and search.

CSS

For details, see Debugging HTML and CSS with the Developer Tools on MSDN.

Debugging Script

The Script tab lets you work with script, setting breakpoints, debugging through code and breaking on errors. 

To debug, just set any breakpoints you need (you can choose other files using the drop-down list) then press “Start Debugging”.  You can also enable Break on Error mode (CTRL + Shift + E).  Once at a breakpoint, step into/through with the buttons or F10, F11, and Shift+F11.

Debugging

There’s a console in the right-hand pane which supports Console.Log/Warn/Info/Error output from your script.  The console also supports direct script execution.  Tip: this is a great place to learn/test commands from various Ajax and Javascript libraries. 

The pane also lets you view breakpoints, local and watch variables, and the call stack.

See Debugging Script with the Developer Tools for more.

Profiling Script

One of the most useful features is the ability to analyze code to measure it’s performance.  Just select the fourth tab (Profiler) and click “Start Profiling”.  Use the part(s) of the application you’d like to analyze, then click “Stop Profiling”.

Profiling

You’ll see a summary report showing functions, how many times they were called (Count), timing.  Inclusive time is the function plus any called functions, and exclusive time is that function only.  Tip: there are other columns as well (% time, min/max time, etc.), but by default they’re collapsed, so click between column headers to expand them.

Use the Current View drop-down to switch between a list of functions or a call tree view.

You can also click the “Export Data” button to save the profiling report externally (e.g. to load into Excel).

See Profiling Script with the Developer Tools for more.

Menu Options

On the right side of the menu, you’ll see options to change the Browser Mode and Document Mode.  This lets you modify the browser behavior and page settings to test under different rendering and display conditions.  See this MSDN article for more.

Menu

Don’t forget to look through the many options in the various menus.  For example:

  • Color PickerImage and Link reports
  • Element outlining (tables, divs, etc.)
  • Cache management
  • Pop-up blocker, script, and CSS disabling
  • ValidationTools to resize the browser, measure items, and select colors
  • Options to send a page for validation
  • Clear/view cookies

Questions

Some details for questions asked during and after the session:

  • The Search bar supports the W3C Selectors API, but you need to type an “@” symbol before your expression, otherwise it’s treated as a literal text search.
  • The script profiler works on a usage basis, profiling all code executed between using the “start profiling” and “stop profiling” commands. I have not seen a way to affect which scripts code is profiled during that time (like you can with using the Profiler APIs to affect Team System’s instrumentation profiling).

Internet Explorer Resources

Finally, a summary of resources to get you underway:

I hope you enjoy using the developer tools!

-Chris