BT

New F12 Developer Tools for the New Microsoft Edge

| by Jeff Martin on Apr 30, 2015. Estimated reading time: 2 minutes |

Microsoft has announced that Microsoft Edge is the name of the web browser replacing Internet Explorer 11.  Formerly known as Project Spartan, Edge is intended to be a serious competitor in the modern web arena.  Part of this effort is a full featured developer tool experience, and Microsoft’s Andy Sterland was at Build 2015 to introduce some of the new F12 Developer Tools present in Edge.

In his talk “What’s new in F12 for Microsoft Edge [fka Project Spartan]”, Sterland laid out how Microsoft plans to make their new tools match the power of their new browser.  Sterland says that team’s focus is on Microsoft Edge, and that the existing tools for Internet Explorer 11 are frozen and will no longer be updated.

The new tools are built in TypeScript, and are always running so developers don’t have to worry about turning them on and then reloading the page in an attempt to recreate what sparked their investigation. 

The tools are improved in a variety of ways:

  1. Improved source navigation – go to definition, JavaScript / TypeScript
  2. The tools share common shortcuts between Chrome and Edge whenever possible, to make it easier for developers to learn and switch between browsers when they develop their apps.
  3. Console Improvements
    1. Identifying where a log message came from in the source
    2. Escape key to open
    3. Clickable links in message (such as a URL shown in the source / debugger)
  4. DOM Explorer integration
    1. Element highlighting
    2. Inspect element from the timeline

The previous two tools used for profiling, the Script profiler and UI responsiveness tool, have been replaced by a new Combined Profiler.  This has a JavaScript call stack with a timeline (HTML / CSS).  A new profiler has been added for CPU Sampling.  For this tool, the CPU is collected at specific intervals and does not capture every single call so that they present a low overhead.

The Memory tool can highlight leaked nodes, and provide DOM highlighting in conjunction with the DOM Explorer.  To make using this easier, a new Console method can be used to take a memory snapshot where the developer indicates, rather than having to manually time a snapshot while running the app.

Despite all of these features being added, work still remains for the future to extend their capabilities.  Sterland suggested that the team is considering adding the following experimental features, and as they are developed they will show up on an additional, experimental tab:

  1. JavaScript & CSS editing
  2. Cookie inspection
  3. Local and session storage

Rate this Article

Relevance
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Permanent Change by Gert Van Rooyen

How can I make the changes that I make on the Dom Explorer's style sheet permanent so that it reflects on the stylesheet on my file system. Note that I am running my application out of Visual Studio.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss
BT