Edit

Share via

What's New in DevTools (Microsoft Edge 87)

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

Improving DevTools localization

To meet your translation needs, the Microsoft Edge DevTools team is focused on improving translation quality. Starting in Microsoft Edge version 87, several strings and terms are locked and don't change, even when the rest of the DevTools are displayed in other languages. The list of affected strings and terms include the following:

  • The strings in the Lighthouse tool.
  • The term service worker.
  • Some of the Network tool filters such as URL, XHR, JS, and CSS.
  • The $0 Console Utilities API.

$0 is now available in the Console for users on localized versions of the DevTools. Thank you to the global developer community for helping improve localization of the Microsoft Edge DevTools. Continue to send feedback on localization quality to improve support for DevTools in all locales. For real-time updates on this feature in the Chromium open-source project, see Issue #1136655.

Network tool with non-localized filters

See also:

Move tools between top and bottom panels

DevTools now supports moving tools between the top and bottom panels. Customize your DevTools and improve your productivity by viewing any combination of two tools at the same time. For example, view the Elements and the Sources tools at the same time (by moving the Sources tool to the bottom).

To move any top tool to the bottom, right-click a tab and then select Move to bottom:

Move to bottom

To move any bottom tool to the top, right-click a tab and then select Move to top:

Move to top

For the history of this feature in the Chromium open-source project, see Issue #1075732.

See also:

Save and export using the Network Console

The Network Console tool now has improved compatibility with the Postman v2.1 and OpenAPI v2 schemas.

The Network Console tool now supports the following actions:

  • Save and export Collections and Environments.
  • Edit and export sets of environment variables within the Network Console tool.

Entering a name for the new environment:

Entering a name for the new environment

Selecting the format for the new environment:

Selecting the format for the new environment

Update: This feature has been released and is no longer experimental.

See also:

For history, in the Chromium open-source project, see Issue #1093687.

Improved CSS Grid tooling

The Microsoft Edge DevTools now support the following features for inspecting, viewing, and debugging your CSS grids.

  • Display a simplified grid overlay using the Inspect tool, or get more detailed information with persistent overlays.

  • To enable persistent grid overlays, click the grid icon next to a grid container element in the Elements tool, or click the grid in the Layout tool.

  • You can enable persistent overlays for multiple grids.

  • The new Layout tool allows you to easily toggle grid overlays and configure the appearance and the content for each.

The features are turned on by default.

Layout tool with grids

Update: This feature has been released and is no longer experimental.

See also:

For history, in the Chromium open-source project, see Issue #1047356.

The Microsoft Edge DevTools team is collaborating with the Chrome DevTools team and Chromium community to add new flexbox tooling features to DevTools. For updates on flexbox tooling in the Chromium open-source project, see Issue #1136394.

Customize keyboard shortcuts in Settings

You can now customize the keyboard shortcut for any action in the DevTools. Since Microsoft Edge version 84, you can choose between Visual Studio Code and DevTools (default) presets for keyboard shortcuts. Starting in Microsoft Edge version 87, you can further customize keyboard shortcuts.

Custom shortcut for pausing a script

Update: This feature has been released and is no longer experimental.

See also:

For history, in the Chromium open-source project, see Issue #174309.

Introducing the Microsoft Edge Tools for Visual Studio Code extension

The Elements for Visual Studio Code and Network for Visual Studio Code extensions are now merged into the new Microsoft Edge Developer Tools for Visual Studio Code extension. Use the Microsoft Edge DevTools for the following activities without leaving Microsoft Visual Studio Code.

  • Debug the DOM
  • Edit CSS
  • Inspect network traffic

With the extension, launch Microsoft Edge, connect to an existing instance of the browser, or use a headless browser directly from your editor. To start contributing and filing issues with your feedback about this extension, see the Microsoft Edge Developer Tools for Visual Studio Code repo on GitHub.

Using the extension in full browser mode:

Using the extension in full browser mode

Using the extension in headless mode:

Using the extension in headless mode

For more information, see Microsoft Edge DevTools extension for Visual Studio Code.

Announcements from the Chromium project

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

New WebAuthn tool

In earlier versions of Microsoft Edge, there was no native WebAuthn debugging support. You needed physical authenticators to test your web application with the Web Authentication API. With the new WebAuthn tool, you can do the following without the use of any physical authenticators:

  • Emulate authenticators.
  • Customize attributes of authenticators.
  • Inspect states of authenticators.

