What's new in DevTools, Chrome 126

Sofia Emelianova
Sofia Emelianova
GitHub

Performance panel improvements

This version brings several improvements to the Performance panel.

Move and hide tracks with updated track configuration mode

You can now enter the track configuration mode by right-clicking the track name and selecting Configure tracks. The edit button that required extra space has been removed.

The before and after replacing the edit button with a menu option.

The track configuration mode lets you change the order of tracks and hide them. Click up or down to move the track around or click hide. To exit the configuration mode click Finish configuring tracks at the bottom. This configuration persists for new traces but not for next DevTools sessions.

Chromium issue: 336266699.

Ignore scripts in the flame chart

The flame chart in the Main track adds ignore list support. You can now right-click a script in the chart and select Add script to ignore list.

The menu option to add the script to ignore list, scripts marked as ignored, and the corresponding rules in Settings.

The chart collapses ignored scripts, marks them as On ignore list, and adds them to the Custom exclusion rules in Settings > Ignore list. Ignored scripts are saved until you remove them either from the trace or from the Custom exclusion rules.

Chromium issue: 336266714.

Throttle down the CPU by 20 times

The CPU throttling menu in Capture settings of the Performance panel gets a new 20x slowdown option. So, you can now more accurately reproduce and analyze real-world performance issues, even on high-end computers.

The before and after adding the '20x slowdonw' option to the 'Capture settings'.

Chromium issue: 324978881.

Performance insights panel will be deprecated

The experimental Performance insights panel will be deprecated in 2024. The DevTools team is working on integrating its most useful features to the Performance panel. The Performance insights panel now shows a banner at the top informing you about the upcoming deprecation.

The deprecation warning banner in the 'Performance insights' panel.

To learn more, see Performance tooling in 2024 and beyond.

If you have any feedback on what's working, what's not, and what you think can be done better, we want to hear from you.

Paste entire header strings to override them

When overriding headers, you can now paste an entire header string (HEADER_NAME: VALUE) and DevTools will split the string at : into a header name and its value.

See this in action in the following video.

When editing headers, the Network panel now warns you if you entered any characters other than alphanumerics, hyphens, and underscores.

The warning next to a header name with unsupported characters.

Additionally, override menu options and Edit buttons are disabled for chrome://-URLs, which matches intended behavior.

Chromium issues: 330967147, 337012362, 328210785.

Find excessive memory usage with new filters in heap snapshots

Heap snapshots in the Memory panel get new filters that can help you find common cases of inefficient memory usage, such as duplicated strings, objects retained by detached DOM nodes and the DevTools Console.

The before and after adding filter options for common cases of inefficient memory usage.

Chromium issue: 337094903.

Inspect storage buckets in Application > Storage

You can now inspect storage buckets in a dedicated tree in the Application > Storage section. This tree, previously experimental, has been enabled by default.

The before and after enabling the storage buckets tree in the Storage section.

Chromium issue: 338094915.

Disable self-XSS warnings with a command-line flag

If you automate Chrome usage or otherwise open DevTools from the command line for debugging, you'll often want to disable the self-XSS warning that appears in every new DevTools session.

The self-xss warning dialog in the Console.

You can now disable this dialog by passing the --unsafely-disable-devtools-self-xss-warnings command-line flag to Chrome.

Chromium issue: 41491762.

Lighthouse 12.0.0

The Lighthouse panel now runs Lighthouse 12.0.0.

This update brings a number of changes, including PWA category removal, SEO category reorganization, Overall Savings deprecation, new audits and audit changes. 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.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Performance:
    • The slow capture settings (Enable advanced paint instrumentation and Enable CSS selector stats) now automatically clear in the next DevTools session.
    • The Selector Stats tab now doesn't automatically scroll to the bottom as you zoom the flame chart and data changes (337999939).
  • Console: The Ctrl+` shortcut now closes the Console in the drawer only if it's in focus (40875466, 328210785).
  • Autofill: Address parsing is fixed (335409093, 335409707).
  • Accessibility: Screen reader announcements for localized strings are fixed (324930007).

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.