What's New In DevTools (Microsoft Edge 91)

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.

Wavy underlines highlight code issues and improvements in Elements tool

In most modern IDEs, wavy underlines under text indicate syntax errors. In Microsoft Edge version 91 or later, wavy underlines display under HTML in the DOM view of the Elements tool. The wavy underlines indicate code issues and suggestions related to accessibility, compatibility, performance, and so on. For more information about how to review and edit issues, navigate to Find and fix problems with the Microsoft Edge DevTools Issues tool.

To open the Issues tool and learn more about the issue and how to fix it, complete one of the following actions.

  • Select and hold Shift, and then choose any wavy underline.
  • Complete the following actions.
    1. Hover on any wavy underline.
    2. Open the contextual menu (right-click).
    3. Choose Show in Issues.

Learn about DevTools with informative tooltips

The DevTools Tooltips feature helps you learn about all the different tools and panes in DevTools. To turn off Tooltips, select Esc. To turn on Tooltips, complete one of the following actions.

  • Select Ctrl+Shift+H (Windows/Linux) or Cmd+Shift+H (macOS).
  • Open the Command Menu and then type tooltips.
  • Choose Customize and control DevTools (...) > Help > Toggle the DevTools Tooltips.

Also, if you turn on the Focus Mode and DevTools Tooltips experiment, you may also choose the Toggle the DevTools Tooltips (?) button at the bottom of the Activity Bar.

To display more information about how to use the DevTools, turn on Tooltips, and then hover on each outlined region of the DevTools.

Hover on anywhere in the highlighted region of the Issues tool to display more details

Service worker update timeline

In Microsoft Edge version 91 or later, if you're a Progressive Web App or Service Worker developer, display the update lifecycle of your Service Workers as a timeline in the Application tool. This feature helps you understand the time your Service Worker spends in each of the following stages.

  • Install
  • Wait
  • Activate

Review the Timeline in the Update Cycle for your Service Worker

For more information about the lifecycle of your Service Workers, navigate to The Service Worker lifecycle. For more information about debugging tools for Progressive Web Apps and Service Workers in the DevTools, navigate to Service Worker improvements. To review real-time updates on this feature in the Chromium open-source project, navigate to Issue 1066604.

Progressive Web Apps no longer display warnings for non-square icons

In Microsoft Edge version 90 or earlier, if the Web App Manifest of your PWA included a non-square icon, a warning was displayed in the Errors and Warnings section for each non-square icon. In Microsoft Edge version 91 or later, the Manifest section in the Application tool displays no warnings if you provide at least one square icon. If you don't provide any square icons, a warning displays the following message.

Most operating systems require square icons.  Please include at least one square icon in the array.  

To review errors and warnings in your Web App Manifest, navigate to the Application tool and choose the Manifest section. Errors and warnings are listed under the Errors and Warnings heading. For more information about the Web App Manifest, navigate to Use the Web App Manifest to integrate your Progressive Web App into the Operating System. To create icons to include in your Web App Manifest, navigate to the PWABuilder Image Generator. To review real-time updates on this feature in the Chromium open-source project, navigate to Issue 1185945.

Localized DevTools now supported in Chromium-based browsers

Starting in Microsoft Edge version 81, Microsoft Edge DevTools displays in your own language. Many developers use other developer tools like StackOverflow and Visual Studio Code in their native language, not just in English. The Microsoft Edge DevTools team, Chrome DevTools team, and the Google Lighthouse team collaborated to provide the same experience in all Chromium-based browsers. For more information about how to use DevTools in your language, navigate to Change DevTools language settings. For more information about the collaboration on this feature in the Chromium open-source project, navigate to 1136655.

Microsoft Edge browser and DevTools set to Japanese

Use the keyboard to navigate to CSS variables

Starting in Microsoft Edge version 88, the Styles pane displays CSS variables and provides a link directly to the definition of each variable. In Microsoft Edge version 91 or later, you may use the arrow keys to easily navigate to CSS variables. To open the definition in the Styles pane, hover on a variable, and then select Enter. For more information about CSS variables, navigate to Using CSS custom properties (variables). To review real-time updates on this feature in the Chromium open-source project, navigate to Issue 1187735.

The --theme-body-background CSS variable highlighted in the Styles pane

Issues are automatically sorted by severity

