What's new in Chrome DevTools 145-147

Key Concepts

Soft Navigations: Non-page-reload transitions in Single Page Applications (SPAs).
Line-level Profiling: Precise performance tracking mapped to specific lines of code.
Render Blocking: Resources (scripts/stylesheets) that delay the First Contentful Paint (FCP).
Starting Styles: CSS @starting-style rule for defining entry animations.
Adopted Stylesheets: CSS modules programmatically attached to the DOM.
MCP (Model Context Protocol) Server: A bridge allowing AI agents to interact with Chrome DevTools.
Grid Autoflow: CSS layout algorithm for packing grid items.

Performance Optimization

SPA and Trace Improvements

Soft Navigation Markers: Chrome DevTools now provides dedicated markers in performance traces for SPA navigations. This allows developers to visualize the timeline of transitions that do not trigger a full browser reload.
Line-level Profiler Precision: Alignment issues between source maps and pretty-printed code have been resolved. This enables developers to identify performance bottlenecks at the exact line of code, even within minified production environments.
Render Blocking Column: A new column in the Network panel explicitly flags resources (scripts or stylesheets) that prevent the browser from completing the First Contentful Paint (FCP).

CSS and Styling Enhancements

Animation and Layout

Starting Styles: Support for the @starting-style CSS rule is now available. This allows developers to define the initial state of an element upon rendering, enabling smooth entry transitions (e.g., fade-ins) without requiring JavaScript.
Adopted Stylesheets: These now appear as a dedicated node within the DOM tree. Developers can expand this node to edit styles directly in the Styles pane, matching the workflow of traditional <style> tags.
Grid Editor: A "dense" checkbox has been added to the grid editor UI, allowing developers to toggle the grid-auto-flow: dense property to experiment with packing algorithms directly in the browser.
Regex Filtering: The filter bars in the "Styles" and "Computed" panes now support Regular Expressions. For example, using ^- with the regex control enabled allows developers to filter specifically for CSS variables.

Chrome DevTools MCP Server (AI Agent Integration)

The Chrome DevTools MCP server has been expanded to allow AI agents to perform complex debugging tasks:

Lighthouse Audits: Agents can now execute Lighthouse audits to check for regressions in accessibility, SEO, and best practices.
Performance Analysis: Specialized tools allow agents to record and investigate performance traces.
New Skills:
- Accessibility Debugging: Dedicated skill for identifying accessibility issues.
- LCP Measurement: Specialized skill to measure and debug Largest Contentful Paint.
- Troubleshooting: A skill to assist in the setup and configuration of the MCP server.
Slim Mode: A new configuration mode that enables only essential tools, designed to minimize token costs for AI agents during setup.

Synthesis and Conclusion

The updates across Chrome versions 145–147 focus on three primary pillars: improving the observability of modern SPA architectures, streamlining CSS debugging workflows, and expanding the capabilities of AI-driven development through the MCP server. By providing more granular performance data (soft navigation markers and render-blocking flags) and enhancing the developer experience with features like regex filtering and native @starting-style support, Chrome DevTools continues to reduce the friction between code changes and visual output. The integration of Lighthouse and performance profiling into the MCP server marks a significant shift toward "agentic debugging," where AI can proactively identify and resolve complex web performance and quality issues.