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
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:
- Own enumerable properties
- Own non-enumerable properties
- Inherited enumerable properties
- 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, test cutting-edge web platform APIs, and find issues on your site before your users do!
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
.
What's new in DevTools
A list of everything that has been covered in the
What's new in DevTools
series.
Chrome 125
Chrome 124
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