The F12 tools at work

We rebuilt the F12 tools from the ground up in IE11. They have a brand new UI and new functionality to make your developing and debugging faster and easier. And we're going to be rolling out more improvements in updates.

Press the F12 key on your keyboard to open the tools. If your keyboard doesn't have function keys, you can use the Tools menu.

There are eight distinct tools, each with their own tab in the F12 tools interface. Here you'll find an image of each tool, a quick summary of what it does and what's new, and a couple of typical development or debugging tasks the tool makes easier.

The DOM Explorer tool (CTRL + 1)

The The DOM Explorer tool shows the structure of your webpage as it's being rendered in the browser and makes it possible to edit your HTML and styles in a live page. You can do this without having to edit and reload your sources, so you can quickly solve display issues or experiment with new ideas.

The Console tool (CTRL + 2)

The Console tool provides a way to interact with your running code, sending info in with the Console's command line and getting info out using the Console Debugging API. The Console tool is considered to be so useful by developers, we've made it easier to get to. You can now open it at the bottom of any other tool using the Console button in the upper-right of the UI, next to the Help button or CTRL + `.

The Clear on navigate toggle gives you a control for preserving or deleting console messages after navigating to a new page.

An Always record developer console messages option means you no longer have to open the console to start capturing the output to it.

New features in the Console toolCumulative Security Update for Internet Explorer (KB2976627) include:

The console.timeStamp() command shows the number of milliseconds the current browser tab has been open, or it can be used with a UI Responsiveness profiling session to create time-stamps on the session timeline.

Stale message indication greys out the icons on console messages from previous pages when Clear on navigate is turned off, making it easier to spot just the current messages.

The Debugger tool (CTRL + 3)

You use the Debugger tool to examine what your code is doing, when it's doing it, and how it's doing it. Pause code in mid-execution, step through it line-by-line, and watch the state of variables and objects at each step.

The Memory tool (CTRL + 7)

When a webpage starts out fast and slows down after you use it for a while, the culprit is usually a memory leak. The Memory tool tracks the memory use of your webpage, helping you identify where memory use is growing, why it's growing, and how to fix it.

The Memory tool is new to F12 tools in IE11. Some interesting features are: