What's new in DevTools (Chrome 122)

Sofia Emelianova

The official collection of Recorder extensions is live

The official collection of export and replay Recorder extensions is now live.

To open the collection directly from the Recorder, select download Export > Get extensions... on the action bar at the top of the Recorder panel.

Network improvements

This version brings a number of improvements to the Network panel.

Failure reason in the Status column

The Status column now always shows a failure reason. Previously, you had to turn on check_box Big request rows or select the request in the table.

The before and after showing failure reason in the Status column.

Chromium issues: 1506760.

Improved Copy submenu

The Copy submenu of a request is now better organized.

The before and after improving the Copy submenu.

Additionally, the Copy as cURL option now copies the correct command to clipboard on Windows.

Chromium issues: 1267033, 1276452, 798498.

Performance improvements

This version brings a number of improvements to the Performance panel.

Breadcrumbs in the Timeline

The Timeline at the top of the Performance panel now lets you set breadcrumbs and jump between them.

To set a breadcrumb, select a range on the Timeline, hover over it, and click the N ms zoom_in button. You can create several nested breadcrumbs in succession. To jump between zoom levels, click the corresponding breadcrumb in the chain on top of the Timeline. Watch the next video to see breadcrumbs in action.

Chromium issues: 1467739.

Event initiators in the Main track

The Performance > Main track by default now shows arrows connecting initiators and the following events they caused.

Style or layout invalidation -> Recalculate styles or Layout
Request Animation Frame -> Animation Frame Fired
Request Idle Callback -> Fire Idle Callback
Install Timer -> Timer Fired
Create WebSocket -> Send... and Receive WebSocket Handshake or Destroy WebSocket

To see the arrows, find such an event in the trace and click it. Previously, this feature was an experiment.

An arrow from the request and firing of an idle callback.

Chromium issues: 1434596.

In the Performance panel of Node.js DevTools, you can now select a JavaScript VM instance from the corresponding drop-down menu in the action bar. A similar feature was available in the soon-to-be-deprecated JavaScript Profiler.

The before and after adding a new menu that lets you select a JavaScript VM instance.

Chromium issues: 1511813.

Elements improvements

This version brings a number of improvements to the Elements panel.

In addition to the next two features, the Elements panel now remembers the last tab you opened, for example Computed or Properties.

The `::view-transition` pseudo-element is now editable in Styles

You can now edit the ::view-transition CSS pseudo-elements in Styles using the inspector style sheet.

The before and after editing support of view-transition pseudo-elements.

For more information, see Smooth and simple transitions with the View Transitions API.

Chromium issues: 1511233.

The `align-content` property support for block containers

The align-content property now works with any block containers, including table-caption and table-cell. Previously, it worked only with grid and flex.

The before and after align-content support in block containers.

Chromium issues: 1500511.

New shortcut and command in Sources

You can now Cmd (Mac) / Ctrl (Win) + Shift + click a line number in Sources to create a logpoint. This shortcut is an addition to the already existing Cmd (Mac) / Ctrl (Win) + click for conditional breakpoints.

The Command Menu gets the new Reveal active file in navigator sidebar command that does the same as the corresponding option in the drop-down menu of the Editor.

The new command to reveal the active file in the navigator sidebar.

Chromium issues: 1486933, 1467464.

Posture support for emulated foldable devices

Device mode now lets you set posture of an emulated foldable device: Continuous or Folded. The continuous posture refers to a "flat" position and folded forms an angle between sections of the display.

A drop-down menu with posture options.

Additionally, the Devices list gets a new emulated foldable device: Asus Zenbook Fold.

Chromium issue: 1066842.

Dynamic theming

DevTools now automatically matches Chrome's color theme. To set a theme:

Open a new tab and click edit Customize Chrome in the right bottom corner.
In Appearance, pick a theme through wallpaper Change themes or select a color palette.

DevTools matches the color theme selected in Appearance.

Chromium issues: 1483276.

Third-party cookies phaseout warnings in the Network and Application panels

Both the Network and Application panels now highlight and show warnings next to cookies affected by the third-party restrictions from Tracking Protection.

In Network, find a request with a warning warning icon, click it, and open the Cookies tab.

The before and after capturing third-party cookies in the Network panel.

In Application, navigate to Storage > Cookies and click a domain. Cookies highlighted in yellow aren't stored in the browser.

The before and after highlighting third-party cookies in the Application panel.

Hover over the warning icon to see a tooltip describing the issues and click the icon to open the Issues tab with more information.

Additionally, the cookies in the table are now sorted by name by default.

Chromium issues: 1506225, 1503961.

Lighthouse 11.4.0

The Lighthouse panel now runs Lighthouse 11.4.0. See the full list of changes. Among notable changes is the new audit that lets you detect if your website still uses third-party cookies.

Audit that detects third-party cookies.

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:

When you open settings Settings > Experiments, the Search box is now automatically in focus.
The cancel Clear input button in Network > Filter is now focusable.
The file tree in Sources > Page now displays correctly in high contrast mode.
Screen readers now correctly announce the following:
- The state of checkboxes in Sources > Breakpoints.
- Position and index information for a list of suggestions.
- Action result when adding or deleting a location in settings Settings > Locations.
- Groups of exclusion rules (general or custom) in settings Settings > Ignore List.

Chromium issues: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

Animations:
- Fixed the bug with screenshot popover rendering out of bounds (1506991).
- Fixed the bug with removed animation nodes not marked as removed (1506561).
Network:
- Header overrides: Fixed a bug with a false purple dot icon in Headers tab (1507856).
- Preview: Fixed a bug with an unnecessary double decoding (1509336).
- Fixed a bug due to which short requests didn't show up (1509862).
Application > IndexedDB: Rearranged buttons in the action bar for consistency with other panels (1393800).
Sensors: Fixed a bug with unavailable location incorrect successful callback (1486859).
Performance:
- The Collect garbage button now has an appropriate icon, "mop" instead of a "bin" (1507530).
- Performance trace now retains data when navigating to about:blank (1509947).

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.