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:
- Improved source navigation – go to definition, JavaScript / TypeScript
- 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.
- Console Improvements
- Identifying where a log message came from in the source
- Escape key to open
- Clickable links in message (such as a URL shown in the source / debugger)
- DOM Explorer integration
- Element highlighting
- 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:
- JavaScript & CSS editing
- Cookie inspection
- Local and session storage
