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

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 edit Customize Chrome in the right bottom corner.
  2. 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   More   > 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 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