Edit

Share via

What's New in DevTools (Microsoft Edge 131)

  • Article

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.

Visual Studio Code themes are removed

The Visual Studio Code themes feature is now deprecated. These themes will revert to the System preference theme by default. The Light+ and Dark+ themes continue to be supported. To select a theme, select Customize and control DevTools > Preferences > Theme drop-down menu:

The Theme menu in DevTools Preferences

See also:

Edge experiment settings can be disabled

Previously, the following experiments that were enabled by default couldn't be disabled, even after clearing their checkboxes in the Settings > Experiments page and reloading DevTools:

  • Enable webhint
  • Show issues in Elements
  • Open source files in Visual Studio Code

This is now fixed, and you can disable these experiments.

See also:

View CSS selector costs in the Performance tool sidebar

The left sidebar in the Performance tool displays the costs of CSS selectors in the Insights tab:

CSS selector costs info

To view CSS selector costs:

  1. In the Performance tool, click the Capture settings (Capture settings icon) button, and then select the Enable CSS selector stats (slow) checkbox.

  2. Take a performance recording.

  3. If the Insights tab isn't displayed, click the Show sidebar (Show sidebar icon) button, and then click the Insights tab.

  4. Click the CSS Selector costs button to expand its section.

See also:

Fixed edit field to exit after pressing Tab after auto-completion

Pressing the Tab key after auto-completion now exits the edit field and focuses on the next focus point. Before, pressing Tab would just indent the text.

Announcements from the Chromium project

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