Using the F12 developer tools

Using the F12 developer tools, you can debug, test, and speed up your webpages. Whether you need to fine tune your CSS layout or find a memory leak, you'll find tools to help here.

If you're looking for the Tools menu or toolbars in Internet Explorer 11, try:
If you got here by clicking an error message and simply want to avoid error messages in the future, try:

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.

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)

F12 Developer tools, highlighting the DOM Explorer

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.

New features in the DOM Explorer tool include:

  • IntelliSense autocompletion suggestions when editing HTML attributes and CSS properties.
  • Drag DOM nodes to rearrange them.

Development and debugging tasks it makes easier:

  • Determining why an element is not displaying at the right place or right size.
  • Figuring out which CSS styles and media queries are being applied to an element.
  • Testing a series of different colors for an element to see which looks best.

Learn more about the DOM Explorer tool.

The Console tool (CTRL + 2)

F12 Developer tools, highlighting the JavaScript Console

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 + `.

New features in the Console tool include:

  • Open the Console at the bottom of any other tool with the Console button or CTRL + `.
  • New Console Debugging API methods for timing, counting, grouping, and more.
  • IntelliSense autocompletion suggestions on the command line speed up input, reduce typos, and help you discover aspects of JavaScript APIs.

Development and debugging tasks it makes easier:

  • Viewing system error messages, exception warnings, and debug output.
  • Timing code execution down to the statement with new timing methods.
  • Changing the value of a variable in running code without reloading.

Learn more about the Console tool.

The Debugger tool (CTRL + 3)

F12 Developer tools, highlighting the Debugger tool

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.

New features in the Debugger tool include:

  • No-refresh debugging. Set your breakpoints and go without reloading and losing state.
  • Tabbed document interface for easier management of multiple scripts.
  • Scrollbar that highlights breakpoints and search matches.

Development and debugging tasks it makes easier:

  • Seeing what led to a function call using the Callstack.
  • Making compressed or minified code more readable.
  • Monitoring web worker creation and execution.

Learn more about the Debugger tool.

The Network tool (CTRL + 4)

F12 Developer tools, highlighting the Network tool

The Network tool gives you the fine details of any network requests involved in the loading and operation of your webpages.

New features in the Network tool include:

  • Improved request timing info.
  • Improved capture of compression info.

Development and debugging tasks it makes easier:

  • Viewing the amount of bandwidth your page consumes across resources.
  • Debugging AJAX requests by viewing request and response headers and bodies.
  • Identifying network requests that slow the loading of your webpages.

Learn more about the Network tool.

The UI Responsiveness tool (CTRL + 5)

F12 Developer tools, highlighting  the UI Responsiveness tool

The UI responsiveness tool helps you dig into what is happening when your page slows down. Using it to profile specific points of slowness shows the operations that are causing them.

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

  • Identifying the different sources of CPU activity causing UI slowness.
  • Insight into your webpage's frame rate.
  • Setting labels on the timeline to isolate user scenarios.

Development and debugging tasks it makes easier:

  • Testing code optimizations.
  • Speeding up your webpages.

Learn more about the UI responsiveness tool.

The Profiler tool (CTRL + 6)

F12 Developer tools, highlighting the Profiler  tool

The Profiler tool is pure JavaScript speed measurement, showing you the functions that were called during a profiling session, how many times they were called, and how long they took to complete.

New features in the Profiler tool include:

  • Tracking which functions were executed in web workers.
  • Cleaner, more responsive UI.

Development and debugging tasks it makes easier:

  • Isolating the slowest parts of your code.
  • Testing code optimizations.
  • Speeding up your webpages

Learn more about the Profiler tool.

The Memory tool (CTRL + 7)

F12 Developer tools, highlighting the Memory tool

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:

  • A timeline to see progressive changes in memory use.
  • Snapshots to examine the details of memory use at specific points.
  • Snapshot comparisons to identify specific points of growth.

Development and debugging tasks it makes easier:

  • Identifying detached DOM nodes.
  • Identifying points of memory growth.
  • Measuring the memory use of objects.

Learn more about the Memory tool.

The Emulation tool (CTRL + 8)

F12 Developer tools, highlighting the Emulation tool

The Emulation tool helps you test how your webpages run on different screen sizes and hardware features, and how they respond to different user agent strings.

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

  • You can emulate different screen sizes and resolutions.
  • GPS simulation.

Development and debugging tasks it makes easier:

  • Testing responsive designs on multiple screen types.
  • Testing location-aware features for a mobile site.

Learn more about the Emulation tool.

Related topics

What's new in F12 developer tools
New console API methods
F12 developer tools in Internet Explorer 10
Keyboard shortcuts in F12 developer tools for IE11

 

 

Show:
© 2014 Microsoft