New Autofill panel
This version brings the new
Autofill
panel to DevTools.
Chrome Autofill
provides a convenient way to automatically fill forms on websites with saved addresses. The new
Autofill
panel lets you inspect the mapping between your form fields, predicted autofill values, and saved data.
Try the new panel on this
demo page
with test data:
- In
Profile Autofill
, click any of the
Fill form ...
buttons, click
Submit
, then, in the
Save address?
dialog window, click
Save
, and go back to the page with the form.
- Open DevTools and trigger an autofill event: select a form field and choose the address from the drop-down list.
The
Autofill
panel opens automatically and shows you detected form fields, fields the autofill inferred, and saved values.
To learn more, see
Learn Forms
and
Autofill
.
Enhanced network throttling for WebRTC
With the fresh addition of packet-related parameters to custom network throttling profiles, you can now throttle your
WebRTC
applications right in DevTools. This is useful to test your real-time communication implementation, without the need to use third-party software.
The new parameters are:
Packet Loss
(percent),
Packet Queue Length
(number of packets), and the
check_box
Packet Reordering
flag.
To throttle a WebRTC connection, specify the packet-related parameters in a custom profile in
settings
Settings
>
Throttling
and select it in the
Network
panel.
Try the new parameters on this
demo page
. First, allow the page to use the camera. Then, in the
Network
panel, select the custom profile you configured, and, back on the page, click
Start
and
Call
.
Chromium issue:
41175925
.
Scroll-driven animations support in the Animations panel
The
Animations
panel now lets you inspect
scroll-driven animations
.
Try this feature on this
demo page
. Open the
Animations
panel and reload the page to capture scroll-driven animations.
An animation group
marked with a
mouse
mouse icon appears in the
Overview
. You can now
inspect it
. The group shows pixel values instead of milliseconds in the
Timeline
.
Improved CSS nesting support in Elements > Styles
The
Elements
>
Styles
tab improves CSS nesting support and now shows nested styles with indentation and in braces.
CSS nesting
is a way to group CSS rules together and make things less verbose and more structured.
Chromium issue:
40166888
.
Enhanced Performance panel
This version brings several improvements to the
Performance
panel.
Hide functions and their children in the flame chart
To filter out the noise from the flame chart in
Performance
>
Main
, you can now hide irrelevant functions and their children. In the flame chart, right-click a function and choose an option from the context menu.
Functions with hidden children have a
arrow_drop_down
Drop-down
button on the right. Hover over it to see the number of hidden children and click it to show them again. To return to the initial state of the flame chart, right-click a function and select
Reset trace
.
Arrows from selected initiators to events they initiated
Previously, when you selected and event in the
Main
track, the track showed an arrow from its
initiator to the selected event
. Now, the track also shows an arrow from the selected event to the one it initiated, if any.
Additionally, all initiators now have
Initiator for
fields in the
Summary
tab and both
Initiator for
and
Initiated by
fields have named links instead of
Reveal
.
Chromium issues:
325604258
,
325024819
,
326055289
.
Lighthouse 11.6.0
The
Lighthouse
panel now runs Lighthouse 11.6.0. See the
full list of changes
.
Among notable changes is the new opt-in
check_box_outline_blank
Enable JS sampling
setting. This setting is disabled by default.
Enabling JS sampling adds detailed JavaScript call stacks to the performance trace but may slow down report generation.
The trace is available under
more_vert
Tools menu
>
View Unthrottled Trace
after the
Lighthouse
report is generated.
To learn the basics of using the
Lighthouse
panel in DevTools, see
Lighthouse: Optimize website speed
.
Chromium issue:
772558
.
Tooltips for special categories in Memory > Heap snapshots
Heap snapshots in the
Memory
panel have
special groups of objects
that aren't based on constructors. When you hover over such objects, the
Memory
panel now shows you a tooltip with a short description and a link to a longer description in documentation.
Chromium issue:
41490331
.
Application > Storage updates
This version brings a couple of updates to
Application
>
Storage
.
Bytes used for shared storage
The
Application
>
Storage
>
Shared storage
section now shows you the number of bytes used by an origin.
Shared storage
lets you have unlimited, cross-site storage write access with privacy-preserving read access.
Chromium issue:
324464353
.
Web SQL is fully deprecated
Chrome deprecated Web SQL
in version 119 and removed the deprecation trial token in this version, so you can no longer use Web SQL.
Following suit, DevTools removed the
Web SQL
section from the
Application
panel.
Chromium issue:
327254049
.
Coverage panel improvements
This version brings a couple of updates to the
Coverage
panel:
- The status bar now correctly calculates the usage statistics for filtered URLs. Previously, instead of adding up the usage data of children that matched the filter, it added up their parent's data.
- The color of used code is now gray instead of green to improve visibility, especially for
no-green color vision deficiency.
Chromium issue:
41494198
,
329253687
.
The Layers panel might be deprecated
The
Layers
panel might be deprecated soon due to low usage. The panel now shows a warning banner at the top.
Feel free to
share your thoughts and concerns
before the team makes the final decision to deprecate the panel.
JavaScript Profiler deprecation: Phase four, final
In this version, the
JS Profiler
panel has been fully deprecated and can't be re-enabled anymore.
To profile CPU performance,
use the
Performance
panel
.
Chromium issue:
40262073
.
Miscellaneous highlights
These are some noteworthy fixes and improvements in this release:
- Network
:
- Fixed a bug with the incorrect parsing of multi-line cookies (
325410304
).
- Fixed call stack preview in the
Initiator
column (
327665602
).
- Performance monitor
: Track checkboxes are now the same as in the rest of UI (
1467464
).
- Sources
: Added syntax highlighting for XHTML documents (
327940244
).
- Settings
>
Devices
: Old Galaxy Fold is replaced with newer Galaxy Z Fold 5 (
40113439
).
- Performance
: All matched search results are now highlighted when searching with
Ctrl
/
Cmd
+
F
(
1523279
).
- Developer resources
: Now also shows resources loaded through language extensions, such as
C/C++ DevTools Support (DWARF) Chrome extension
(
40746829
).
- Performance
: Fixed cropped call stack and its bad layout in the
Summary
tab (
325314708
).
- Drawer
:
close
Close
buttons are now focusable, so panels can be closed using the keyboard.
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