In 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).
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:
Easy enough – just press F12 or choose Tools-> “F12 developer tools” to start.
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.
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 is great for inspecting your page, setting values, and seeing the effects of CSS styling.
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 displays current CSS classes and styles, allowing you to view specific CSS files in use by the page, make changes, and search.
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 tab lets you work with script, setting breakpoints, debugging through code, and breaking on errors.
The pane at right features Console (supporting console.log() and other functions), Breakpoints, Locals, Watch, and Call Stack views.
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).
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 is new with IE9, enabling the capture and analysis of network usage.
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:
There’s a lot to cover here, so see Part 5 (network profiling and debugging) for details and techniques for using this feature.
Don’t forget to look through the many options in the various menus. For example:
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.
Finally, here are some resources to get you underway:
Stay tuned for more posts, and I hope you enjoy using the F12 Tools!