Microsoft shows off the new and streamlined Edge DevTools user interface

Microsoft shows off the new and streamlined Edge DevTools user interface

Earlier this month, Microsoft launched the stable 120 version of its Edge web browser. Along with the launch of Edge 120, the company has also officially released a major user interface redesign of its Edge DevTools. Today, in a blog post, Microsoft went over some of the changes and improvements it has made to the Edge DevTools app.

The development team started working on the redesign almost two years ago, because they knew that the app was getting "visually and conceptually overwhelming". The goal was to simplify the UI of the app so that it would be easier to learn and use.

Some of the design elements were put in earlier versions of DevTools, including a new Welcome tool, along with a More tools button so developed can open tools in the app more easily. The app also got an update so developers could move tools between the top and bottom toolbars.

However, the biggest new addition to Edge DevTools was added with the Edge 120 Stable update. It's called the Activity Bar. Microsoft stated:

First, each tool is now represented by an icon. Tool names still appear when there’s enough space to fit them, and on hover. The right-hand side of the Activity Bar is also a lot less noisy than before. Previously, DevTools would sometimes display up to 7 icons on the right-hand side. The error, warning, and issue icons now appear on the corresponding tool icon, and we’ve reorganized the customize, feedback, and settings icons into only two menu items.

The Activity Bar can be set up in the traditional horizontal position, but developers can also switch it so it becomes a vertical bar that's placed on the left hand side.

Microsoft is also renaming the ability to open a second tool next to one that's open to Quick View. Like the Activity Bar, Quick View can be used vertically as well:

With Quick View, you can use both the Elements tool and the Console tool at the same time for example. And now, if you have more horizontal space available, you can make Quick View appear vertically, to the right of the current tool. Just click the Dock Quick View to the right button in the toolbar.

The new Edge DevTools redesign should also make it easier for users to open, close, and move tools around. More info on the update can be found at Microsoft's support page.