Partager via


Internet Explorer 9 Developer Tools Deep Dive – Part 1: Introduction

Internet Explorer 9In this series, we’ll take a detailed look at the Developer Tools included in Internet Explorer.  They can be used to inspect page structure, improve design, debug scripts, optimize page and network performance, and much more.

BTW, much of this content is covered in my screencast for The Code Project Virtual Summit on HTML5/CSS3 (available for free).

Getting Started

The F12 Developer Tools are a standard feature of Internet Explorer (no need to install anything else), so just make sure you’re running IE8, IE9, or the IE10 Platform Preview.  Head to these sites to learn more and download IE:

Running the Developer Tools

Easy enough – just press F12 or choose Tools-> “F12 developer tools” to start.

Launching the Developer Tools

The Developer Tools

Detach Window You can either run the tools attached in the 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.

Tools and Browser Side-by-Side

  • Tip: On Windows 7, the Aero Snap keys are handy here – Windows Key + Arrow Keys.

A Quick Tour

Let’s take a quick tour of the main features, and we’ll delve into the details in the other posts.  There are six tabbed sections of features: HTML, CSS, Console, Script, Profiler, and Network.

The HTML Tab

The HTML tab is great for inspecting your page, setting values, and seeing the effects of CSS styling.

HTML Tab

The right-hand pane shows a per-element CSS summary (Style) and hierarchy/trace (Trace Styles), offers a visual layout tool (Layout), and a way to set custom attributes (Attributes) .

The CSS Tab

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

CSS Tab

Combined with the right-hand panes on the HTML tab, there are a lot a ways to view and modify your CSS.  More details and advice for using these two tabs in Part 2 (HTML & CSS).

The Script and Console Tabs

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

New in IE9 is the ability to Format JavaScript, which can make even minified script files easy to read and debug.

Script

The pane at right features Console (supporting console.log() and other functions), Breakpoints, Locals, Watch, and Call Stack views. 

New in IE9 is the Format JavaScript option, which can make even minified script files easy to read and debug:

Format JavaScript

The Console tab is much like the Console pane of the Scripts tab, offering a larger surface for viewing messages and executing script commands.  You’ll find more on this in Part 3 (debugging).

The Profiler Tab

The Profiler tab lets you analyze the execution of JavaScript.  Just “Start Profiling”, load a page and/or use page functionality, then click “Stop Profiling”.

Profiler

You’ll see a summary report showing functions, times called, time elapsed and more.  There is much more detail on using this feature in Part 4 (profiling).

The Network Tab

The Network tab is new with IE9, enabling the capture and analysis of network usage. 

Network Report

Like script profiling, just start capturing and load/use a page or pages.  You’ll see the requests made, results, response details, and timing.  Double-click an entry to see details:

Network Request Details

There’s a lot to cover here, so see Part 5 (network profiling and debugging) for details and techniques for using this feature.

Menu

Color PickerDon’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
  • Setting custom User-Agent (UA) strings (e.g. mobile)
  • Clear/view cookies
  • ValidationDisabling of script, CSS, and the pop-up blocker
  • Tools to resize the browser, measure items, and select colors
  • Page validation 

You can also change Browser Mode and Document Mode

We’ll dive into this in the next post, but the short version is Browser Mode can send different User-Agent (UA) strings, simulating different browsers to a server, and Document Mode changes the engine mode IE will use to render pages.

Internet Explorer Resources

Finally, here are some resources to get you underway:

Stay tuned for more posts, and I hope you enjoy using the F12 Tools!

-Chris