You can emulate authenticators and debug the Web Authentication API with the new WebAuthn tool. To open the WebAuthn tool, click the Customize and control DevTools (...) icon > More tools > WebAuthn. For real-time updates on this feature in the Chromium open-source project, see Issue #1034663.

Opening the WebAuthn tool:

Opening the WebAuthn tool

The WebAuthn tool:

The WebAuthn tool

For more information, see Emulate authenticators and debug WebAuthn.

Elements tool updates

See also:

View the Computed sidebar pane in the Styles pane

Toggle the Computed pane in the Styles pane. The Computed pane in the Styles pane is collapsed by default. To display or hide the Computed pane within the Styles pane, click the Show Computed Styles sidebar ('Show Computed Styles sidebar' icon) button.

Opening the Computed sidebar pane:

Opening the Computed sidebar pane

The Computed sidebar pane:

Computed sidebar pane

For real-time updates on this feature in the Chromium open-source project, see Issue #1073899.

See also:

Grouping CSS properties in the Computed pane

To view your applied CSS with less scrolling, group the CSS properties by categories in the Computed pane. You can also selectively focus on a set of related properties while you inspect your CSS. From the Elements tool, select an element. To group (or ungroup) the CSS properties, toggle the Group checkbox.

Grouping CSS properties

For real-time updates on this feature in the Chromium open-source project, see Issues #1096230, #1084673, and #1106251.

See also:

Lighthouse 6.4 in the Lighthouse tool

The Lighthouse tool is now running Lighthouse 6.4. For a full list of changes, see the Lighthouse release notes. For real-time updates on this feature in the Chromium open-source project, see Issue #772558.

See also:

performance.mark() events in the Timings section

The Timings section of a recording in the Performance tool now marks performance.mark() events. To try this feature and measure the performance of your JavaScript code, add performance.mark() events to your code.

The following code adds start and end performance markers before and after a for loop:

performance.mark('start');
for (var i = 0; i < 1000; i+=7;){
  console.log(i);
}
performance.mark('end');

Then, open the Performance tool and see the Timings section to record your JavaScript code. The performance.mark() events you added are now displayed in the recording.

performance.mark events

New resource-type and url filters in the Network tool

Use the new resource-type and url keywords in the Network tool to filter network requests. For example, use resource-type:image to focus on the network requests that are images:

The filter set to 'resource-type:image', to focus on the network requests that are images

To discover more special keywords such as resource-type and url, see filter requests by properties.

For real-time updates on this feature in the Chromium open-source project, see Issues #1121141 and #1104188.

Frame details view updates

In the Application tool, in the list of pages on the left, the bottom page is Frames, which often lists a frame named top.

Display COEP and COOP reporting to endpoint

In the Application tool, in the list of pages on the left, the bottom page is Frames, which often lists a frame named top. Select the frame to view the frame detail view, which includes the Security & Isolation section.

In the Security & Isolation section of the frame detail page, view the Cross-Origin Embedder Policy (COEP) and Cross-Origin Opener Policy (COOP) reporting to endpoint. The Reporting API defines Report-To, which is a new HTTP header that gives you a way to specify the server endpoints for the browser to send warnings and errors.

The 'reporting to' endpoint

For real-time updates on this feature in the Chromium open-source project, see Issue #1051466.

See also:

Display COEP and COOP report-only mode

In the Application tool, in the list of pages on the left, the bottom page is Frames, which often lists a frame named top. Select the frame to view the frame detail view, which includes the Security & Isolation section.

The Security & Isolation section of the frame detail page now displays the report-only label for COEP and COOP that are set to report-only mode.

The 'report-only' mode label

For real-time updates on this feature in the Chromium open-source project, see Issue #1051466.

See also:

View and fix color contrast issues in the CSS Overview tool

The CSS Overview tool now displays a list of elements on your page that have color contrast issues. The CSS Overview Accessible Colors Demo page has an example of a color contrast issue.

To view a list of elements that have a color contrast issue, on Contrast issues, click Text. To open the element in the Elements tool, click an element in the list. To help fix contrast issues, the Microsoft Edge DevTools automatically provide color suggestions.

Color contrast issues

Update: This feature has been released and is no longer experimental.

See also:

For history, in the Chromium open-source project, see Issue #1120316.

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.

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