What's new in DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Recorder supports export to Puppeteer for Firefox

As part of WebDriver BiDi support, the Recorder panel can now export recordings to Puppeteer for Firefox. With Puppeteer's support of Firefox, you can now record user flows using the Chrome DevTools Recorder panel, export them, and run them against both Firefox and Chrome.

The before and after adding the 'Puppeteer for Firefox' option to the Recorder's export menu.

For more information, see WebDriver BiDi - The future of cross-browser automation.

Performance panel improvements

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

Live metrics observations

The Performance panel now shows you live observations about Core Web Vitals, both on your local machine and based on field data from Chrome UX Report. This lets you spot performance issues without having to capture performance traces and understand how representative your experience is compared to those of your users.

To see live observations on LCP and CLS, open the Performance panel. To see INP, perform an interaction on a page. To compare your local metrics to the aggregated user experience from Chrome UX Report, add field data: in the Field data section on the right, click Set up, and, in the dialog window, click Ok. Hover over a metric value to see a tooltip with more information.

Live observations about metrics in the Performance panel.

The Performance panel highlights metrics that can be improved and provides insights and suggestions on how to match your local experience with that of your users. For example, you may want to throttle CPU or network, which you can do on the same screen in the Recording settings section on the right.

The Search box in the Performance panel now also works across the Network track, so you can find requests with the Ctrl / Cmd + F shortcut.

A network request found with search.

See stack traces of performance.mark and performance.measure calls

In the Summary tab, the Performance panel now shows you stack traces of performance.mark and performance.measure calls. You can use these calls to extend the performance trace with your custom data.

The before and after showing stack traces for performance.mark and performance. measure calls.

For more information, see Customize your performance data with extensibility API.

Use test address data in the Autofill panel

The Autofill panel now provides test data for address forms. This makes it easier to test the address forms on your website when you don't have any addresses saved in Chrome or you are using a Guest profile.

To autofill address forms with test data, open the Autofill panel, turn on Show test addresses in autofill menu, right-click an address form filed on your page, and select one of the options from the Developer tools menu.

The before and after adding Autofill test data options to an address form field drop-down menu.

Elements panel improvements

This version brings a couple of improvements to the Elements panel.

Force more states for specific elements

The :hov section in Elements > Styles now provides you with more pseudo-classes you can forcibly enable. The new set of options is under the Force specific element state drop-down and is specific to certain elements you select. For example, <label> and <input> have different sets of options.

The before and after adding the ability to force specific element states.

Chromium issue: 40280012.

Elements > Styles now autocompletes more grid properties

The Elements > Styles tab now provides autocomplete options when you edit grid area and line names.

The before and after adding autocomplete options when you edit grid line names.

For more information, see Inspect CSS grid layouts and its Show line names section in particular.

Lighthouse 12.2.0

The Lighthouse panel now runs Lighthouse 12.2.0.

This update brings a number of bug fixes. 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:

  • Elements:
    • Fixed a bug with incorrect rendering of overloaded length properties 357020613.
    • position-try-options renamed into position-try-fallbacks as per specification.
    • A page refresh now restores the selected node even inside an iframe 40719145.
    • Accessibility: Screen readers will now announce the Show element button 357382536.
  • Performance > Network: The Reveal in Network menu option now opens the Headers tab of the relevan network request.
  • Console:
    • Errors from C/C++ extension now don't forcibly open the Console 356320158.
    • Fixed a bug with import.meta in a JS module in not evaluating when paused 40743793.
  • Memory: Fixed a bug with Restore ignored retainers not showing up after ignoring a retainer 327337527.

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.