What's New In DevTools (Chrome 104)

Jecelyn Yeen

Restart frame during debugging

The Restart frame feature is back! You can re-run the preceding code when paused somewhere in a function. Previously, this feature was deprecated and removed in Chrome 92 due to stability issues.

In this example, the debugger initially paused at the breakpoint (line 343) near the end of the toggleColorScheme function. To restart the debugging from the beginning of the toggleColorScheme function, expand the Call stack section in the Debugger pane, right-click on toggleColorScheme and select Restart frame.

Chromium issue: 1303521

Slow replay options in the Recorder panel

You can now replay user flows at a slower speed — slow, very slow, and extremely slow. These options let you better observe each step replay on screen.

Open the Recorder panel and start a new recording. Once the recording is done, click the Replay drop-down button. Select a speed to start a replay.

Chromium issue: 1306756

Build an extension for the Recorder panel

You can now build or install a Chrome extension to export replay scripts in your favorite format. See Recorder extension API documentation to learn how to build one.

To install a demo extension, follow these steps outlined in the documentation.

Chromium issue: 1325751

Group files by Authored / Deployed in the Sources panel

Enable the new Group files by Authored / Deployed option to organize your files in the Sources panel. When developing web applications with frameworks (for example, React, Angular), it can be difficult to navigate the source files due to the minified files generated by the build tools (for example, Webpack, Vite).

With this checkbox, you can group files into 2 categories for quicker file search:

• Authored. Similar to the source files you view in your IDE. DevTools generates these files based on source maps (provided by your build tools).
• Deployed. The actual files that the browser reads. Usually these files are minified.

Try it yourself with this React demo!

Chromium issue: 960909

New User Timings track in the Performance insights panel

Visualize performance.measure() marks in your recording with the new User Timings track in the Performance insights panel.

For example, this web page uses the performance.measure() method to calculate the elapsed time of text loading.

When you start measuring the page load, the User Timings track shows in the recording. Click the timings item to view its details on the side pane.

Chromium issue: 1322808

Reveal assigned slot of an element

Slotted elements in the Elements panel have a new slot badge. When debugging layout issues, use this feature to identify the element which affects the node's layout quicker.

This example contains cards with a few named slots. Inspect the person-occupation slot of a card, click the slot badge next to it to reveal its assigned slot.

Learn how to use <template> and <slot> elements to create a flexible template that can then be used to populate the shadow DOM of a web component.

Chromium issue: 1018906

Simulate hardware concurrency for Performance recordings

The new Hardware concurrency setting in the Performance panel allows developers to configure the value reported by navigator.hardwareConcurrency.

Some applications use navigator.hardwareConcurrency to control the degree of parallelism of their application, for example, to control Emscripten pthread pool size. With this feature, developers can test their application performance with different core counts.

Chromium issue: 1297439

Preview non-color value when autocompleting CSS variables

When autocompleting CSS variables, DevTools now populates the non-color variable with a meaningful value so that you can preview what kind of change the value will have on the node.

Chromium issue: 1285091

Identify blocking frames in the Back/forward cache pane

The Back/forward cache pane in the Application panel has new frames section to help you identify blocking frames that may be preventing the page from being eligible for bfcache.

Chromium issue: 1288158

Improved autocomplete suggestions for JavaScript objects

The autocompletion for JavaScript object properties now display based on this order:

1. Own enumerable properties
2. Own non-enumerable properties
3. Inherited enumerable properties
4. Inherited non-enumerable properties

Previously, developers found it harder to find relevant properties because the suggestion only favored own properties over inherited properties, and all inherited properties were given equal priority.

Chromium issue: 1299241

Source maps improvements

Here are a few fixes on source maps to improve the overall debugging experience:

• Breakpoints now work in inline <script> with sourceURL annotations.
• The debugger now resolves block scoped variables in the Scope view with source maps.
• The debugger now resolves variables in arrow functions in the Scope view with source maps.

Chromium issues: 1329113, 1322115

Miscellaneous highlights

These are some noteworthy fixes in this release:

• Fixed the Auto-completion setting for the Sources panel. Previously, the auto-complete always on even the setting is disabled. (1323286)
• Updated the Manifest tab in the Application panel to parse the latest color scheme format. (1318305)
• Improved the suggestions for the <script async> rendering blocking issues in the Performance insights panel. Previously, DevTools suggested to add async attribute to the script tag even though the script is already marked as async. (1334096)
• The Performance insights panel now detects iframes as potential causes for layout shifts. You can view the iframe details in the Details pane. (1328873)
• When open file in the Command menu, the authored files (files generated by source maps) are now ranked higher so they appear above similarly named deployed scripts. (1312929)

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com.
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.