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

Overall design

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.

New horizontal navigation in F12 tools

Overflow experience

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.

New horizontal navigation in F12 tools with overflow

Undocked experience

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.

New horizontal navigation in F12 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.

Try this new change and let us know your thoughts. Leave a comment below, reach out on Twitter, or visit our new User Voice site to share your feedback.

— Ruben Rios, Program Manager, Internet Explorer