New section for custom properties in Elements > Styles
The
Elements
panel now supports the
@property CSS at-rule
. It lets you define
CSS custom properties
explicitly and register them in a stylesheet without running any JavaScript.
To inspect your registered custom properties, in
Elements
>
Styles
, hover over the property name and see its descriptors in a tooltip. In the tooltip, click the link to view the registered property in the collapsible
@property
section.
Chromium issues:
1471102
,
1471103
,
1471105
.
More local overrides improvements
Continuing the stream of improvements in the
previous version
,
local overrides
now do the following:
In
Sources
>
Page
, when you right-click a source-mapped file and select
Override content
, DevTools will show a dialog that takes you to the original source instead. Contents of source-mapped files can't be overridden.
The
Network
panel gets a new
Has overrides
column and a corresponding
has-overrides:[content|headers|yes|no]
filter. To see the
Has overrides
column,
right-click
the table header and select it.
In
Sources
>
Overrides
, the
Delete all overrides
menu option has been replaced with the
Delete
option with precise behavior.
The previous
Delete all overrides
was confusing because it deleted only the overrides active in the current session, marked by the
purple dot icon.
The new
Delete
option, first shows a warning message and prompts confirmation, then deletes the folder you clicked with all its contents.
To bring back the previous option, check
Enable "Delete all overrides temporarily"
in
Settings
>
Experiments
.
Chromium issues:
1472952
,
1416338
,
1472580
,
1473681
1475668
.
Enhanced search
Search
results now show an entry per all the matches it found in a line of code. Previously, it showed only the first match per line of code. The new behavior is especially useful when you search across minified files. When you click a search result, it opens the file in the editor and now scrolls the match into view not only vertically but also horizontally.
Additionally,
Search
got a speed boost. See the before (left) and after (right) comparison in the next video.
Finally,
Search
now supports
ignore listing
and won't show you results from ignored files.
Chromium issues:
1468875
,
1472019
.
Improved Sources panel
Streamlined workspace in the Sources panel
The
workspace
feature in the
Sources
panel is new streamlined:
- Consistent naming
. Most notably, the
Sources
>
Filesystem
pane was renamed into
Workspace
. Various UI texts in this pane are now clearer and free of redundancy.
- Improved setup
. See better cues for dragging and dropping folders or click a link to select a folder.
Sources
>
Workspace
lets you sync changes you make in DevTools directly to your source files.
See the new setup and workflow in action:
Chromium issues:
1473771
,
1473880
,
1473963
,
1474686
,
1474687
.
Reorder panes in Sources
You can now reorder panes on the left side of the
Sources
panel by dragging and dropping, similar to how you can
reorder other panels, tabs, and panes
.
Chromium issues:
1473758
.
Syntax highlighting and pretty-printing for more script types
The
Sources
panel can now:
- Pretty-print inline JavaScript within the following script types:
module
,
importmap
,
speculationrules
.
- Highlight the syntax of
importmap
and
speculationrules
script types, both of which hold JSON.
For more information on speculation rules, see
Prerender pages in Chrome for instant page navigations
.
Chromium issue:
1473875
.
Emulate prefers-reduced-transparency media feature
Chrome 118 now supports
the
prefers-reduced-transparency
media feature
. This feature lets developers adapt web content to user-selected preference for reduced transparency in the OS, such as the
Reduce transparency
setting on macOS.
To emulate this media feature, open the
Rendering
tab and scroll down to it.
Chromium issue:
1424879
.
Lighthouse 11
The
Lighthouse
panel now runs
Lighthouse 11
. Most notably, this version removes legacy navigation and adds new accessibility audits and changes how the accessibility category is scored.
See also the
full list of changes
. To learn the basics of using the
Lighthouse
panel in DevTools, see
Lighthouse: Optimize website speed
.
Chromium issue:
772558
.
Accessibility improvements
DevTools now supports more navigation keystrokes:
- CSS Overview
: Use the up and down arrows to navigate sections in the left sidebar.
- Memory
: In the left sidebar, focus the
Save
button next to snapshots with
Tab
and press
Enter
to select folder.
Additionally, several screen reader announcement issues have been fixed.
Chromium issues:
1470401
,
1471301
,
1474108
,
1468631
.
Miscellaneous highlights
These are some noteworthy fixes and improvements in this release:
- Network
: New icons for popular resources types:
media
,
wasm
,
websocket
,
manifest
,
fetch/xhr
,
json
(
1466298
).
- Color updates to material 3 colors in many UI elements, most notably in the
Elements
and
Performance
panels (
1456690
,
1472243
).
- Issues
now preserves cookie issues across navigations (
1466601
).
- Various
Application
>
Preloading
improvements, most notably sortable grids and revised rule set details (
1410709
).
- Various improvements of the command editor in
Protocol monitor
, most notably warnings on wrong input, editing a sent command, editor for object parameters without predefined keys, support for enums undefined by references, objects without type reference, filter commands by substring matches, and more (
1448050
).
- Performance
flame chart gets a border around the total box on the pie chart (
1470147
).
- Sources
now doesn't treat dashes as word characters in CSS (
1471354
).
- Autocomplete now always sorts CSS-wise keywords at the end.
- RegEx filters now support spaces (
1346936
).
- Elements
fixed media query feature detection (
1472693
).
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