The Issues tool displays recommendations to improve your website, including accessibility, performance, security, and so on. Based on your feedback, issues are now automatically sorted by severity. In each feedback category, each issue marked as an Error appears first, followed each issue marked as a Warning, then each issue marked as a Tip. To help you refine your issues, extra filter options are planned for a future update. For more information about how to review issues, navigate to Find and fix problems with the Microsoft Edge DevTools Issues tool.

The Issues tool displays sorted issues by severity

Microsoft Edge Developer Tools for Visual Studio Code version 1.1.7

The Microsoft Edge Tools for Visual Studio Code extension version 1.1.7 provides the DevTools from Microsoft Edge version 88. This extension now supports ARM devices and no longer depends on the Debugger for Microsoft Edge extension. Version 1.1.7 includes the following bug fixes and improvements.

  • Updated the reliability of target closure.
  • Updated the side panel to automatically refreshes when you debug targets that are created or destroyed.
  • Added a new contextual menu that gives you faster access to the extension settings and the latest Changelog.
  • Updated and simplified the release of extension documentation including the newest features.

To manually update to version 1.1.7, navigate to Update an extension manually. You may file issues and contribute to the extension on the vscode-edge-devtools GitHub repo.

Announcements from the Chromium project

The following sections announce additional features available in Microsoft Edge that were contributed to the open-source Chromium project.

Visualize CSS scroll-snap

You may now toggle the scroll-snap badge in the Elements tool to inspect the CSS scroll-snap alignment. When an HTML element on your webpage has scroll-snap-type applied to it, a scroll-snap badge displays next to it in the Elements tool. Choose the badge to turn on (or off) the display of a scroll-snap overlay on the webpage. To review an example webpage, navigate to Scroll Snap Demo. In the example, dots display on snap edges. The scroll port has a solid outline while the snap items have dash outlines. The scroll padding is filled in green while the scroll margin is filled in orange. To review the history of this feature in the Chromium open-source project, navigate to Issue 862450.

CSS scroll-snap

New Memory Inspector tool

Use the new Memory Inspector tool to inspect an ArrayBuffer in JavaScript and Wasm memory. Open the Memory in JS demo webpage. In the Sources tool, open the memory-write-wasm file, and set a breakpoint at line 0x03c. Refresh the webpage. Expand the Scope section in the debugger pane. The new icon is displayed next to the buffer value. Choose it to open the new Memory Inspector tool.

To learn more about debugging in the Sources tool, navigate to Using the Debugger pane to debug JavaScript code. To review the history of this feature in the Chromium open-source project, navigate to Issue 1166577.

Memory Inspector tool

New Badge settings pane in the Elements tool

Now, use the Badge settings in the Elements tool to turn on (or off) individual badges. Use this feature to customize and stay focused on important badges while you inspect webpages. To display the badge settings pane at the top of the Elements tool, complete the following actions.

  1. Hover on any element.
  2. Open the contextual menu (right-click).
  3. Choose Badge settings....

To display (or hide) the badges, choose (or remove) the checkbox next to the badge name.

Badge settings pane in the Elements tool

Enhanced image preview with aspect ratio information

Image previews in the DevTools have been enhanced to display more information, including the following details.

  • Rendered size
  • Rendered aspect ratio
  • Intrinsic size
  • Intrinsic aspect ratio
  • File size

The information helps you better understand your images and apply optimization. The image aspect ratio information is also available in the Network tool, when you choose an image preview.

In the Elements tool, image preview now displays more information about the image.

Also, the image aspect ratio information is available in the Network tool, when you choose an image preview.

To review the history of this feature in the Chromium open-source project, navigate to Issues 1149832 and 1170656.

New options to configure Content-Encodings in the Network conditions tool

In the Network tool, choose the new More network conditions... button next to the Throttling dropdown menu to open the Network conditions tool. To test if server responses are correctly encoded for browsers that don't support gzip, brotli, or another future Content-Encoding, complete the following actions.

  1. Open the Network conditions tool
  2. Navigate to Accepted Content-Encodings.
  3. Remove the checkbox next to the Content-Encoding you want to test.

To review the history of this feature in the Chromium open-source project, navigate to Issue 1162042.

New More network conditions... button opens the Network Conditions tool to configure Content-Encoding

Styles pane enhancements

New shortcut to display computed value in the Styles pane

