What's New In DevTools (Microsoft Edge 93)
The following sections list the announcements from the Microsoft Edge DevTools team. To try new features in the DevTools, Microsoft Visual Studio Code extensions, and more, review the announcements. To stay up to date with the latest and greatest features in your developer tools, download the Microsoft Edge preview channels and follow the Microsoft Edge DevTools team on Twitter.
Apply themes from Visual Studio Code to DevTools
In addition to the existing light and dark themes, Microsoft Edge DevTools now supports some of the most popular color themes from Visual Studio Code. To select a color theme, navigate to Settings and then select a theme from the Theme dropdown list.
The supported Visual Studio Code themes are:
- Solarized Light
- Quiet Light
- Kimbie Dark
- Monokai Dimmed
- Solarized Dark
- Tomorrow Night Blue
For more information, navigate to Apply color themes to DevTools.
Debug DOM node memory leaks with the new Detached Elements tool
To turn on this experiment, navigate to Settings > Experiments and select the checkbox next to Detached Elements.
The Visual Studio Code debugger now integrates with the DevTools extension
Other new features are:
- The tools refresh automatically when you switch between different debugging targets.
- Several bug fixes.
- More detailed documentation of the extension.
For more details about improvements and fixes, check the changelog file in the
For more information, navigate to Launching Edge DevTools from the JS Debugger workflow. Get the Microsoft Edge Developer Tools for Visual Studio Code extension. Microsoft Visual Studio Code updates extensions automatically; to update this extension manually instead, navigate to Update an extension manually. You can file issues and contribute to the extension on the vscode-edge-devtools GitHub repo.
New Fluent UI icons for DevTools
Microsoft Edge DevTools has adopted Fluent UI, giving buttons and menus a more modern look that better aligns with the rest of the Microsoft Edge browser.
Change the DevTools display language directly from Settings
Previously, to change the display language in DevTools, you had to change the browser language. Now you can easily switch the display language in DevTools Settings, without having to change your browser settings. To do this, open Settings, and then in Preferences, select a language from the Language drop-down list.
By default, DevTools matches your browser's display language. For more information, navigate to Change DevTools language settings. To review the history of this feature in the Chromium open-source project, navigate to Issue 2882756.
Copy a declaration in the Styles pane for CSS-in-JS libraries
- In the Styles pane of the Elements tool, open the contextual menu (right-click) on a declaration in a style rule.
- Select Copy declaration as JS or Copy all declarations as JS.
To learn more about viewing and changing CSS, navigate to CSS reference.
Easier customization of User-Agent Client Hints
User-Agent Client Hints makes browser information more accessible than a semicolon-delimited User-Agent string, and improves site compatibility. Initially, User-Agent Client Hints were time-consuming to test and debug. There was less control over the client hints, and client hints had to be filled in properly for the form to work.
In this release, we redesigned the debugging experience so you can easily modify User-Agent Client Hints through a UI with multiple separate fields and controls. Also, you can now test your custom User-Agent Client Hints and a User-Agent string simultaneously. You can now define User-Agent Client Hints for a custom device in Settings or in the Network conditions tool.
For more information about defining hints in Settings, navigate to Set user agent client hints.
You can also override User-Agent Client Hints for the current page by using the Network conditions tool.
For more information about defining hints in the Network conditions tool, navigate to Set user agent client hints. To review the history of this feature in the Chromium open-source project, navigate to Issue 1174299.
Screen readers now announce errors, warnings, and issues in toolbar and Console
Previously, users of screen readers would only hear the number of errors, warnings, or issues announced in the DevTools toolbar. The additional information of what type of notification was being announced wasn't included, such as "Error", "Warning", or "Issue". For example, if the DevTools reported 3 errors, screen readers would just announce "3".
Now in Microsoft Edge version 93, screen readers correctly announce the type and number of notifications; errors, warnings, or issues. For example, if DevTools reports 3 errors and 5 warnings, screen readers now announce "3 errors, 5 warnings". This fix has been applied to both the notifications in the DevTools toolbar and in the Console.
Copy as PowerShell in the Network tool now includes cookies
Previously, in the Network tool, the Copy > Copy as PowerShell context menu option didn't include cookies when generating a PowerShell command for a given network request in the Network Activity Log. This meant that the generated PowerShell command couldn't successfully make the same network request if cookies were required.
Now in Microsoft Edge version 93, the Copy as PowerShell context menu option correctly sets the User-Agent string and cookies that were observed by DevTools. The generated PowerShell command can now successfully make the same network request that was observed by DevTools, even to servers that depend on cookies.
Download the Microsoft Edge preview channels
If you are on Windows, Linux, or macOS, consider using the Microsoft Edge preview channels as your default development browser. The preview channels give you access to the latest DevTools features.
Getting in touch with Microsoft Edge DevTools team
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Send your feedback using the Send Feedback icon in DevTools.
- Tweet at @EdgeDevTools.
- Submit a suggestion to The Web We Want.
- To file bugs about this article, use the following Feedback section.
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Jecelyn Yeen (Developer advocate, Chrome DevTools).
This work is licensed under a Creative Commons Attribution 4.0 International License.