What's new in DevTools, Chrome 128

Sofia Emelianova

Console insights by Gemini are going live in most European countries

This version brings support of Console insights by Gemini to most European countries.

List of newly supported European countries

Austria, Belgium, Bulgaria, Switzerland, Cyprus, Czechia, Germany, Denmark, Estonia, Spain, Finland, France, UK, Greece, Croatia, Hungary, Ireland, Iceland, Italy, Liechtenstein, Lithuania, Luxembourg, Latvia, Malta, the Netherlands, Norway, Poland, Portugal, Romania, Sweden, Slovenia, Slovakia.

If you are in one of those countries, you can now ask Gemini to provide insights right in the Console, so you can better understand errors and warnings.

An insight from Gemini for an error in the Console.

Performance panel updates

This update brings a few improvements to the Performance panel.

Enhanced Network track

The Network track in the Performance panel has been enhanced to show critical information upfront so you don't have to switch between the Network panel and the Performance > Summary tab, and to provide greater clarity on the visual cues and colors. In addition, if you still need to switch to the Network panel, we've made it easier and faster for you.

The Network track now does the following:

Shows a color legend for request types.
Marks render blocking requests with red triangles in the upper right corner and shows request initiator upon selection with an arrow.
On hover, a reworked tooltip now shows structured timing information, including changes in priority and render blocking, if any.
The Summary tab now also shows a breakdown of timings in a column on the right.

The enhanced network track with a color legend, tooltips, render blocking indicators, and timings in the Summary tab.

Additionally, you can now right-click the request in the track or its URL in the Summary tab and select Reveal in Network panel from the drop-down menu. DevTools will take you to the Network panel and highlight the request you are looking for in the table.

Customize performance data with extensibility API

This version brings support for extension data to the Performance panel. You can now add custom tracks with events and tooltip descriptions to the performance trace, details to the Summary tab, and more. This feature may be useful for developers of frameworks, libraries, and complex applications with custom instrumentation.

See an example of a custom track on this demo page. In Performance > Capture settings, turn on check_box Extension data. Start a performance recording, click Add new Corgi on the demo page, then stop the recording. You'll see a custom track in the trace that contains events with custom tooltips and details in the Summary tab.

A custom track in the Performance panel.

In short, to extend performance data, pass a specific structure to the measureOption.detail or markOption.detail parameters of performance.measure() or performance.mark() API calls.

Details in the Timings track

If you are a web developer who uses the User Timing part of Performance API to add entries to the Timings track, you can now see your arbitrary details in the Summary tab for mark and measure events and their timestamps.

A custom event in the Timings track with a timestamp and details.

Chromium issue: 345418915.

Copy all listed requests in the Network panel

Instead of copying the entire network log, the Network panel now lets you apply filters and copy only the listed requests.

Copy options only for listed requests.

Faster heap snapshots with named HTML tags and less clutter

Heap snapshots in the Memory panel get even faster, now have objects grouped by named HTML tags, better match JavaScript language semantics by showing fewer internal objects, and always include numeric values.

Objects grouped by named HTML tags.

The performance of check_box Include numerical values in capture setting has been sped up, turned on by default, and removed from the Memory panel.

To manually include internal objects into the snapshot, turn on, first settings Settings > Experiments > check_box Show option to expose internals in heap snapshots, then turn on check_box Expose internals (...) in the Memory panel.

Chromium issues: 41490040, 343341610, 42203857.

Open Animations panel to capture animations and edit `@keyframes` live

The Animations panel now does the following:

Captures animations that are already in progress when you open the panel, so you don't have to refresh the page to capture animations.
Supports live editing of @keyframes. In other words, updates the captured animation as you edit @keyframes section in Elements > Styles.

See both features in action in the following video.

Chromium issue: 352718055.

Lighthouse 12.1.0

The Lighthouse panel now runs Lighthouse 12.1.0.

This update brings a number of changes, including the removal of the old First Meaningful Paint (FMP) metric in favor of Largest Contentful Paint (LCP). See the full list of changes.

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:

Pressing Tab after auto-completion in the edit field of live expressions moves the focus to the next focus point. Previously, it would indent the text.
Clicking a resizer puts focus on it, so you can move it with right and left arrow keys.
A screen reader now announces the Add watch expression edit field in Sources and Delete watch expression is now clearly visible when navigating with a keyboard.

Chromium issues: 349939551, 343942719, 349334243, 349428374.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

Performance:
- Network track: Added WebSocket connection events 331351979.
- The Performance panel now correctly zooms in on the busiest main thread activity 345599356.
- Fixed a bug with uploading wrong trace file types, it now prevents uploading any type except the correct .json or .gz 349864878.
Elements > Styles:
- Unit drop-down in length property values is now deprecated 41495618.
- Fixed resolving active properties for nested at-rules 346732737.
- Inactive @position-try sections are now grayed out 40246493.
Application:
- Cookies: Fixed a bug that wouldn't refresh cookies upon Refresh click 348683488.
- Local storage: You can now sort by keys alphabetically 341129585.

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.