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:
Simple enough! In IE8, hit F12 or choose Tools-> Developer Tools to start.
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.
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!?”).
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.
For details, see Debugging HTML and CSS with the Developer Tools on MSDN.
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.
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.
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”.
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.
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.
Don’t forget to look through the many options in the various menus. For example:
Some details for questions asked during and after the session:
Finally, a summary of resources to get you underway:
I hope you enjoy using the developer tools!
-Chris