What's new in DevTools, Chrome 131 Stay organized with collections Save and categorize content based on your preferences.

[Sofia Emelianova]

Sofia Emelianova

GitHub

Debug CSS with Gemini

Chrome DevTools gets the new experimental AI assistance panel where you can chat with Gemini and get help debugging your CSS.

Try it now! In the Elements panel, right-click an element and select Ask AI or click the corresponding [smart_assistant.svg] button next to the element. DevTools will open the new AI assistance panel.

[The 'Ask AI' menu option and the corresponding button.]

The new panel will prompt you to turn on the corresponding setting. Make sure you meet the Requirements, turn on the setting toggle, and go back to the AI assistance panel. It will take the element you selected as context. Type your question about the element.

[The new AI assistance panel answering a prompt.]

To learn more about how best to use the new panel, see 5 Cool Things To Do with DevTools AI Assistance and check out AI assistance for styling.

The DevTools team is looking forward to hearing your feedback. Feel free to leave it in crbug.com/364805393.

Control AI features in a dedicated settings tab

You can now manage all AI features in one place: the new settings Settings > [button_magic_24.svg] AI innovations tab. It lists important considerations, describes AI features, and lets you turn them on and off individually.

[The new AI innovations tab.]

For more information see, Settings > AI innovations.

Console insights are one click away

DevTools no longer requires a turned on settings sync for AI features. So, the previously released Console insights, together with AI assistance for styling, are one click away.

If you are logged in to Chrome, turn on these features in Settings > [button_magic_24.svg] AI innovations and you are good to go.

Performance panel improvements

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

Annotate and share performance findings

The Performance panel gets the new Annotations tab in an expandable sidebar on the left that streamlines the process of creating notes for trace exploration and collaboration when sharing performance findings.

You can now label and connect events with arrows and highlight time ranges right on the trace. You can then save, share, and upload annotated traces back into the Performance panel.

[The new annotations tab in the sidebar on the left and annotated event, range, and connection.]

Get performance insights right in the Performance panel

You can now discover actionable insights in the new Insights tab on the left sidebar of the Performance panel. The insights are consolidated from the Lighthouse report and the Performance insights panel that is about to be deprecated.

The Insights tab aims to provide guided analysis and suggest actionable insights about performance issues that may slow down your website. To make use of insights, open the tab in the left sidebar of the Performance panel, expand different categories, and hover and click items. The Performance panel will highlight the corresponding events in the trace.

The DevTools team looks forward to your feedback on the usefulness of insights, ways to improve it, and your experience using them with other tooling, like PageSpeed Insights and Lighthouse. Feel free to leave your feedback in crbug.com/371170842.

Spot excessive layout shifts easier

The Layout shifts track gets a new look. The layout shifts are now marked with (more visible) purple diamonds and are grouped in clusters based on their proximity on the timeline. Both shifts and their clusters get an organized table with timings, scores, elements, and potential culprits in the Summary tab.

[The before and after an update to the 'Layout shifts' track and reorganized 'Summary' tab.]

Additionally, the live metrics view gets the Layout shifts log with scores and elements next to the Interactions tab.

[The before and after adding the 'Layout shifts' log to the live metrics view.]

Chromium issue: 369100729.

Spot the non-composited animations

The Animations track now shows you useful information about non-composited animations:

• Names the animations according to the corresponding CSS property, if any.
• Marks non-composited animations with red triangles in the track.
• Shows you the reason for compositing failure in the Summary tab.

[The before and after naming animations in the track, marking non-composited ones, and showing the failure reason.]

For more information, see Stick to Compositor-Only Properties and Manage Layer Count.

Chromium issue: 41006273.

Hardware concurrency moves to Sensors

The Hardware concurrency setting moves from the Performance panel to a more appropriate placethe Sensors panel.

[The before and after moving the 'Hardware concurrency' setting to the Sensors panel.]

Chromium issue: 371463665.

Ignore anonymous scripts and focus on your code in stack traces

Stack traces in the Console now properly detect, ignore, collapse, and (if expanded) gray out frames that come from ignore-listed files. Previously, it didn't gray out the function name in expanded trace.

You can also turn on the new settings Settings > Ignore list > check_box Anonymous scripts from eval or console to set DevTools to ignore anonymous scripts without source URL.

[The before and after improving ignore listing in stack traces.]

Additionally, when you right-click and Save as... the console log, it doesn't save the Show more/less text.

Chromium issues: 40279542, 40945570, 345248263.

Elements > Styles: Support for sideways-* writing modes for grid overlays and CSS-wide keywords

The Elements > Styles tab now supports the following:

• Grid overlay in the viewport now displays grids for sideways-rl and sideways-lr writing modes.
• Resolves CSS-wide keywords. Practically, it means that, for example, if inherit is a color, the Styles tab shows a color picker next to it. [The before and after resolving CSS-wide keywords.]

Chromium issues: 40280717, 40706051, 40501131.

Lighthouse audits for non-HTTP pages in timespan and snapshot modes

Lighthouse can now generate reports for non-HTTP pages in timespan and snapshot modes.

[The before and after enabling audit for non-HTTP page in timespan and snapshot modes.]

Accessibility

This version has the following accessibility improvements:

• In Sources > Editor, tabs with open files can now be closed by focusing on the X button and pressing Enter or Space.
• In Performance, you can now select an entry in the trace and press Space to open the context menu.
• In Performance, the Insights tab in the sidebar on the left is keyboard-accessible and can be "tabbed through".

Chromium issue: 372411090.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

• Throttling settings are now correctly synced between the Performance and Network panels (370332090).
• Application > Background services > Speculative loads > Rules now has a {} pretty-print button similar to Sources > Editor (40279147).
• Live expressions: Pressing Tab after selecting an autocomplete option now exits the edit field instead of indenting the text (349939551).
• Elements > Styles: anchor() and anchor-size() supports new syntax where you can re-order arguments and omit anchor-size() direction (343516786). Additionally, fixed fallback rendering (365802559).
• Network: Fixed GraphQL previews (369931288).
• Performance: Now reports incremental progress of loading and processing traces.
• WebAuthn: Now dynamically updates credentials modified by signal* methods (368467199).
• WebAssembly: A warning in the Console now informs you if multiple debug symbols are available for a WebAssembly module and which one is in use (40879198, 369515221).
• The Core Web Vitals overlay is removed from the Rendering tab 328487897.
• Generative AI features now don't require Chrome settings sync.

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.