Streamlined filter bar in the Network panel
The filter bar is redesigned to let you filter requests easier and declutter the
Network
panel.
The corresponding experiment was turned on by default in this version but will be reverted. You can track the progress in
crbug.com/1523150
.
The new filter bar has two drop-down menus: one for choosing request types and another for hiding data and extension URLs or only showing blocked cookies and requests, and third-party requests. Both menus support multi-select.
To bring back the old filter bar immediately, turn off
settings
Settings
>
Experiments
>
check_box_outline_blank
Redesign of the filter bar in the Network panel
.
Feel free to leave your feedback about the feature in
crbug.com/1500573
.
Chromium issue:
1486431
.
Elements improvements
@font-palette-values
support
The Elements panel now supports the
@font-palette-values
CSS at-rule. It lets you customize the default values of the
font-palette
property.
In
Styles
, click the value of the
font-palette
property and DevTools takes you to the
@font-palette-values
dedicated section where you can edit your custom values.
Chromium issue:
1501781
.
Supported case: Custom property as a fallback of another custom property
Elements
>
Styles
now resolves a custom property that is a
fallback of another custom property
.
Chromium issue:
1499265
.
Improved source map support
The
settings
Settings
>
Experiments
>
check_box
Resolve variable names in expressions using source maps
has been turned on by default.
DevTools uses
source maps
to let you debug your original code in
Sources
and
Scope
even after you've combined, minified, or compiled it. This experiment lets you evaluate your original variable names consistently across DevTools, including but not limited to:
For more details, see the
corresponding RFC
.
Chromium issue:
1444349
.
Performance panel improvements
Enhanced Interactions track
The
Performance
>
Interactions
track gets whiskers that indicate input and presentation delays at processing time boundaries.
Additionally, when you hover over an interaction, you can see a helpful tooltip detailing timings.
Chromium issue:
1495751
.
Advanced filtering in Bottom-Up, Call Tree, and Event Log tabs
The
Bottom-Up
,
Call Tree
, and
Event Log
tabs in the
Performance
panel got three new buttons for advanced filtering:
- match_case
Match case
.
- regular_expression
Regular expression
.
- match_word
Match whole word
.
Additionally, to help you retain context, now only top level items match the filter in the
Bottom-Up
tab. Previously, the filter matched every node.
Chromium issue:
1496355
.
Indentation markers in the Sources panel
The
Editor
in the
Sources
panel now marks indented code blocks with vertical lines for your convenience.
Chromium issue:
1479986
.
Helpful tooltips for overridden headers and content in the Network panel
The
Network
panel now shows tooltips when you hover over the purple dot icon next to
Headers
and
Response
tabs of a request. The tooltips tell you what was overridden by DevTools.
Chromium issue:
1469776
.
New Command Menu options for adding and removing request blocking patterns
You can now type commands to add or remove network request blocking patterns into the
Command Menu
.
The
Add
command takes you to the dialog to specify the pattern and the
Remove
command removes all patterns without opening the
Network request blocking
panel.
The CSP violations experiment is removed
The experimental
CSP violations
tab introduced in
version 89
has been removed as redundant.
To see CSP details at a glance, navigate to
Application
>
Frames
>
Content Security Policy (CSP)
.
Additionally, the
Issues
panel
reports CSP violations.
Lighthouse 11.3.0
The
Lighthouse
panel now runs Lighthouse 11.3.0. See the
full list of changes
. Among notable changes is the ability to run reports on 404 pages.
To learn the basics of using the
Lighthouse
panel in DevTools, see
Lighthouse: Optimize website speed
.
Chromium issue:
772558
.
Accessibility
This version has the following accessibility improvements:
- In
Network
>
Payload
, you can now tab-focus the
view source
and
view URL-encoded
buttons and press
Enter
or
Space
to trigger the corresponding action.
- In
Console
, to reduce confusion, the links that lead to scripts that are no longer available to the
Debugger
are now grayed out and can't be clicked.
- In navigation trees, such as the tree in
Sources
>
Page
, the
Enter
key now expands and collapses nodes with children.
Chromium issues:
1338391
,
1500662
,
1420362
.
Miscellaneous highlights
These are some noteworthy fixes and improvements in this release:
- Performance
. If a recording fails, you now have the option to
Download raw trace events
and try to figure out what went wrong (
commit
).
- The
Show Console
shortcut (
Ctrl
+
`
for Mac,
Ctrl
+
+
for Windows and Linux) now not only opens the
Console
but also closes when pressed a second time.
- Developer Resources
. Fixed a bug that prevented reporting CSS resources and their issues (
1420362
).
- Elements
:
- Fixed a bug with inspecting elements in iframes (
1453375
).
- Computed
. Fixed a bug that prevented default values from rendering (
1499882
).
- Search
. Fixed a bug that prevented calculating the number of matches for short queries of one or two characters (
1416457
).
- Console
. Now correctly parses regular expressions that end with an escaped character in the
Filter
box (
1346936
).
- Settings
>
Workspace
. Fixed a bug that prevented adding an excluded folder (
1503580
).
- Network
>
Preview
. Now renders images with
data:
URIs (
1381791
).
- Memory
. Added proper
upload
load and
download
save buttons to the action bar (
1275407
).
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