What's new in DevTools, Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Performance panel improvements

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

Origin and script links for profile and function calls in Performance

The Performance > Summary tab now shows you links to the relevant scripts and origins for profile and function calls, so you don't have to hover over these events in the Main track.

The before and after adding source and origin to the Summary tab.

Additionally, the Network and Main tracks now show you third-party names, if any, in tooltips when you hover over events.

Chromium issue: 368541957.

'LCP by phase' field data support

With field data turned on, the Performance > Insights > LCP by phase insight now shows you the 75th percentile image timings from Chrome UX report in an additional table, so you can compare the timings right in the insight.

The before and after adding field data support to the 'LCP by phase' insight.

'Network dependency tree' insight

The Performance > Insights tab adds the new Network dependency tree insight to its collection. The insight tells you if you have chained critical requests, which isn't recommended. Hover over the requests listed in the insight to see them highlighted in the Network track.

To learn more, see Avoid chaining critical requests.

Heaviest stack highlighting

The Performance panel now highlights items in the Main track as you hover over them in Call tree or Bottom-up > Heaviest stack sidebar and dims the rest. This lets you visually find nested items in the call stack that take most time.

Accessibility tree view in Elements

The full-page accessibility tree view is now turned on by default in the Elements panel. It lets you inspect how assistive technology sees your content and shows you ARIA attributes and computed accessibility properties of DOM nodes.

To open the accessibility tree view, click the Switch to Accessibility Tree view button in the top right corner of the DOM tree in the Elements panel.

The before and after turning on the full-page accessibility tree view by default .

To learn more, see Full accessibility tree in Chrome DevTools.

Chromium issue: 40808541.

Improved empty states for various panels

Empty states (when nothing is open) for various panels, sections, and tabs have been streamlined to let you know exactly what to do to start working with them. Some empty states, for example, in the Network panel, now have relevant helpful buttons such as Reload page.

The before and after improving empty states in Network and Search panels.

'Ask AI' option moved to the bottom of the menu

The Ask AI option is now at the bottom of the drop-down menus, instead of at the top.

The before and after moving the 'Ask AI' option to the bottom of the drop-down menu.

Feel free to leave your feedback on the AI assistance panel in crbug.com/364805393.

Lighthouse 12.4.0

The Lighthouse panel now runs Lighthouse 12.4.0.

This version marks some performance audits as informative under passing conditions rather than hides them in the passed audits section. See the full list of changes.

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.

Chromium issue: 40543651.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Performance > Summary: Replaced the two Total time and Self time lines with a one-line Duration that also shows (self time) in parentheses, if any (crbug.com/395572753).
  • Issues: Added new issue types: <select> issues in the accessibility tree and SRI Message Signature errors that occur during parsing or validation in the network service (crbug.com/381044049, crbug.com/347890366).
  • Accessibility: the Elements > Styles tab now outlines elements you step through using keyboard navigation (crbug.com/396311936).
  • Elements: Issues with <select> are now supported and highlighted with a wavy underline (crbug.com/378738916).
  • Network: The 'override dot' and cookie warning icons are now shown to the right of the tab name, instead of left (crbug.com/390556283).

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.