Now, to display the computed CSS value in the Styles pane, complete the following actions.

  1. Hover on a CSS property.
  2. Open the contextual menu (right-click).
  3. Choose View computed value.

To review the history of this feature in the Chromium open-source project, navigate to Issue 1076198.

New shortcut to display computed value

Support for the accent-color keyword

The autocomplete UI of the Styles pane now detects the accent-color CSS keyword, which allows you to specify the accent color for UI controls generated by the element. Examples of UI controls that are generated by an element include checkboxes or radio buttons. For more information about the status of the Chromium implementation, navigate to Feature: accent-color CSS property. To turn on this feature, navigate to edge://flags#enable-experimental-web-platform-features and set the checkbox to Enabled. To review the history of this feature in the Chromium open-source project, navigate to Issue 1092093.

accent-color CSS keyword

Display details about blocked features in the Frame details view

Permissions Policy is a web platform API that gives a website the ability to allow or block the use of browser features in an individual frame or in an iframe that it embeds. For more information, navigate to Permissions Policy Explainer. To display the details on why a feature is blocked, complete the following actions.

  1. Navigate to OOPIF Permissions Policy.
  2. Navigate to the Application tool.
  3. Choose a frame.
  4. Navigate to the Permissions Policy section.
  5. Navigate to the Disabled Features property.
  6. Choose Show details.
  7. Choose the icon next to each policy to navigate to the iframe or network request that blocked the feature.

To review the history of this feature in the Chromium open-source project, navigate to Issue 1158827.

Blocked features in the Frame details view

Filter experiments in the Experiments setting

Find experiments quicker with the new experiment filter. For example, to turn on new experiments for code issues, complete the following actions. ``

  1. Navigate to Settings > Experiments.
  2. Navigate to the Filter textbox.
  3. Type issues.

Filter experiments in the Experiments setting

New Vary Header column in the Cache storage pane

Use the new Vary Header column in the Cache Storage pane to display the Vary HTTP response header values. To review the history of this feature in the Chromium open-source project, navigate to Issue 1186049.

Vary Header column

Sources tool improvements

Support for new JavaScript features

DevTools now support the new Private brand checks a.k.a. #foo in obj JavaScript language feature. The private brand checks feature extends the in operator to support Private class fields on a specific object. Try it in the Console and Sources tools. Also, to inspect the private fields, complete the following actions.

  1. Navigate to debugger pane.
  2. Navigate to the Scope section.

To review the history of this feature in the Chromium open-source project, navigate to Issue 11374.

JavaScript private brand checks

Enhanced support for breakpoints debugging

Modern JavaScript bundlers like Webpack, and Rollup support code splitting. To learn more about code splitting, navigate to Code splitting. In Microsoft Edge version 90 or earlier, DevTools only set breakpoints in a single bundle. In Microsoft Edge version 91 or later, DevTools properly sets breakpoints in multiple bundles when you debug a shared component. To review the history of this feature in the Chromium open-source project, navigate to Issues 1142705, 979000, and 1180794.

Support hover preview with bracket notation

DevTools now support hover preview on JavaScript member expressions that use the [] notation in the Sources tool. To review the history of this feature in the Chromium open-source project, navigate to Issue 1178305.

Support hover preview with [] notation

Improved outline of HTML files

DevTools now has better outline support for .html files. In the Sources tool, open the .html file. To turn on (or off) the code outline, select Ctrl+Shift+O on Windows/Linux or Cmd+Shift+O on macOS. In the following figure, DevTools now correctly list all functions in the outline. Previously, DevTools only displayed some of the functions. To review the history of this feature in the Chromium open-source project, navigate to Issues 761019 and 1191465.

 Improved outline of HTML files

Proper error stack traces for Wasm debugging

In Microsoft Edge version 90 or earlier, DevTools only displayed generic Wasm references in Error stack traces. In Microsoft Edge version 91 or later, DevTools resolves inline function requests and displays the source location in Error stack traces for Wasm debugging. To learn more about Error stack traces in the Console, navigate to error.

In Microsoft Edge version 91 or later, DevTools resolves inline function requests and displays proper error stack traces for Wasm debugging.

In Microsoft Edge version 90 and earlier, the source location doesn't display in the Error stack traces. Source locations include dsquare.

In Microsoft Edge version 91 and later, the source location displays in the Error stack traces.

To review the history of this feature in the Chromium open-source project, navigate to Issue 1189161.

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.