What's New In DevTools (Chrome 104)

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.

Restart frame during debugging

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.

Slow replay options in the Recorder panel

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.

custom extension for the Recorder panel

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!

Group files by Authored / Deployed in the Sources panel

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.

User Timings track in the Performance insights panel

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.

Reveal assigned slot of an element

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.

Simulate hardware concurrency for Performance recordings

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.

Preview non-color value when autocompleting CSS variables

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.

Identify blocking frames in the Back/forward cache pane

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.

Improved autocomplete suggestions for JavaScript objects

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. Resolves block scoped variables
  • The debugger now resolves variables in arrow functions in the Scope view with source maps. Resolves variables in arrow functions

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, 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   More   > 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.

What's New in DevTools

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59