What's new in DevTools (Microsoft Edge 84)
Announcements from the Microsoft Edge DevTools team
The following sections are a list of announcements you may have missed from the Microsoft Edge DevTools team! Check them out to try new features in the DevTools, VS Code extensions, and more. To stay up to date on all the latest and greatest features in your developer tools, download the Microsoft Edge preview channels and follow us on Twitter.
Use the DevTools in Windows high contrast mode
The Microsoft Edge DevTools are now displayed in high contrast mode when Windows is in high contrast mode.
Follow the instructions to turn on high contrast mode in Windows. Open the DevTools in Microsoft Edge by pressing
I. The DevTools are displayed in high contrast mode.
The Microsoft Edge DevTools currently support high contrast mode on Windows but not on macOS.
Chromium issue #1048378
Match keyboard shortcuts in the DevTools to VS Code
From your feedback and the Chromium public issue tracker, the Microsoft Edge DevTools team learned that you wanted the ability to customize keyboard shortcuts in the DevTools. In Microsoft Edge 84, you are now able to match keyboard shortcuts in the DevTools to VS Code, which is just one of the features the team is working on for shortcut customization.
To try the experiment, open DevTools Settings by pressing
? or selecting the icon in the top-right corner of the DevTools. Navigate to the Experiments section and check Enable custom keyboard shortcuts settings tab (requires reload). Now reload the DevTools, open Settings again, and navigate to the Shortcuts section.
Select DevTools (Default) in the Match shortcuts from preset dropdown and select Visual Studio Code. The keyboard shortcuts in the DevTools now match the shortcuts for equivalent actions in VS Code.
For example, the keyboard shortcut for pausing or continuing running a script in VS Code is
F5. With the DevTools (Default) preset, that same shortcut in the DevTools is
F8 but with the Visual Studio Code preset, that shortcut is now also
The feature is currently available in Microsoft Edge 84 as an experiment, so please share your feedback with the team!
Chromium issue #174309
Remote debug Surface Duo emulators
With the Surface Duo emulator, you are able to test how your web content renders on a new class of foldable and dual-screen devices. The emulator runs the Android operating system and provides the Microsoft Edge Android app. Load your web content in the Microsoft Edge app and debug it with the Microsoft Edge DevTools.
Selecting inspect for the tab or PWA that you want to debug opens the Microsoft Edge DevTools. Follow the step-by-step guide to remotely debug your web content on the Surface Duo emulator.
Resize the DevTools drawer more easily
In Microsoft Edge 83 or earlier, you were only able to resize the DevTools Drawer by hovering inside the Drawer's toolbar. The Drawer behaved differently than the other resize controls for panes in the DevTools where you hover over the border of the pane to resize it. Select the following image to see how resizing the Drawer worked in version 83 or earlier of Microsoft Edge.
Starting with Microsoft Edge 84, you are now able to resize the Drawer by hovering over the border of the Drawer. This change aligns the behavior resizing the DevTools Drawer with the way you resize other panes in the DevTools. Select the following image to see resizing in action in Microsoft Edge 84.
Chromium issue #1076112
Screencasting navigation buttons display focus
When remote debugging an Android device, a Windows 10 device, or a Surface Duo emulator, you are able to toggle screencasting with the icon in the top-left corner of the DevTools. With screencasting enabled, you are able to navigate the tab in Microsoft Edge on the remote device from the DevTools window. In Microsoft Edge 84, these navigation buttons are now also keyboard accessible.
Chromium issue #1081486
Network panel Details pane is now accessible
In Microsoft Edge 84, the Details pane in the Network panel now takes focus when you open it for a resource in the Network Log. This change allows screen readers to read out and interact with the content of the Details pane.
Chromium issue #963183
Announcements from the Chromium project
The following sections announce additional features available in Microsoft Edge 84 that were contributed to the open source Chromium project.
Fix site issues with the new Issues tool in the DevTools Drawer
The new Issues tool in the DevTools Drawer was built to help reduce the notification fatigue and clutter of the Console. Currently, the Console is the central place for website developers, libraries, frameworks, and Microsoft Edge to log messages, warnings, and errors. The Issues tool aggregates warnings from the browser in a structured, aggregated, and actionable way, links to affected resources within Microsoft Edge DevTools, and provides guidance on how to fix the issues. Over time, you should see more and more warnings in Microsoft Edge surfacing in the Issues tool rather than the Console, which should help reduce the clutter in the Console.
To get started, see Find And Fix Problems With The Microsoft Edge DevTools Issues tool.
Chromium issue #1068116
View accessibility information in the Inspect Mode tooltip
Chromium issue #1040025
Performance panel updates
View Total Blocking Time information in the footer
To get Total Blocking Time information, do not use the Refresh Page workflow for recording page load performance.
Instead, select Record , manually reload the page, wait for the page to load, and then stop recording.
If you see
Total Blocking Time: Unavailable, Microsoft Edge DevTools did not get the required information from the internal profiling data in Microsoft Edge.
Chromium issue #1054381
Layout Shift events in the new Experience section
The new Experience section of the Performance panel helps you detect layout shifts. Cumulative Layout Shift (CLS) is a metric that helps you quantify unwanted visual instability.
Select the Layout Shift event to see the details of the layout shift in the Summary pane. Hover over the Moved from and Moved to fields to visualize where the layout shift occurred.
More accurate promise terminology in the Console
When logging a
Promise, the Console incorrectly provided
PromiseStatus value set to
The Console now uses the term
fulfilled, which aligns with the
Promise specification. For more information about the
Promise specification, see States and Fates on GitHub.
V8 issue #6751
Styles pane updates
Support for the revert keyword
The autocomplete UI of the Styles pane now detects the revert CSS keyword, which reverts the cascaded value of a property to the previous value applied to the styling of the element.
Chromium issue #1075437
Hover over a
background-image value in the Styles pane to see a preview of the image in a tooltip.
Chromium issue #1040019
Color Picker now uses space-separated functional color notation
CSS Color Module Level 4 specifies that color functions, such as
rgb(), should support space-separated
arguments. For example,
rgb(0, 0, 0) is equivalent to
rbg(0 0 0).
When you choose colors with the Color Picker or alternate between color representations in the Styles pane by holding
Shift and selecting the
background-color value, you should see the space-separated argument syntax.
You should also see the syntax in the Computed pane and the Inspect Mode tooltip.
Microsoft Edge DevTools is using the new syntax because upcoming CSS features such as color() do not support the deprecated comma-separated argument syntax.
The space-separated argument syntax has been supported in most browsers for a while. For more information, see Can I use: Space-separated functional color notations?
Chromium issue #1072952
Deprecation of the Properties pane in the Elements panel
The Properties pane in the Elements panel is deprecated. Run
console.dir($0) in the Console instead.
App shortcuts support in the Manifest pane
App shortcuts help users quickly start common or recommended tasks within a web app. The app shortcuts menu is shown only for Progressive Web Apps that are installed on the user's desktop or mobile device.
Download the Microsoft Edge preview channels
If you are on Windows 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
To discuss the new features and changes in the post, or anything else related to DevTools:
- Send your feedback using the Feedback icon in the DevTools
- Tweet at @EdgeDevTools
- Submit a suggestion to The Web We Want
- File bugs on this page in the edge-developer repository
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 Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
This work is licensed under a Creative Commons Attribution 4.0 International License.