What's New In DevTools (Microsoft Edge 90)

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.

Group tools together in Focus Mode

Focus Mode is an experimental interface that allows you to group different tools together based on your own debugging scenarios. The new Activity Bar displayed on the left includes predefined tool groups such as Layout and Debugging. To customize each tool group, close tools with the Close (X) icon or add new tools with the More tools (+) icon.

To turn on the experiment, navigate to Turning an experiment on or off and choose the checkboxes next to Focus Mode and DevTools Tooltips and Enable + button tab menus to open more tools. For more information about this feature or to comment with questions and ideas, navigate to DevTools: Focus Mode UI.

Display the Activity Bar

Learn about DevTools with informative tooltips

The DevTools Tooltips feature helps you learn about all the different tools and panes. Choose the Help (?) icon at the bottom of the Activity Bar to toggle tooltips in the DevTools. When tooltips are on, hover over each outlined region of DevTools to learn more about how to use the tool. To turn on the experiment, navigate to Turning an experiment on or off and choose the checkboxes next to Focus Mode and DevTools Tooltips and Enable + button tab menus to open more tools. For more information about this feature or to comment with questions and ideas, navigate to DevTools: Focus Mode UI.

Choose the Help (?) icon in the Activity Bar to display tooltips

Customize keyboard shortcuts in Settings

You may now customize the keyboard shortcut for any action in the DevTools. To edit a keyboard shortcut, complete the following actions.

  1. Open the DevTools, and then choose Settings > Shortcuts.
  2. Choose the action you want to customize.
  3. Choose the Edit (Edit Keyboard Shortcut icon) icon.
  4. Select the keys you want to bind to the action.
  5. Choose the checkmark (Checkmark Keyboard Shortcut icon) icon.

For more information about customizing and editing shortcuts, navigate to Customize keyboard shortcuts in DevTools. To review real-time updates on this feature in the Chromium open-source project, navigate to Issue 174309.

Customize keyboard shortcuts in the DevTools Settings on Shortcuts with a shortcut in edit mode

Customize keyboard shortcuts in the DevTools Settings on Shortcuts with a shortcut in edit mode

Microsoft Edge DevTools for Visual Studio Code extension update 1.1.4

The Microsoft Edge Developer Tools for Visual Studio Code extension version 1.1.4 for Microsoft Visual Studio Code now displays a favicon next to each of the DevTools instances. Console messages from Microsoft Edge now display in the DevTools Console under Output of Microsoft Visual Studio Code. Microsoft Visual Studio Code updates extensions automatically. To manually update to version 1.1.4, navigate to Update an extension manually. You may file issues and contribute to the extension on the vscode-edge-devtools GitHub repo.

The following figure displays messages from an example webpage logged in the Console tool in Microsoft Edge.

The following figure displays the same messages from the example webpage logged in the DevTools Console under Output of Microsoft Visual Studio Code.

Improved CSS flexbox editing with visual flexbox editor and multiple overlays

DevTools now has dedicated CSS flexbox debugging tools. If the display: flex or display: inline-flex CSS style is applied to an HTML element, a flex icon displays next to that element in the Elements tool. To display (or hide) a flex overlay on the webpage, choose the flex icon. To review the history of this feature in the Chromium open-source project, navigate to Issues 1166710 and 1175699.

To open the Flexbox editor, navigate to the Styles pane and choose the new icon next to the display: flex or display: inline-flex style. The Flexbox editor provides a quick way to edit the flexbox properties.

In addition, the Flexbox section in the Layout pane displays all of the flexbox elements on the webpage. You may toggle the overlay of each element.

Keyboard navigation improvements for network requests

Previously, you were not able to expand or collapse the chain of requests using the arrow keys on the keyboard in the Initiator pane, unlike the DOM in the Elements tool. When a network request is selected in the Network tool, the Initiator pane displays the chain of requests that initiated the currently selected request.

In Microsoft Edge version 90, you may expand or collapse the chain of requests using the arrow keys on the keyboard in the Initiator pane. The focused network request in the chain is also now highlighted. To learn more about initiators in the Network tool, navigate to Display initiators and dependencies. To review the history of this feature in the Chromium open-source project, navigate to Issues 1158276 and 1160637.

Filtering in the Console is more consistent

