What's New In DevTools (Chrome 80)

Published on Thursday, December 5, 2019

Technically, I'm a writer

Interested in helping improve DevTools? Sign up to participate in Google User Research here.

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 will still cause a SyntaxError.

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

A screenshot of the Console in Chrome 78 showing that the let redeclaration fails.

Now, the Console allows the redeclaration:

A screenshot of the Console in Chrome 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. Check out Improved WebAssembly debugging in Chrome DevTools for the full story.

A screenshot of the new DWARF-powered WebAssembly debugging.

Network panel updates

Request Initiator Chains in the Initiator tab

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

A screenshot of 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 its Request Initiator Chain:

The inspected resource is bold. In the screenshot above, https://web.dev/default-627898b5.js is the inspected resource.
The resources above the inspected resource are the initiators. In the screenshot above, https://web.dev/bootstrap.js is the initiator of https://web.dev/default-627898b5.js. In other words, https://web.dev/bootstrap.js caused the network request for https://web.dev/default-627898b5.js.
The resources below the inspected resource are the dependencies. In the screenshot above, https://web.dev/chunk-f34f99f7.js is a dependency of https://web.dev/default-627898b5.js. In other words, https://web.dev/default-627898b5.js caused the network request for https://web.dev/chunk-f34f99f7.js.

Initiator and dependency information can 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 can help you detect if the network request is happening earlier or later than expected.

A screenshot of 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.

A screenshot of 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.

A screenshot of the User Agent menu in the Network Conditions tab.

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

You can also set User-Agent strings in Device Mode.

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.

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 executes at all then DevTools will mark the entire script as used code. Only if the script doesn't execute at all will DevTools mark the script as unused code.

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 can be reported as unused if its execution was a long time ago and V8's garbage collector has cleaned it up.

Chromium issue #1004203

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

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

Submit a suggestion or feedback to us via crbug.com.
Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
Tweet at @ChromeDevTools.
Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.