Microsoft Edge DevTools
The in-browser developer tools are a set of 20+ tools to aid web developers with various parts of debugging their web apps and sites. They present an interesting and complex user experience problem due to the restrictions based on both browser technology and the confined UI space.
The Problem
In 2018, the Microsoft Edge team adopted the Chromium codebase for the browser which meant we also adopted the Chromium Developer Tools and its user interface. Microsoft has a distinct look and feel to it’s products so working with the Edge Web UI Design team I lead a series of updates to the DevTools as a Program Manager and the UI Designer for the first preview release of the browser.
Due to the nature of using the Chromium codebase we were limited in making structural updates to the user interface and I had to assess what cosmetic changes the team could make in order to ensure our tools looked like they were a part of the Microsoft product family.
Updates: Dark Mode By Default
The largest and most noticeable update to the browser developer tools was the decision to switch dark mode on by default as well as aligning the light and dark theme colors to Microsoft’s VS Code text editor.
Using data supplied by the VS Code team, we determined that most developers were using VS Code with some flavor of dark theme installed.
Updates: Alignment with VS Code
Since VS Code is one of the most heavily used text editors by developers at the moment and a Microsoft product, I started to assess smaller experiential updates we could make to align with VS Code so that developers didn’t have a jarring experience moving between VS Code and their browser developer tools. These were things like UI patterns and the way VS Code prompted users for information and even icons. I wrote about the team’s intention to align with VS Code where appropriate in a blog post on the Developer Blog.
Updates: Icons
Microsoft has a distinct style of line icon used across most of the products. I conducted an audit of all the icons in the Chromium Developer tools and found matching equivalents in the Microsoft Icon Library. In the case of unique icons for the developer tools with no matching equivalent, I designed those icons and added them to our Edge Icon Library. As of autumn 2019, the icon updates to the DevTools have yet to take place due to technical reasons. Once the update does take place though, the iconography refresh will be one of the most impactful changes in terms of aligning visually with other Microsoft products.