“Microsoft Edge DevTools unveils a new user interface, designed to reduce complexity and improve user experience. The redesign includes a more intuitive welcome tool, customizable UI, and a new activity bar for easy tool discovery.”
Unveiling the All-New Edge DevTools User Interface
Microsoft Edge DevTools has undergone a major facelift, with a brand-new look and improved functionality. This redesign has been in the works for nearly two years, with the aim of reducing the learning curve and complexity of the tools.
Why the Redesign?
The motivation behind the redesign was to address the visual and conceptual overload that had crept into DevTools over time. The team’s goal was to make the tools more user-friendly and customizable.
“We wanted to reduce the learning curve and complexity of the tools.”
What’s New?
Several new features have been introduced to improve the user experience. These include a redesigned Welcome tool, a customizable UI, and a new Activity Bar. All these features were created with a focus on user feedback and iterative development.
The Welcome Tool and More
The Welcome tool has been revamped to be more helpful for users seeking to learn or stay updated. The UI has been made more customizable, with the addition of the More tools button to easily open tools and the ability to move tools between the top and bottom toolbars.
The Activity Bar
The Activity Bar is a major addition to the redesign. It allows users to easily recognize and discover available tools. Each tool is represented by an icon, with tool names appearing when space allows or on hover. The right-hand side of the Activity Bar is less cluttered, with the error, warning, and issue icons now appearing on the corresponding tool icon.
“The Activity Bar is now generally available to all users.”
What’s Important to Know?
One of the biggest changes is the ability to make the Activity Bar vertical. This can be done by clicking the Customize and control DevTools button and changing the Activity Bar location to left. This feature may be particularly appealing to Visual Studio Code users.
The Quick View Toolbar
Another significant change is the renaming of the drawer in DevTools to Quick View. This feature allows users to open a second tool alongside the one already open. Now, Quick View can also be vertical, allowing for simultaneous use of tools like the Elements tool and the Console tool.
With this redesign, Microsoft Edge DevTools is set to provide a more intuitive and efficient experience for its users.
From the Windows Blog
