Chris Bowen's Blog : Internet Explorer

A Guide to the Internet Explorer 8 Developer Tools

cbowen — Wed, 30 Sep 2009 22:47:00 GMT

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:

Getting Started with 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.

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!?”).

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.

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.

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”.

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.

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

Image and Link reports
Element outlining (tables, divs, etc.)
Cache management
Pop-up blocker, script, and CSS disabling
Tools 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:

IE 8 Home
IE 8 Developer Center
My screencast on IE8 for developers
IE 8 Dev Tools Tutorial sample site
IE 8 Dev Tools Articles
For keyboard fans, the Keyboard Shortcuts guide

I hope you enjoy using the developer tools!

-Chris

Fall Northeast Roadshow Summary and Resources

cbowen — Sun, 19 Oct 2008 09:10:40 GMT

Thank You!

Another Northeast Roadshow is done! Thanks to all of you who joined us as we visited six venues across the Northeast - we had our largest total audience ever. Your interest and support makes this possible, and keeps us heading back out for more.

Speaking of which, Jim and I are busy planning the Winter Northeast Roadshow. It's shaping up to be in early- to mid-December, so keep an eye on our blogs for announcements and registration (sometime in November.)

Thanks to the gracious support of our hosts throughout the Northeast, especially KnowledgeWave in Vermont, RPI and the Rochester Public Library in New York, and the Riverview Psychiatric Center in Maine!

A special thanks to Brian Johnson, who was able to join us for our visits to Albany and Rochester to give great presentations on Robotics.

Presentations and Other Content

As promised, we've gathered our presentations, resources, and demos together for you, should you wish to take a closer look.

Here are the links to my presentations, stored on (Live's SkyDrive service):

Check out Jim's recap post for the resources from the following sessions:

"ASP.NET Dynamic Data"
"UI, UX, U Confused?"
"A RESTed Development"

Session Resources

Finally, here are the resources from each of my sessions:

"Understanding ADO.NET Entity Framework"

"Exploring Internet Explorer 8"

"RoboLunch"

Microsoft Robotics Home

"Befriending Unit Testing"

MSDN: Working with Unit Tests
“Achieving And Recognizing Testable Software Designs” - Roy Osherove
“Tame Your Software Dependencies for More Flexible Apps” - James Kovacs
“IoC Containers and the Dep. Injection Pattern” - Martin Fowler
Blogs:

We'll see you next time!

-Chris

VPC Enabling IE7 and IE6 on the Same Machine

cbowen — Sun, 03 Dec 2006 16:15:57 GMT

Pete LePage posts that there is a new Virtual PC image preloaded with Windows XP SP2, IE6 and the IE7 Readiness Kit:

Now you can install IE7 on your main machine for development, and get all the advantages of IE7, like the RSS platform, native XMLHTTP stack, and improved security, while still running IE6 simultaneously in the VPC on the same computer. Most importantly, you don’t even have to buy an additional Windows license. The VPC image runs in a virtual machine that offers all of the functionality of a full IE6 installation without giving it any access to its host machine’s hard drive, registry, etc. You can make as many modifications as you want to the virtual machine without affecting your host installation at all.

See Pete's post for details, or download the VPC image here.

-Chris