Recorder updates
Replay extensions support
The
Recorder
introduces support for custom replay options that you can embed into DevTools with an extension.
Try out the
example extension
. Select the new custom replay option to open the custom replay UI.
To customize the
Recorder
to your needs and integrate it with your tools, consider developing your own extension: explore the
chrome.devtools.recorder API
and check out more
extension examples
.
Chromium issue:
1400243
.
Record with pierce selectors
In addition to
custom, CSS, ARIA, text, and XPath selectors
, you can now record using
pierce selectors
. These selectors behave like CSS ones but can also pierce through shadow roots.
Start a new recording on a page with
shadow DOM
and check
Pierce
in
Selector types to record
. Record your interaction with elements in the shadow DOM and inspect the corresponding step.
Chromium issue:
1411188
.
Export as a Puppeteer script with Lighthouse analysis
The
Recorder
introduces a new export option:
Puppeteer (including Lighthouse analysis)
. With
Puppeteer
, you can automate and control Chrome. With
Lighthouse
, you can capture and improve your website's performance.
Open your recording, click
Export
, select the new option, and save the
.js
file.
Run the Puppeteer script
to get a Lighthouse report in a
flow.report.html
file.
Get extensions
Explore options to customize your recorder experience, for example, with custom export options. Get extensions for the
Recorder
by clicking the
Export
>
Get extensions
in a recording.
Feel free to
add your own extension
to the list of
Recorder Extensions
. We look forward to seeing yours on the list!
Chromium issues:
1417104
,
1413168
.
Elements > Styles updates
CSS documentation
How many times a day do you look up documentation on CSS properties? The
Elements
>
Styles
pane now shows you a short description when you hover over a property.
The tooltip also has a
Learn more
link that takes you to an
MDN CSS Reference
on this property.
If you know CSS well, you might find the tooltips bothersome. To turn them all off, check
Don't show
.
To turn them back on, check
Settings
>
Preferences
>
Elements
>
Show CSS documentation tooltip
.
Chromium issue:
1401107
.
CSS nesting support
The
Elements
>
Styles
pane now recognizes
CSS Nesting
syntax and applies nested styles to the right elements.
Chromium issue:
1172985
.
Marking logpoints and conditional breakpoints in the Console
Further improving the
enhanced breakpoint UX
, the
Console
now marks messages triggered by breakpoints:
The
Console
now gives you proper anchor links to breakpoints in source files instead of
VM<number>
scripts that Chrome creates to run any piece of Javascript on
V8
.
Click the link next to the breakpoint message to jump directly to the breakpoint editor.
Chromium issue:
1027458
.
Ignore irrelevant scripts during debugging
To help you focus on the most important parts of your code, you can now add irrelevant scripts to the
Ignore List
right from the file tree on the
Sources
>
Page
pane.
Right-click any script or folder and select one of the ignore-related options. You may see options to add or remove the script or folder to and from the list. The
Debugger ignores scripts
added to the list and omits them in the call stack.
All ignore-listed scripts and folders are grayed out in the file tree.
If you select an ignored script, the
Configure
button takes you to
Settings
>
Ignore List
. You can also hide ignored sources from the file tree with
>
Hide ignore-listed sources
.
Chromium issue:
883325
.
JavaScript Profiler deprecation started
As early as
Chrome 58
, the DevTools team planned to eventually deprecate the
JavaScript Profiler
and have Node.js and Deno developers use the
Performance
panel for profiling JavaScript CPU performance.
This DevTools version (112) starts the
four-phase
JavaScript Profiler
deprecation
. The
JavaScript Profiler
panel now shows the corresponding warning banner.
Instead of the
Profiler
, use the
Performance
panel to profile CPU.
Learn more and provide feedback in the corresponding
RFC
and
crbug.com/1354548
.
Chromium issue:
1417647
.
Emulate reduced contrast
The
Rendering
tab adds a new option to the
Emulate vision deficiencies
list?
Reduced contrast
. With this option, you can discover how your website looks to people with reduced contrast sensitivity.
Note that the list options have been updated to tell you what color insensitivity the options represent.
With DevTools, you can find and fix all contrast issues at once. For more information, see
Make your website more readable
.
Chromium issues:
1412719
,
1412721
.
Lighthouse 10
The
Lighthouse
panel now runs
Lighthouse 10.0.1
. For more details, see
What's new in Lighthouse 10.0.1
.
To learn the basics of using the
Lighthouse
panel in DevTools, see
Lighthouse: Optimize website speed
.
Lighthouse
>
>
Legacy navigation
is now disabled by default. This option uses legacy
Lighthouse configuration
in navigation mode.
Lighthouse 10 now uses Moto G Power as the
default emulation device
. DevTools added this device to
Settings
>
Devices
.
Chromium issue:
772558
.
A Console warning to remove your no-op service worker fetch handler
Chrome 112
skips no-op (no operation) service worker fetch handlers
because they may slow down navigation but don't serve a purpose. Such handlers are no longer required for your website to quialify as a
Progressive Web App
.
The
Console
now shows a warning if it finds a no-op fetch handler on your website. Consider removing it.
Chromium issue:
1347319
.
Miscellaneous highlights
These are some noteworthy fixes in this release:
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