What's New In DevTools (Microsoft Edge 81)

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, Visual Studio 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.

Accessibility improvements to the DevTools

The DevTools team has contributed 170 changes to Chromium to address high-impact color contrast, keyboard, and screen reader issues in the DevTools. Every developer building the web should be able to use the DevTools.

The Performance tool in the DevTools with the keyboard navigation and screen reader improvements

Want to learn how to make your web page accessible to all of your users? Download the Accessibility Insights and webhint extensions for Microsoft Edge to get started.

If you use screen readers or the keyboard to navigate around the DevTools, send us your feedback by tweeting at us or clicking the Send Feedback icon!

Chromium issue #963183

Using the DevTools in other languages

Many developers use other developer tools, like StackOverflow and Visual Studio Code, in their native language, not just in English. We’re excited to announce localization for the DevTools, which you are now able to use in one of 10 languages besides English:

Chinese (Simplified) - 中文(简体)

Chinese (Traditional) - 中文(繁體)

French – français

German - deutsch

Italian - italiano

Japanese - 日本語

Korean - 한국어

Portuguese - português

Russian – русский

Spanish - español

The DevTools automatically match the language you use for Microsoft Edge in edge://settings/languages.

If you want Microsoft Edge to be in one language and your DevTools to remain in English, press F1 in the DevTools to open Settings and disable Match browser language.

The DevTools in German

Console messages are not localized. Only the strings used in the DevTools UI are displayed in the language you use for Microsoft Edge.

If you want to use the DevTools in a different language than the ones that are available, tweet at us or click the Send Feedback icon.

Chromium issue #941561

webhint Microsoft Edge extension

The webhint Microsoft Edge extension allows you to easily scan your web page and get feedback on accessibility, browser compatibility, security, performance, and more within the DevTools. Read more at https://webhint.io.

The Hints tab in the DevTools when the webhint browser extension is installed

Try the webhint browser extension in Microsoft Edge. Once you install the extension, open the DevTools and select the Hints tab. From here, run a customizable site scan. Head over to webhint.io to learn more.

3D View

Use the 3D View to debug your web application by navigating through the Document Object Model (DOM) or the z-index stacking context.

The 3D View in the DevTools

To access the 3D View, press Ctrl + Shift + P, type in 3D View and select Show 3D View.

We're working on the UI and adding more functionality to the 3D View, so please send us your feedback.

Chromium issue #987787

Visual Studio Code extensions

The DevTools team has also released some extensions for Visual Studio Code that let you use the power of the DevTools directly from your text editor! Check out the extensions below:

Elements for Microsoft Edge

Use the Elements tool from within Visual Studio Code by adding the Elements for Microsoft Edge (Chromium) Visual Studio Code extension.

The Elements tool in Visual Studio Code using the Elements for Microsoft Edge extension

For more information, check out Elements for Microsoft Edge Visual Studio Code extension.

Debugger for Microsoft Edge

With the Debugger for Microsoft Edge Visual Studio Code extension, debug JavaScript running in Microsoft Edge directly from Visual Studio Code.

The Debugger for Microsoft Edge Extension in Visual Studio Code

For more information, check out how to debug Microsoft Edge from Visual Studio Code.

webhint

The webhint Visual Studio Code extension uses webhint to improve your web page while you're writing it! This extension runs and reports diagnostics on your workspace files based on webhint analysis.

The webhint Visual Studio Code extension analyzing a .tsx file in Visual Studio Code

Learn more about the Visual Studio Code webhint extension.

Visual Studio integration

In Visual Studio 2019 version 16.2 or later, use the Visual Studio debugger to debug JavaScript running in Microsoft Edge. Download Visual Studio 2019 to try this feature out!

Visual Studio with the option to launch your web app in Microsoft Edge Canary, Dev, or Beta

Learn more about debugging Microsoft Edge from Visual Studio.

Tracking prevention Console messages

Tracking prevention is a unique feature in Microsoft Edge that protects you from being tracked by websites you haven't visited before. The default tracking prevention setting is Balanced mode, which blocks 3rd party trackers and known malicious trackers for an experience that balances privacy and web compatibility. To give you more insight into the compatibility of your web page when certain trackers are blocked, we've also added warning messages in the Console when a tracker is blocked.

Messages in the Console when tracking prevention blocks access to storage for a tracker

Read more about tracking prevention and the balance between privacy and web compatibility.

Announcements from the Chromium project

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

Moto G4 support in Device Mode

After enabling the Device Toolbar, simulate the dimensions of a Moto G4 viewport from the Device list.

Simulating a Moto G4 viewport

Click Show Device Frame to show the Moto G4 hardware around the viewport.

Showing the Moto G4 hardware

Related features:

  • Open the Command Menu and run the Capture screenshot command to take a screenshot of the viewport that includes the Moto G4 hardware (after enabling Show Device Frame).
  • Throttle the network and CPU to more accurately simulate a mobile user's web browsing conditions.

Chromium issue #924693

Blocked cookies in the Cookies pane

The Cookies pane in the Application panel now displays blocked cookies with a yellow background.

Blocked cookies in the Cookies pane of the Application panel

Chromium issue #1030258

The Cookies tables in the Network and Application panels now include a Priority column.

Caution

Chromium-based browsers, like Microsoft Edge, are the only browsers that support cookie priority.

Chromium issue #1026879

All cells in the Cookie tables are editable now, except cells in the Size column because that column represents the network size of the cookie, in bytes. See Fields for an explanation of each column.

Editing a cookie value

Right-click a network request and select Copy > Copy as Node.js fetch to get a fetch expression that includes cookie data.

Copy as Node.js fetch

Chromium issue #1029826

More accurate web app manifest icons

Previously, the Manifest pane in the Application panel sent its own requests in order to display web app manifest icons. DevTools now shows the exact same manifest icon that Microsoft Edge uses.

Icons in the Manifest pane

Chromium issue #985402

Hover over CSS content properties to see unescaped values

Hover over the value of a content property to see the unescaped version of the value.

For example, in this demo when you inspect the p::after pseudo-element you see an escaped string in the Styles pane:

The escaped string

When you hover over the content value you see the unescaped value:

The unescaped value

More detailed source map errors in the Console

The Console now provides more detail on why a source map failed to load or parse. Previously it just provided an error without explaining what went wrong.

A source map loading error in the Console

Setting for disabling scrolling past the end of a file

Open Settings and then disable Preferences > Sources > Allow scrolling past end of file to disable the default UI behavior that allows you to scroll well past the end of a file in the Sources panel.

Disabling Allow scrolling past end of file

Scrolling past the end of a file is now disabled in the Sources panel

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

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

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 Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

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