Announcing the redesigned F12 developer tools interface
With two major updates over the spring and summer, we have continued to improve the developer experiences available in IE's F12 developer tools and today we are excited to provide details around our latest update.
This update addresses concerns that many users had with the vertical navigation model we introduced in IE11, and provides a more traditional horizontal model.
Changes to the F12 user interface
When we introduced the vertical navigation model, our goal was to optimize for vertical real estate. Your feedback validated that we successfully achieved that goal. However, it also became clear that using a vertical navigation model with icons identifying complex tools, lead to hesitation and confusion for novice and expert users alike.
In order to address those issues, we implemented a more traditional navigation interface that sits horizontally at the top of the tools. As part of this change, the tool icons were removed and replaced with the tool’s name. We retained the tool notification badges—like the debugger pause icon or the console error count—and removed tool names from their respective toolbars to make more space available to the tools themselves.
When the tools window isn't wide enough to fit all of the tool names, a drop-down menu provides access to the tool names that didn't fit and provides the same notification badges available in the full-width version of the tools.
When the tools are undocked, they retain the same experience and functionality of the current tools. In this design, the window “grab area” is in document title region along the top and the window resize area sits along the sides of the tools.
We are grateful for all the feedback you have provided to date, and we want to encourage you to continue to provide suggestions as you find issues, bugs, or experiences you believe could be improved in order to make your daily development activities easier and more impactful.
— Ruben Rios, Program Manager, Internet Explorer