Share via

What's new in F12 Tools

  • Article

Use the new F12 developer tools to debug code, solve display issues, improve performance, and increase the stability of your webpages.

Rebuilt from the ground up

F12 Tools in Internet Explorer 11 has been rebuilt from the ground up to give you:

  • a new, cleaner user interface.
  • new Responsiveness, Memory, and Emulation tools.
  • new and improved functionality in familiar tools.
  • an easier and faster workflow.

Speed up webpages with the UI Responsiveness tool

The new UI Responsiveness tool profiles your pages as they run, identifying where they slow down and which processes are taking too much time. Developers can observe the relationship between CPU utilization, framerate and behavior on the page.

Important  * The UI Responsiveness tool in the F12 developer tools may be disabled in IE11 on Windows 7 when Windows 7 is not up to date. If the UI Responsiveness tool won't work in your installation of IE11 on Windows 7, please make sure you've installed all available updates from Windows Update.

 

CSS, HTML, and JavaScript autocompletion

The Console and DOM Explorer tools now provide autocompletion suggestions while you're typing JavaScript, HTML, or CSS code. Autocompletion helps:

  • Make APIs more discoverable; for example, the Console API methods.
  • Reduce typing errors.
  • Speed up your workflow.

Screen and GPS emulation

Using the Emulation tool, you can preview what your sites look like on everything from 240-pixel-wide mobile screens to 4k home theater screens. GPS emulation tests how your mobile web pages respond anywhere in the world.

Meaningful memory analysis

Tracking memory usage over time is an important tool for debugging page slowness and crashes. The new Memory Tool provides:

  • A timeline view of overall memory usage.
  • Snapshots of memory usage that show how your webpages use memory at a given point in time.
  • Snapshot comparisons that pinpoint sources of changing memory use between snapshots. This helps identify memory issues that develop as webpages run and users interact with them.
  • Highlighted orphaned elements, showing where memory can be reclaimed.

Right-click to inspect

Selecting page elements in the DOM Explorer tool is easy with IE11. Right-click an element on the page and click Inspect element in the context menu to highlight the element in the DOM Explorer tool.

And much more

If you're intrigued by this sampling of the new and improved tools, read the Using the F12 Developer Tools documentation to get all the details of the developer tools in IE11

New console API methods

Using the F12 Developer Tools

More developer tools at Modern.ie