What's new in DevTools, Chrome 124

Sofia Emelianova

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.

The Autofill panel.

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.

A group of scroll-driven animations marked with a mouse icon.

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.

The before and after adding indentation and enclosing nested styles in braces.

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.

The before and after showing arrows from selected to initiated events and named links instead of Reveal.

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.

Before and after adding an opt-in JS sampling setting.

Enabling JS sampling adds detailed JavaScript call stacks to the performance trace but may slow down report generation.

Performance trace without (left) and with (right) JS sampling.

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.

The before and after showing a descriptive tooltip for special groups of objects.

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.

The before and after showing how many bytes are used for shared storage.

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 before and after correctly calculating the matching children statistics.

The color of used code is now gray instead of green to improve visibility, especially for no-green color vision deficiency.

The before and after changing the color of used code to gray.

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.

The warning banner announcing the potential deprecation at the top of the Layers panel.

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!

Getting in touch with the Chrome DevTools team

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.