What's new in DevTools, Chrome 142

Matthias Rohmer

Code suggestions from Gemini

You can now get AI-generated type-ahead suggestions in the Console and Sources panels.

Code suggestion feature in the Console and Sources panels

To enable this feature, go to Settings > AI Innovations and toggle Code suggestions.

Enhancements for the DevTools MCP server

Since launching the public preview of the DevTools MCP server with v0.2.1, we landed various improvements with contributions from the community and released v0.9.0.

  • Node.js support has been extended down to Node.js 20.
  • Network requests and console messages can be paginated to save tokens and filtered based on request type (for example, scripts, stylesheets, images) and message type (log, warning, error).
  • Screenshots can be output to a specific path and in various formats.
  • Configurable tool categories let you organize which capabilities are exposed, reducing unnecessary noise.
  • You can now pass launch arguments to the Chrome instance used by the MCP server.

See the public changelog on GitHub for the full list of changes and bug fixes, and learn more about the DevTools MCP server in the announcement blog post.

Quicker access to AI assistance

DevTools now includes more links that open AI assistance. The Ask AI context menu item has been renamed to Debug with AI and amended with direct actions AI can help you with, based on context.

With the additional new button in the top-right corner of DevTools you can open AI assistance from anywhere within DevTools.

The new entry points to AI assistance across DevTools

Debug the full performance trace with Gemini

After recording a trace in the Performance panel, you can now chat about the full trace, related Performance insights, and field data with Gemini without selecting specific context in advance, all within the same conversation. This lets you look at performance issues more holistically before diving deeper.

After identifying a potential problem with the help of Gemini, you can seamlessly select a more specific context item like a trace event or a Performance insight for closer inspection and continue the same chat.

Likewise, all insights in Performance > Insights are now available for you to chat about with Gemini.

Toggle drawer orientation

The drawer can now also be moved to the side. This lets you view panels side-by-side instead of stacked. Right-click a panel name in the main tab bar and select Move to drawer to move the selected panel to the drawer.

Add additional panels to the drawer from ⋮ > More Tools.

New toggle in the drawer to change orientation

Google Developer Program

The Google Developer Program is now integrated into DevTools, with direct links for profile management and new badges to earn.

Controls for the Google Developer Profile in DevTools settings

Badges are an opt-in feature. To enable badges, go to Settings > Preferences > Account and toggle Earn badges.

Miscellaneous highlights

These are some of the many notable fixes and improvements in this release:

  • The Application panel now supports storage inspection for all worker types, including Service Workers, Shared Workers, and Dedicated Workers.
  • :target-current is now shown in the Styles panel.
  • The Network panel can now filter requests based on a new Is ad-related boolean.

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.