New F12 Developer Tools for the New Microsoft Edge
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:
- 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 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:
- Cookie inspection
- Local and session storage