What's new in DevTools, Chrome 143

DevTools MCP server updates

We landed various improvements for the DevTools MCP server and released v0.11.0.

  • When prompting in your MCP client (Gemini CLI, Cursor, ...) you can now reference elements and network requests selected in the Elements and Network panels
  • The list_console_messages tool now also includes issues surfaced in the Issues panel
  • The new press_key tool can now be used to debug keyboard events unrelated to form elements
  • Accessibility tree snapshots can now be saved to disk
  • Pages can now be reloaded, with the cache optionally ignored
  • Configure the --user-data-dir flag to use an existing Chrome profile

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.

Improved trace sharing

The trace sharing dialog in the Performance panel

When exporting a performance trace you can now include additional data in the exported file to ease further debugging for your future self or a colleague. You can now choose to include the following:

  • Resource content: A copy of all HTML, CSS, and JavaScript files (excluding extension scripts)
  • Script source maps: Mappings to authored code, allowing you to see original function names and source files.

Learn about what to share, and what to better keep private in our updated documentation.

We'd like to thank our colleagues at Microsoft with whose collaboration this was achieved, and who led the early work for this.

Support for @starting-style

The Elements panel now has support for debugging the new CSS @starting-style rule, which is essential for creating entry animations.

You can now see a starting-style adorner in the Elements tree next to relevant elements, toggle the element's starting-style state by clicking the pill, and inspect and debug the @starting-style block in the Styles tab.

Editor widget for display: masonry

If you experiment with CSS Masonry layout can now use the same editor widget as familiar from display: flex and grid layouts to quickly toggle through various alignment options in masonry layouts.

Lighthouse 13

The Lighthouse panel now runs Lighthouse 13. With this milestone, the work of unifying performance insights across DevTools and Lighthouse concludes.

Learn more in the announcement blog post. To learn what Lighthouse is useful for, and how it connects to the Performance panel in DevTools, see Lighthouse: Optimize your website.

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.