Find the Easter egg
To celebrate this year's April Fools' Day, the DevTools team has hidden an Easter egg somewhere in DevTools.
To find it, look for a colorful ?? emoji.
Elements panel updates
This version brings several updates to the
Elements
panel.
Emulate a focused page in Elements > Styles
The
Elements
>
Styles
tab now has the
check_box
Emulate a focused page
option under the
Toggle elements state
(
:hov
) button. Previously, you could find this option only in the
Rendering
panel.
If you switch focus from the page to DevTools, some overlay elements automatically hide if they are triggered by focus. For example, drop-down lists, menus, or date pickers. The
Emulate a focused page
option lets you debug such an element as if it is in focus.
Chromium issue:
1468393
.
Color Picker, Angle Clock, and Easing Editor in
var()
fallbacks
To simplify CSS editing, the
Elements
>
Styles
tab now lets you use
Color Picker
,
Angle Clock
, and
Easing Editor
in
var()
fallbacks.
Chromium issue:
1520417
.
CSS length tool is deprecated
The
CSS length authoring tool
is deprecated due to feedback that it slows down workflow and doesn't add much value.
You can no longer drag to adjust the value or select a unit type from the drop-down menu. Instead, double-click the value and type a new one.
To turn the length tool back on, clear
settings
Settings
>
Experiments
>
check_box
Deprecate CSS <length> authoring tool in the Styles tab
.
If you still want to use this tool, the DevTools team would like to hear your opinion and how the length tool helps you in your workflow. Feel free to leave feedback in
crbug/1522657
.
Popover for the selected search result in the Performance > Main track
To make searching easier, the flame chart in the
Performance
>
Main
track now shows you a popover on top of the corresponding event when you cycle through search results.
Chromium issue:
1523279
.
Network panel updates
This version brings a couple of updates to the
Network
panel.
Clear button and search filter in the Network > EventStream tab
The
Network
>
EventStream
tab gets:
- A
block
Clear
button that clears captured events in the table.
- A search filter that understands regular expressions.
The DevTools team would like to thank
Charles Vazac
for landing this feature.
Additionally, the
EventStream
tab now also captures events that servers send through fetch/XHR, not only the
EventSource API
. Try it on this
demo page
.
Chromium issue:
1488863
,
40659493
.
Tooltips with exemption reasons for third-party cookies in Network > Cookies
The
Network
>
Cookies
tab now shows tooltips with exemption reasons next to cookies that otherwise should have been blocked by the
third-party cookie phaseout
.
Third-party cookies may be allowed by the following reasons:
Chromium issue:
41491846
.
Enable and disable all breakpoints in Sources
The
Sources
>
Breakpoints
section brings back the
Enable
and
Disable all breakpoints
options to its drop-down menu. Previously, these options were left out by the
breakpoints redesign
.
To enable or disable all breakpoints, right-click a breakpoint in
Sources
>
Breakpoints
and select the corresponding option.
Chromium issue:
1522037
.
View loaded scripts in DevTools for Node.js
DevTools for Node.js now shows loaded scripts in the navigation tree in
Sources
>
Scripts
.
Chromium issue:
1518364
.
Lighthouse 11.5.0
The
Lighthouse
panel now runs Lighthouse 11.5.0. See the
full list of changes
.
Among notable changes is a new audit that estimates root causes for layout shifts. This audit replaces the layout-shift-elements audit that only listed the elements impacted by layout shifts.
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:
- Screen readers now announce:
- The
Learn more
link text next to selector types in the
Recorder
panel.
- When no experiments match the filter in
settings
Settings
>
Experiments
.
- The action confirmation when removing, confirming, or restoring a shortcut in
settings
Settings
>
Shortcuts
.
- The table in
settings
Settings
>
Locations
now correctly renders as a table for accessibility tools.
Chromium issues:
1516957
,
324282443
,
324467508
,
324930007
.
Miscellaneous highlights
These are some noteworthy fixes and improvements in this release:
- Fonts in DevTools are updated to match Chrome (
1523538
).
- Performance
: Fixed screenshot display when hovering over the timeline (
1519469
).
- Sources
: The line height in the
Editor
is increased for better code readability (
1523640
).
- Network
>
Responses
: Fixed various display issues with different formats and encodings (
1523128
,
1509336
,
1523128
,
41481944
,
1509336
).
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