What's New In DevTools (Microsoft Edge 83)
Following the updated Chromium schedule, we are adjusting our schedule for upcoming Microsoft Edge releases and cancelling the Microsoft Edge 82 release. Check out our blog post for more info.
Here are the new features available in the DevTools in Microsoft Edge 83.
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.
Remotely debug Microsoft Edge on Windows 10 Devices
The Remote Tools for Microsoft Edge (Beta) app is now available in the Microsoft Store. Using this app, which extends the Windows Device Portal, you are able to connect from the instance of Microsoft Edge running on your development machine to a remote Windows 10 device, see a list of targets (all tabs in Microsoft Edge and PWAs open on the Windows 10 device), and use the DevTools on your development machine against a target running on the remote Windows 10 device.
Read our guide for setting up your Windows 10 device and your development machine for remote debugging. Let us know about your remote debugging experience by tweeting or clicking the Feedback icon!
New ways to access Settings
There are tons of settings for the DevTools that you are able to customize to make the DevTools look, feel, and work the way you need. In Microsoft Edge 83, accessing Settings in the DevTools is now much easier. Open Settings with the gear icon next to Console alerts and the main menu.
The gear icon opens Settings in the DevTools
You are also able to open Settings from the Main Menu under More tools.
Main Menu > More tools > Settings
Chromium issue #1050855
New and improved infobars
Informational notification bars (infobars) in DevTools now have an improved look and more functionality. In Microsoft Edge 83, infobars are easier to read and provide buttons so you are able to take the relevant action right away.
Infobar for pretty-printing a minified file in Microsoft Edge 83
Chromium issue #1056348
Navigate the Color Picker with your keyboard
The Color Picker is a GUI in the Elements panel for changing
background-color declarations. In previous versions of Microsoft Edge, you were not able to navigate the Shades section of the Color Picker with the keyboard.
You are now able to use your keyboard to move the selector in the Shades section of the Color Picker
In Microsoft Edge 83, you are now able to use the keyboard to move the selector in the Shades section of the Color Picker.
Chromium issue #963183
Properties tab now populates after a page refresh
In Microsoft Edge 81 and earlier, the Properties tab in the Elements panel was broken by page refreshes. When you refreshed the page, the Properties tab did not populate the properties of the currently-selected element.
In Microsoft Edge 81 and earlier, the Properties tab was blank after a page refresh
In Microsoft Edge 83, you are now able to see the properties of the currently-selected element after a page refresh in the Properties tab.
In Microsoft Edge 83, the Properties tab displays the properties of the currently-selected element after a page refresh
Chromium issue #1050999
Use the arrow keys to scroll in the Changes tool
Open the Changes tool by pressing
P in the DevTools to open the Command Menu and typing
changes. Select and run the Show Changes command to open the Changes tool in the DevTools drawer.
When you have made a change to a minified file, the Changes tool enables you to scroll horizontally to see all of your minified code. Starting in Microsoft Edge 83, you may now scroll horizontally using the arrow keys on your keyboard.
In Microsoft Edge 83, you may scroll horizontally with the arrow keys to see the changes you made to your minified code in the Changes tool
Chromium issue #963183
Announcements from the Chromium project
The following sections announce additional features available in Microsoft Edge 83 that were contributed to the open source Chromium project.
Emulate vision deficiencies
Open the Rendering tab and use the new Emulate vision deficiencies feature to get a better idea of how people with different types of vision deficiencies experience your site.
Emulating blurred vision
DevTools is able to emulate blurred vision and the following types of color vision deficiencies.
|Color Vision Deficiency||Details|
|Protanopia||The inability to perceive any red light.|
|Deuteranopia||The inability to perceive any green light.|
|Tritanopia||The inability to perceive any blue light.|
|Achromatopsia||The inability to perceive any color, except for shades of grey (extremely rare).|
Less extreme versions of these color vision deficiencies exist, and in fact they are more common. For example, protanomaly is a reduced sensitivity to red light (as opposed to protanopia, which is the complete inability to perceive red light). However, these -omaly vision deficiencies are not as clearly defined: every person with such a vision deficiency is different and might see things differently (being able to perceive more/less of the relevant colors).
By designing for the more extreme simulations in DevTools, your web apps are guaranteed to be accessible to people with protanomaly, deuteranomaly, tritanomaly, and achromatomaly as well.
Chromium issue #1003700
Emulate locales by setting a location in Sensors > Location. Open the
Command Menu and type
Sensors to access the Sensors tab. After performing these actions,
DevTools modifies the current default locale, affecting the following:
Intl.*APIs, for example:
*.prototype.toLocaleString, for example:
- DOM APIs such as
Accept-LanguageHTTP request header
Emulating a locale
To try a demo, see Locale-dependent code example.
Chromium issue #1051822
Cross-Origin Opener Policy (COOP) and Cross-Origin Embedder Policy (COEP) debugging
The Status column now provides a quick explanation of why a request was blocked as well as a link to view the headers of that request for further debugging:
Blocked requests in the Status column
The Response Headers section of the Headers tab provides more guidance on how to resolve the issues:
More guidance in the Response Headers section
Chromium issue #1051466
View network requests that set a specific cookie path
Use the new
cookie-path filter keyword in the Network panel to focus on
the network requests that set a specific cookie path.
Check out Filter requests by properties to discover more keywords
Dock to left from the Command Menu
Open the Command Menu and run the
Dock to left command to move DevTools to the left of your viewport.
DevTools docked to the left of the viewport
The Dock to left feature has been available since Microsoft Edge 75 but it was previously only accessible from the Main Menu. The new feature in Microsoft Edge 83 is that you may now access this feature from the Command Menu.
Chromium issue #1011679
The Audits panel is now the Lighthouse panel
The DevTools team frequently got feedback from web developers that while it was possible to run Lighthouse from DevTools, when they tried it out they were not able to find the "Lighthouse" panel, so the Audits panel is now the Lighthouse panel.
The Lighthouse panel
The Lighthouse panel provides links to content hosted on third-party websites. Microsoft is not responsible for and has no control over the content of these sites and any data they may collect.
Delete all Local Overrides in a folder
After setting up Local Overrides you may right-click a folder and select the new Delete all overrides option to delete all Local Overrides in that folder.
Delete all overrides
Chromium issue #1016501
Updated Long tasks UI
You have been able to visualize Long Tasks in the Performance panel for a while now, but in Microsoft Edge 83 the Long Task visualization UI in the Performance panel has been updated. The Long Task portion of a task is now colored with a striped red background.
The new Long Task UI
Chromium issue #1054447
Maskable icon support in the Manifest pane
Android Oreo introduced adaptive icons, which display app icons in a variety of shapes across different device models. Maskable icons are a new icon format that support adaptive icons, which enable you to ensure that your PWA icon looks good on devices that support the maskable icons standard.
Enable the new Show only the minimum safe area for maskable icons checkbox in the Manifest pane to check that your maskable icon looks good on Android Oreo devices.
The "Show only the minimum safe area for maskable icons" checkbox
This feature launched in Microsoft Edge 81. The updates covered here in Microsoft Edge 83 were not covered in What's New In DevTools (Microsoft Edge 81).
To discuss the new features and changes in this 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 document in the edge-developer repository
The Feedback icon in the Microsoft Edge DevTools
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.
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.