While you filter with the Console Sidebar, the filters in the Log Levels dropdown are not available. Previously, the Log Levels dropdown highlighted when you hovered on it, even while a filter from the Console Sidebar was chosen. In Microsoft Edge version 90, the Log Levels dropdown no longer highlights when you hover on it while a filter from the Console Sidebar is chosen. To learn more about filtering in the Console, navigate to Filter Messages.

Announcements from the Chromium project

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

The Console now escapes double quote characters

Previously, the Console did not output valid double quote (") characters in JavaScript strings. Starting in Microsoft Edge version 90, the Console outputs JavaScript strings using escaped double quote (") characters. To review the history of this feature in the Chromium open-source project, navigate to Issue 1178530.

The Console outputs JavaScript strings using escaped double quote () characters

Emulate the CSS color-gamut media feature

The color-gamut media query emulates the approximate range of colors supported by the browser and the device you are testing. The dropdown under Emulate CSS media feature color-gamut contains color spaces that DevTools may emulate. For example, to trigger a color-gamut: p3 media query, choose color-gamut: p3 from the dropdown.

To emulate the CSS color-gamut media feature, complete the following actions.

  1. Open the Command Menu.
  2. Type Rendering.
  3. Run the Show Rendering command.
  4. Navigate to Emulate CSS media feature color-gamut and choose an option.

To learn more about the color-gamut feature, navigate to Color Display Quality: the 'color-gamut' feature. To review the history of this feature in the Chromium open-source project, navigate to Issue 1073887.

Emulate the CSS color-gamut media feature

Improved Progressive Web Apps tooling

PWA installability warning in the Console

The Console now displays a more detailed Progressive Web Apps (PWA) installability warning message with a link to Improving Progressive Web App offline support detection.

PWA installability warning in Console tool

PWA description length warning in the Manifest pane

The Manifest pane now displays a warning message if the manifest description exceeds 324 characters.

PWA description truncate warning

To review the history of this feature in the Chromium open-source project, navigate to Issues 965802, 1146450, and 1169689.

New Remote Address Space column in the Network tool

The new Remote Address Space column displays the network IP address space of each network resource. To display the new Remote Address Space column, complete the following actions.

  1. Navigate to the Network tool.
  2. In the Requests table, hover on the header row, and open the contextual menu (right-click). To learn how to add or remove columns from the Requests table, navigate to Add or remove columns.
  3. Choose Remote Address Space.

The Requests table now displays a new column with the header named Remote Address Space. To review the history of this feature in the Chromium open-source project, navigate to Issue 1128885.

Display allowed and disallowed features in the Frame details view

The Frame details view now displays a list of allowed and disallowed browser features controlled by the Permissions Policy. Permissions Policy is a web platform API that allows (or blocks) a webpage the use of browser features in an individual frame or in iframes that it embeds. To review the history of this feature in the Chromium open-source project, navigate to Issue 1158827.

Allowed and disallowed features based on the Permission Policy

New SameParty column in the Cookies pane

The Cookies pane in the Application tool now displays the SameParty attribute for each cookie. The SameParty attribute is a new boolean attribute to indicate whether a cookie is included in requests to origins of the same First-Party Sets. To review the history of this feature in the Chromium open-source project, navigate to Issue 1161427.

SameParty column in the Cookies pane

fn.displayName property in the Console tool is now deprecated

Previously, the fn.displayName property allowed you to control debug names for functions to display in error.stack and in DevTools stack traces. Starting in Microsoft Edge version 90, the fn.displayName property is now deprecated, and replaced by the fn.name property. Use the standard Object.defineProperty method to define the fn.name property. To learn more about fn.name, navigate to Function.name. To review the history of this feature in the Chromium open-source project, navigate to Issue 1177685.

An example of the fn.name property to control debug names for functions

Full accessibility tree view in the Elements tool

This experiment provides a full accessibility tree view in the Elements tool. The Accessibility pane provides a partial accessibility tree view, that displays the direct ancestor chain from the root node to the inspected node. After you turn on this experiment and reload the DevTools, choose one of the following buttons to switch the display in the Elements tool for all elements on the webpage.

  • To display the full accessibility tree view , choose the Switch to Accessibility Tree view.
  • To display the DOM tree view, choose the Switch to DOM Tree view.

To turn on the experiment, navigate to Turning an experiment on or off and choose the checkbox next to Enable full accessibility tree view in Elements pane. To review the history of this feature in the Chromium open-source project, navigate to Issue 887173.

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.

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.