What's New in DevTools (Microsoft Edge 90)
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.
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 (
To turn on the experiment, see Turning an experiment on or off and select 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, see DevTools: Focus Mode UI.
Learn about DevTools with informative tooltips
The DevTools Tooltips feature helps you learn about all the different tools and panes. Hover over each outlined region of DevTools to learn more about how to use the tool. To turn on Tooltips, do one of the following:
- Select Customize and control DevTools (
...) > Help > Toggle the DevTools Tooltips.
H(Windows, Linux) or
- Open the Command Menu and then type
Then hover over each outlined region of DevTools:
To turn off Tooltips, press
Update: This feature has been released and is no longer experimental.
Note: As of May 2022, tooltips aren't supported from the Activity Bar; that is, in Focus Mode.
- Display DevTools Tooltips in Overview of DevTools.
Customize keyboard shortcuts in Settings
You can now customize the keyboard shortcut for any action in the DevTools.
To edit a keyboard shortcut:
Open DevTools, and then select Settings > Shortcuts.
Select the action you want to customize.
Click the Edit () icon.
Press the keys you want to bind to the action.
Click the checkmark () icon.
For more information about customizing and editing shortcuts, see Customize keyboard shortcuts in DevTools. For real-time updates on this feature in the Chromium open-source project, see Issue 174309.
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, see Update an extension manually. You can 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 appears next to that element in the Elements tool. To display (or hide) a flex overlay on the webpage, click the
To open the Flexbox editor, in the Elements tool, go to the Styles tab and then click 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 can toggle the overlay of each element:
- Edit CSS font styles and settings in the Styles pane
- Update .css files from within the Styles tab (CSS mirror editing)
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 can 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.
Click a Network request and then click the Initiator pane:
Expand or collapse the request initiator chain and follow the highlighted row:
To learn more about initiators in the Network tool, see Display initiators and dependencies.
Filtering in the Console is more consistent
While you filter with the Console Sidebar, the filters in the Log Levels dropdown list aren't available. Previously, the Log Levels dropdown list was highlighted when you hovered over it, even while a filter from the Console Sidebar was selected. In Microsoft Edge version 90, the Log Levels dropdown list is no longer highlighted when you hover over it while a filter from the Console Sidebar is selected.
To learn more about filtering in the Console, see Filter Messages in Console features reference.
Previously, if you open the Console sidebar and hover on Default levels, it was highlighted:
Starting in Microsoft Edge 90, if you click the Console sidebar and hover on Default levels, it doesn't highlight:
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 (
For the history of this feature in the Chromium open-source project, see Issue 1178530.
Emulate the CSS color-gamut media feature
The color-gamut media query emulates the approximate range of colors that are supported by the browser and device that you're testing. The dropdown list under Emulate CSS media feature color-gamut contains color spaces that DevTools can emulate. For example, to trigger a
color-gamut: p3 media query, select color-gamut: p3 from the dropdown list.
To emulate the CSS color-gamut media feature:
- To open DevTools, right-click the webpage, and then select Inspect. Or, press
I(Windows, Linux) or
I(macOS). DevTools opens.
- In DevTools, on the main toolbar, select the Rendering tab. If that tab isn't visible, click the More tabs () button, or else the More Tools () button. The Rendering tool opens.
- In the Emulate CSS media feature color-gamut dropdown, select a color-gamut option:
To learn more about the
color-gamut feature, see Color Display Quality: the 'color-gamut' feature.
For the history of this feature in the Chromium open-source project, see Issue 1073887.
- Rendering tool, to see what a webpage looks like with different display options or vision deficiencies
Improved tooling for Progressive Web Apps
PWA installability warning in the Console
The Console now displays a more detailed installability warning message for Progressive Web Apps (PWAs), with a link to Improving Progressive Web App offline support detection.
PWA description length warning in the Manifest pane
In the Application tool, the Manifest pane now displays a warning message if the manifest description exceeds 324 characters:
New Remote Address Space column in the Network tool
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:
In DevTools, open the Network tool.
In the Requests table (the main, lower part of the Network tool), right-click the header row, and then select Remote Address Space:
The Requests table now displays the Remote Address Space column:
To view the history of this feature in the Chromium open-source project, see Issue 1128885.
- Add or remove columns, in Network features reference.
Display allowed and disallowed features in the Frame details view
In the Application tool, the Frames node in the lower left opens the Frame details view. The Frame details view now includes a Permissions Policy section, which displays a list of allowed and disallowed browser features:
This list is controlled by the Permissions Policy web platform API, which allows a webpage to use, or blocks a webpage from using, specified browser features in an individual frame or in iframes that the frame embeds.
For the history of this feature in the Chromium open-source project, see Issue 1158827.
New SameParty column in the Cookies pane
The Cookies pane in the Application tool now displays the
SameParty attribute for each cookie:
SameParty attribute is a new boolean attribute to indicate whether a cookie is included in requests to origins of the same First-Party Sets.
For the history of this feature in the Chromium open-source project, see Issue 1161427.
fn.displayName property in the Console tool is now deprecated
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
Use the standard
Object.defineProperty method to define the
fn.name property. To learn more about
fn.name, see Function.name.
For the history of this feature in the Chromium open-source project, see Issue 1177685.
Full accessibility tree view in the Elements tool
This experiment provides a full accessibility tree view in the Elements tool. The Accessibility tab (grouped with the Styles tab) 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 DevTools, click the button area at the top of the Elements panel to switch the display in the Elements tool for all elements on the webpage.
To display the DOM tree view, click the Switch to DOM Tree view button area at the top:
To display the full accessibility tree, click the Switch to Accessibility Tree view button area at the top:
To turn on the experiment, see Turning an experiment on or off and select the checkbox next to Enable full accessibility tree view in the Elements panel.
For the history of this feature in the Chromium open-source project, see Issue 887173.
- Test accessibility using the Accessibility tab
- Inspect, edit, and debug HTML and CSS with the Elements tool
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).
This work is licensed under a Creative Commons Attribution 4.0 International License.