What's new in DevTools, Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

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, for example, more detailed duration and network initiator tree, and to provide greater clarity on the visual cues and colors. So, you don't have to switch between the Network panel and the Performance > Summary tab anymore. 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.
  • Shows request initiator upon selection with an arrow. This helps you understand the tree of network initiators that was previously only available in the Network panel.
  • On hover, a reworked tooltip now shows structured timing information, including render-blocking status and changes in priority, 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.

The right-click menu for the request with the 'Reveal in Network panel' option.

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 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 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 > Experiments > Show option to expose internals in heap snapshots, then turn on 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, 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.