What's new in DevTools (Chrome 122)

Sofia Emelianova
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 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 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 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.

JavaScript VM instance selector menu for Node.js DevTools

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:

  1. Open a new tab and click Customize Chrome in the right bottom corner.
  2. In Appearance, pick a theme through 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 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 > Experiments, the Search box is now automatically in focus.
  • The 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 > Locations.
    • Groups of exclusion rules (general or custom) in 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.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.