What's New in DevTools (Microsoft Edge 110)

To check out the latest features of Microsoft Edge DevTools and the Microsoft Edge DevTools extension for Microsoft Visual Studio Code and Visual Studio, read these announcements.

To stay up to date and get the latest DevTools features, download an Insiders preview version of Microsoft Edge. Whether you're on Windows, Linux, or macOS, consider using Canary (or another preview channel) as your default development browser. The Beta, Dev, and Canary versions of Microsoft Edge run as separate apps, side-by-side with the stable, released version of Microsoft Edge. See Microsoft Edge Insider Channels.

For the latest announcements, follow the Microsoft Edge team on Twitter. To report a problem with DevTools or ask for a new feature, file an issue in the MicrosoftEdge/DevTools repo.

Video: What's new in DevTools 110

Taking heap snapshots in the Memory tool is now faster

In previous versions of Microsoft Edge, generating large heap snapshots (over 1 GB) in the Memory tool could take anywhere from 2 to 15 minutes, depending on the size of your website or app, and how many elements were stored in memory.

In Microsoft Edge 110, the Memory tool is now 70% to 86% faster at taking heap snapshots. For larger heap snapshots, we're seeing the greatest improvement in speed. If you've noticed that taking heap snapshots is much faster, please leave us feedback in [Feedback] Taking heap snapshots in the Memory tool is now faster #131.

See also:

• Record heap snapshots using the Memory tool

Move tools between the Activity Bar and Quick View more easily in Focus Mode

Microsoft Edge 110 contains various improvements to Focus Mode in DevTools. The following changes make it easier to customize the Activity Bar and the Quick View panel, to show only the tools that you're currently interested in.

When moving a tool, the right-click menu shows the current placement of the destination toolbar

The right-click menu command for moving a tool between the Quick View panel and the Activity Bar now indicates the placement of the destination toolbar, such as:

• Move to bottom Quick View
• Move to side Quick View
• Move to top Activity Bar
• Move to left Activity Bar

The right-click menu is no longer displayed over the tool's tab in the toolbar

The right-click menu for moving a tool between the Activity Bar and the Quick View toolbar no longer obscures the tool's name in the toolbar.

For example, the Network Conditions tool name remains visible when you right-click the tool's tab in the Quick View toolbar:

As another example, the Network tool name remains visible when you right-click the tool's tab in the Activity Bar:

Focus is preserved in Activity Bar or Quick View when moving a tool between them

For keyboard shortcut and assistive technology users, focus is preserved in the Activity Bar or Quick View toolbar when moving the currently selected tool from one toolbar to the other, or when removing a tool from the toolbar.

For example, suppose the Network tool has been moved to the Quick View toolbar, and you right-click the Network tab on the Quick View toolbar:

If you then select Remove from Quick View, focus stays in the Quick View toolbar and moves to the Network conditions tool, which is the next tool in the Quick View toolbar:

Accessibility improvements for themes, customizing locations, and the More Tools button

The following accessibility issues have been fixed, and using assistive technology such as screen readers and keyboard shortcuts with DevTools is now easier.

Screen readers correctly report when the More Tools menu is expanded

In previous versions of Microsoft Edge, screen readers reported that the More tools () button was collapsed, when the More tools menu was actually expanded. In Microsoft Edge 110, this issue has been fixed.

Screen readers now correctly report when the More tools () menu is expanded:

Change Dock location and Activity Bar location by using the keyboard

In previous versions of Microsoft Edge, in Focus Mode, it wasn't possible to change the Dock location or the Activity Bar location via the keyboard. In Microsoft Edge 110, this issue has been fixed.

In Focus Mode, you can now change the Dock location and the Activity Bar location from the Customize and control DevTools () menu by using the arrow keys:

Screen readers announce which theme is currently selected when scrolling through themes

In previous versions of Microsoft Edge, when scrolling through the list of themes for DevTools, screen readers didn't announce whether or not a theme was selected. In Microsoft Edge 110, this issue has been fixed.

Screen readers now announce which theme is currently selected when you are moving among the themes in the Customize and control DevTools () menu:

See also:

• Navigate DevTools with assistive technology

The Network, Console, Issues, and Sources tools have improved support for contrast themes

DevTools in Microsoft Edge 110 now has better support for Windows contrast themes. The Network, Console, Issues, and Sources tools have all been improved so that the tools render correctly with contrast themes.

In the Issues tool, with the Desert contrast theme applied in Windows, when you put focus on a particular issue, the details about the issue were displayed against a solid background, which made the text hard to read. In Microsoft Edge 110, this has been fixed, by using an outline instead of a solid background:

In the Network tool, with the Desert contrast theme applied in Windows, selecting a particular request made the text and icon for the request hard to see. In Microsoft Edge 110, this has been fixed:

See also:

• Apply a color theme to DevTools
• Check for contrast issues with dark theme and light theme
• Change color contrast in Windows

Announcements from the Chromium project

Microsoft Edge 110 also includes the following updates from the Chromium project:

• Clearing Performance Panel on reload
• Automatic in-place pretty print
• Better syntax highlight and inline preview for Vue, SCSS and more
• Ergonomic and consistent Autocomplete in the Console