What's new in DevTools, Chrome 125

Sofia Emelianova

Understand errors and warnings in the Console better with Gemini

This Chrome version brings generative AI capabilities to the DevTools Console, aimed to give you a better understanding of the errors and warnings you encounter.

To get an AI-generated explanation of an error or warning, click the Understand this error (warning) button next to the message in the Console and follow instructions.

For more information, see Understand errors and warnings better with AI.

@position-try rules support in Elements > Styles

To help you debug CSS anchor positioning, the Elements > Styles tab now supports @position-try CSS rules. The tab resolves position-try-options values and links each option to a dedicated @position-try --name section.

To learn more, see Introducing the CSS anchor positioning API.

Chromium issue: 40279608.

Sources panel improvements

This version brings several improvements to the Sources panel.

Configure automatic pretty-printing and bracket closing

You can now turn on or off the automatic pretty-printing and bracket closing for the Editor in Sources. Pretty-printing makes minified files readable. Bracket closing automatically adds a closing bracket () or }) or tag (>) when you type an opening one.

To configure the relevant behaviour, check or clear the new check_box Auto closing brackets and check_box Automatically pretty print minified sources options in settings Settings > Preferences > Sources.

Chromium issues: 40865010, 324314570.

Handled rejected promises are recognized as caught

The Sources panel now correctly recognizes rejected promises as caught if you handled them with .catch() or two-argument .then().

In other words, when Sources > Breakpoints > check_box Pause on uncaught exceptions is turned on, the debugger won't pause on statements similar to the following:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Chromium issue: 40283993.

Error causes in the Console

The Console now shows you chains of error causes in the stack trace, if any.

To make debugging easier, you can specify error causes when catching and rethrowing errors. As the Console walks up the cause chain, it prints each error stack with a Caused by: prefix, so you can still see the original error.

Chromium issue: 40182832.

Network panel improvements

This version brings several improvements to the Network panel.

Inspect Early Hints headers

The Early Hints headers get a dedicated section in the request's Headers tab of the Network panel. Previously, you could find the relevant headers in the Response Headers section.

Early Hints is an HTTP status code (103 Early Hints) used to send a preliminary HTTP response ahead of a final response. This allows a server to send hints to the browser about critical sub-resources (for example, a style sheet or critical JavaScript) or origins that will be likely used by the page, while the server is busy generating the main resource.

For more information, see Faster page loads using server think-time with Early Hints.

Chromium issue: 40222701.

Hide the Waterfall column

You can now hide the Waterfall column in the Network panel similar to how you can hide other columns. Right-click any column name and clear the check_box_outline_blank Waterfall checkbox in the drop-down menu.

Chromium issue: 40574989.

Performance panel improvements

This version brings several improvements to the Performance panel.

Capture CSS selector statistics

The Performance panel gets a new setting to let you capture CSS selector statistics for long-running Recalculate Style events.

To see the statistics, select a Recalculate Style event and open the new Selector Stats tab. The tab shows you information on elapsed time, match attempts and count, and percent of slow-path non-matches for each selector.

Chromium issue: 324282954.

Change order and hide tracks

The Performance panel gets a new configuration mode that lets you change the order of tracks and hide them.

To enter the configuration mode, click the edit Edit button on the left of the track name. Then click arrow_upward up or arrow_downward down to move the track around or click visibility_off hide. Click the done Check button to the right of the track name when you are done.

The next version, Chrome 126, will bring more improvements to this UI.

Chromium issue: 311439339.

Ignore retainers in the Memory panel

You can now ignore retainers in heap snapshots you capture with the Memory panel.

To ignore a retainer, select an object and, in the Retainer section, right-click a retainer and select Ignore this retainer from the drop-down menu. Ignored retainers are marked withignored value in the Distance column. To stop ignoring, click Restore ignored retainers in the action bar at the top.

Additionally, heap snapshots now support a bigger number (hundreds of millions) of containment edges and nodes (332350576).

Chromium issue: 327337527.

Lighthouse 11.7.1

The Lighthouse panel now runs Lighthouse 11.7.1. See the full list of changes.

Among notable changes is the deprecated support for Publisher Ads plugin, which became outdated in this version.

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:

• The Recorder panel is now officially out of preview status (329271496).
• The Console now doesn't show an error when a custom formatter returns a null for the body() function, which is a valid behavior (329400119).
• The Sources panel updated syntax highlighter, in particular, it now supports v and d flags in regular expression.
• The Network > Cookies tab fixed a bug with mapping exempted cookies to response cookies (41491846).
• The Elements > Styles tab now does the following:
  • Shows fully-overloaded inherited rules with custom properties (41489874).
  • Highlights the applied value in light-dark() depending on the color theme (331123816).

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.

• Submit feedback and feature requests to us at crbug.com.
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.