What's new in DevTools, Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Debug network requests, source files, and performance traces with Gemini

In addition to CSS styling, you can now chat with Gemini about network requests, source files, and performance traces.

Similar to the context menu in the Elements panel, to open the AI assistance panel and start the chat with Gemini, either right-click and select Ask AI or click the Ask AI button next to the following:

  • A network request in the Network panel.
  • A file in the Sources > Page tab.
  • An activity in the Performance > Main track.

Ask AI buttons and menu option in Network, Sources, and Performance.

Gemini will take the context of the selected request, file, or activity into account.

The DevTools team is looking forward to hearing your feedback in crbug.com/364805393.

AI chat history

You can now restore and view past chats with Gemini in the AI assistance panel by clicking the New chat button in the upper left corner of the panel or by using the Ask AI buttons and menu options of the Network panel, Sources > Page tab, and Performance > Main track.

To view one of your previous chats, select the corresponding prompt from the drop-down menu under the History button. The AI assistance panel will remember your chat history while DevTools is open.

The AI chat history in a drop-down under the 'History' button.

Manage extension storage in Application > Storage

Similar to local and session storage, you can now view and change extension storage entries in the Application > Storage section.

The before and after adding the 'Extension storage' section to the Application panel.

Chromium issue: crbug.com/40963428.

Performance improvements

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

Interaction phases in live metrics

You can now expand interactions in performance live metrics to see a breakdown of phases and their timings.

The before and after adding a breakdown of phases and their timings to interactions.

As communicated in The Web Vitals extension, now in DevTools, the release of these features marks the end of support for the Web Vitals extension.

Chromium issue: crbug.com/369097528.

Render blocking information in the Summary tab

When you select a network request marked with a red triangle in the Performance > Network track, the Summary tab, in addition to the (refactored) tooltip, now also tells you that the request is render-blocking.

The before and after adding render-blocking information to the Summary tab.

Support for scheduler.postTask events and their initiator arrows

The Performance > Main track now shows scheduler.postTask() events and the following initiator arrows between:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

The before and after adding support for scheduler.postTask events and their initiator arrows.

Chromium issue: crbug.com/40775984.

Animations panel and Elements > Styles tab improvements

This version brings a couple of improvements to the Animations panel and Elements > Styles tab.

The Elements > Styles tab now puts a animation Jump to Animations panel buttons next to the value of animation properties, so you can easily modify the animation there.

The before and after adding a link from the Styles tab to the Animations panel.

Real-time updates in Computed tab

The Elements > Computed tab now updates the computed values in real-time when, for example, animations update them.

Compute pressure emulation in Sensors

The Sensors panel now lets you emulate Nominal, Fair, Serious, and Critical CPU pressure.

The before and after adding CPU pressure emulation option to the Sensors panel.

Chromium issue: crbug.com/362277525.

JS objects with the same name grouped by source in the Memory panel

The Memory panel now distinguishes between JS objects with the same name that come from different sources and groups them correspondingly.

The before and after grouping JS objects with the same name also by source.

Chromium issue: crbug.com/357902505.

A new look for settings

To better align the user interface design, DevTools settings now have a closer look to Chrome settings. In particular, sections are now visually separated into "cards".

The before and after separating sections into 'cards'.

Performance insights panel is deprecated and removed from DevTools

All the important and useful features from the Performance insights panel have now found a new home in the Performance panel, specifically in live metrics, the Insights sidebar tab, and the Layout shifts track. So, this version deprecates and removes the Performance insights panel from DevTools.

The DevTools team is grateful for the feedback you provided on this panel's deprecation and the overall performance debugging experience. As always, we like hearing your thoughts and learning about your perspectives. Keep them coming!

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Performance:
    • Removed an unnecessary limit of 3 characters for search queries.
    • Added the Home button that takes you back to live metrics screen.
    • Fixed the previously broken Shift+S/W trace zoom shortcuts.
  • Elements > Styles:
  • Network: Prefetch failures are now yellow warnings instead or red errors to designate that the content display isn't affected 372055494.

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, 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.