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.

Color themes for DevTools

The supported Visual Studio Code themes are:

Light themes:

  • Solarized Light
  • Quiet Light

Dark themes:

  • Abyss
  • Kimbie Dark
  • Monokai
  • Monokai Dimmed
  • Solarized Dark
  • Red
  • Tomorrow Night Blue

For more information, navigate to Apply color themes to DevTools.

Debug DOM node memory leaks with the new Detached Elements tool

A DOM node is considered "detached" when it is no longer attached to any element of the DOM but is still being retained in memory by Microsoft Edge. The browser cannot garbage-collect the element, because some JavaScript is still referencing the element even though it's no longer on the page or a part of the DOM.

The new Detached Elements tool finds all of the detached elements on your page and displays them. You can expand and collapse a detached element to see the parent and child nodes that are also being retained. You can trigger the browser's garbage collection by selecting Collect garbage and validate that you have a memory leak when a detached element cannot be garbage-collected. Finally, you can jump into JavaScript that's referencing the detached element by taking a heap snapshot with the Analyze button.

The 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

If you use JavaScript debugging in Visual Studio Code, you can now launch the Microsoft Edge Developer Tools for Visual Studio Code extension by selecting the Inspect button.

The Inspect button in Visual Studio Code to launch the DevTools extension

This feature integrates DOM and CSS debugging with JavaScript debugging in Visual Studio Code. If you don't have the DevTools extension installed, when you select the Inspect button, Visual Studio Code prompts you to install the 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 vscode-edge-devtools repo.

DevTools extension integrated with Visual Studio Code Debugger workflow

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.

DevTools implemented with Fluent UI design

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.

Changing the DevTools display language directly from DevTools **Settings**

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

Previously, when using CSS-in-JS libraries, you were not able to copy CSS declarations (a CSS property and value) formatted for JavaScript. You would have to edit the copied CSS to match JavaScript's syntax.

Now in Microsoft Edge version 93, you can copy a single CSS declaration or all the declarations in a style rule and paste them directly into a JavaScript file without having syntax issues. To try this feature:

  1. In the Styles pane of the Elements tool, open the contextual menu (right-click) on a declaration in a style rule.
  2. Select Copy declaration as JS or Copy all declarations as JS.
  3. Paste the copied CSS into a JavaScript file in your text editor, such as Visual Studio Code. For example: '--more-link': 'lime'.

Context menu for a style rule, including 'Copy declaration as JS' and 'Copy all declarations as JS' commands

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.

Defining User-Agent Client Hints for a custom device in Settings

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.

Defining User-Agent Client Hints for a custom device in 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.

The errors, warnings, and issues UI in the toolbar and Console

For information about debugging Console errors, navigate to Fixing JavaScript errors that are reported in the Console. For information about issues found by DevTools and improvements you can make to a webpage, navigate to Find and fix problems using the Issues tool. To review the history of this feature in the Chromium open-source project, navigate to Issue 1223208.

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.

The Copy as PowerShell command

For more information about the Network Activity Log, navigate to Network Analysis reference. To review the history of this feature in the Chromium open-source project, navigate to Issue 932971.

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.

The Send Feedback icon in the Microsoft Edge DevTools

Note

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).

Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.