What's new in DevTools (Microsoft Edge 80)

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.

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.

Figure 1

The Performance tool in the DevTools with the keyboard navigation and screen reader improvements
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 Feedback icon!

Chromium issue #963183

Using the DevTools in other languages

Many developers use other developer tools, like StackOverflow and VS 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 Portuguese - português
Korean - 한국어 Japanese - 日本語
Russian – русский Spanish - español

Navigate to edge://flags and set the Enable localized Developer Tools flag to Enabled. Also set the Developer Tools experiments flag to Enabled. Restart Microsoft Edge and open the DevTools. The DevTools match the language you use for Microsoft Edge in edge://settings/languages.

Figure 2

The DevTools in German
The DevTools in German

If you want to use the DevTools in a different language than the ones that are available, tweet at us or click the 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.

Figure 3

The Hints tab in the DevTools when the webhint browser extension is installed
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.

Figure 4

The 3D View in the DevTools
The 3D View in the DevTools

To access the 3D View, navigate to edge://flags and ensure that the Developer Tools experiments flag is set to Enabled. Restart Microsoft Edge and open the DevTools. Press F1 in the DevTools or go to Settings, navigate to Experiments section, and check the Enable 3D View checkbox. Now, 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 (VS 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 VS Code by adding the Elements for Microsoft Edge (Chromium) VS Code extension.

Figure 5

The Elements tool in VS Code using the Elements for Microsoft Edge extension The Elements tool in VS Code using the Elements for Microsoft Edge extension

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

Debugger for Microsoft Edge

With the Debugger for Microsoft Edge VS Code extension, debug JavaScript running in Microsoft Edge directly from VS Code!

Figure 6

The Debugger for Microsoft Edge Extension in VS Code
The Debugger for Microsoft Edge Extension in VS Code

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

webhint

The webhint VS 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.

Figure 7

The webhint VS Code extension analyzing a .tsx file in VS Code
The webhint VS Code extension analyzing a .tsx file in VS Code

Learn more about the VS 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!

Figure 8

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

Read our blog post to learn how to debug 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.

Figure 9

Messages in the Console when tracking prevention blocks access to storage for a tracker 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 80 that were contributed to the open source Chromium project.

Support for let and class redeclarations in the Console

The Console now supports redeclarations of let and class statements. The inability to redeclare was a common annoyance for web developers who use the Console to experiment with new JavaScript code.

Warning

Redeclaring a let or class statement in a script outside of the Console or within a single Console input still causes a SyntaxError.

For example, previously, when redeclaring a local variable with let, the Console threw an error:

Figure 10

The Console in Microsoft Edge 79 showing that the let redeclaration fails
The Console in Microsoft Edge 79 showing that the let redeclaration fails

Now, the Console allows the redeclaration:

Figure 11

The Console in Microsoft Edge 80 showing that the let redeclaration succeeds
The Console in Microsoft Edge 80 showing that the let redeclaration succeeds

Chromium issue #1004193

Improved WebAssembly debugging

DevTools has started to support the DWARF Debugging Standard, which means increased support for stepping over code, setting breakpoints, and resolving stack traces in your source languages within DevTools.

Network panel updates

Request Initiator Chains in the Initiator tab

You are now able to view the initiators and dependencies of a network request as a nested list. This may help you understand why a resource was requested, or what network activity a certain resource (such as a script) caused.

Figure 12

A Request Initiator Chain in the Initiator tab
A Request Initiator Chain in the Initiator tab

After logging network activity in the Network panel, click a resource and then go to the Initiator tab to view the Request Initiator Chain:

  • The inspected resource is bold. In the screenshot above, ai.2.min.js is the inspected resource.
  • The resources above the inspected resource are the initiators. In the screenshot above, https://www.microsoftedgeinsider.com is the initiator of ai.2.min.js. In other words, https://www.microsoftedgeinsider.com caused the network request for ai.2.min.js.
  • The resources below the inspected resource are the dependencies. In the screenshot above, https://dc.services.visualstudio.com/v2/track is a dependency of ai.2.min.js. In other words, ai.2.min.js caused the network request for https://dc.services.visualstudio.com/v2/track.

Note

Initiator and dependency information may also be accessed by holding Shift and then hovering over network resources. See View initiators and dependencies.

Chromium issue #842488

Highlight the selected network request in the Overview

After you click a network resource in order to inspect it, the Network panel now puts a blue border around that resource in the Overview. This is able to help you detect if the network request is happening earlier or later than expected.

Figure 13

The Overview pane highlighting the inspected resource
The Overview pane highlighting the inspected resource

Chromium issue #988253

URL and path columns in the Network panel

Use the new Path and URL columns in the Network panel to see the absolute path or full URL of each network resource.

Figure 14

The new Path and URL columns in the Network panel
The new Path and URL columns in the Network panel

Right-click the Waterfall table header and select Path or URL to show the new columns.

Chromium issue #993366

Updated User-Agent strings

DevTools supports setting a custom User-Agent string through the Network Conditions tab. The User-Agent string affects the User-Agent HTTP header attached to network resources, and also the value of navigator.userAgent.

The predefined User-Agent strings have been updated to reflect modern browser versions.

Figure 15

The User Agent menu in the Network Conditions tab
The User Agent menu in the Network Conditions tab

To access Network Conditions, open the Command Menu and run the Show Network Conditions command.

Chromium issue #1029031

Audits panel updates

New configuration UI

The configuration UI has a new, responsive design, and the throttling configuration options have been simplified. See Audits Panel Throttling for more information on the throttling UI changes.

Figure 16

The new configuration UI
The new configuration UI

Coverage tab updates

Per-function or per-block coverage modes

The Coverage tab has a new dropdown menu that lets you specify whether code coverage data should be collected per function or per block. Per block coverage is more detailed but also far more expensive to collect. DevTools uses per function coverage by default now.

Caution

You may see large code coverage differences in HTML files depending on whether you use per function or per block mode. When using per function mode, inline scripts in HTML files are treated as functions. If the script runs at all then DevTools marks the entire script as used code. Only if the script does not run at all does DevTools mark the script as unused code.

Figure 17

The coverage mode dropdown menu
The coverage mode dropdown menu

Coverage must now be initiated by a page reload

Toggling code coverage without a page reload has been removed because the coverage data was unreliable. For example, a function may be reported as unused if the runtime was a long time ago and the V8 garbage collector has cleaned it up.

Chromium issue #1004203

Feedback

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
Figure 18

The Feedback icon in the Microsoft Edge DevTools
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.

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.