What's new in Chrome DevTools 145-147

Key Takeaways

Hey, I'm Matias and welcome to What's New in Dev Tools. This episode covers Chrome 145 to 147. We're looking at new performance features for single page apps, improved styles debugging for web components, and new features for the Chrome DevTools MCP server. On the modern web, a navigation isn't always a hard reload with every click. Single page applications just update what needs changing, leaving the user in their flow. Navigations like this feel seamless for users, but they've been historically difficult to track in a performance trace until now. Let's dive in. When recording a performance trace while navigating through a single page app, you'll now see dedicated markers for those soft navigations and related timings. This gives you a clear timeline of when a user initiated navigation starts in your spa, making it easier to optimize for really seamless transitions. And in cases where you really need to get down to the details, our line level profiler timings are now significantly more precise. We've fixed the alignment issues with source maps and pretty printed code. So even in minified production environments, you can see exactly which line of code is your bottleneck and where you should optimize. But of course, code isn't the only possible bottleneck. Infrastructure can be another one too. To better cover cases like this, we added a new render blocking column to the network panel. It explicitly labels resources that are holding up your first paint. If a script or stylesheet is preventing the user from seeing your content, it's now flagged at a glance. So, those updates help you make your sites fast, AI generated or not. Now, let's look into how to make them even prettier. Once you've unblocked your first paint, you might want to style how animated elements actually appear. DevTools now offers support for starting style by default. This add rule allows you to define the styles an element has the very moment it's first rendered. It's the key to creating smooth entry transitions like fading in a dialogue directly in CSS without needing JavaScript hacks. Starting styles are not the only styles we improve debugging for. Adopted stylesheets now live directly in the DOM tree under a dedicated note. You can expand this note and edit these stylesheets in the styles pane, bringing them into parity with traditional style tags. And we're closing CSS updates with a little UI tweak. The grid editor now includes a dense checkbox for grid autoflow, helping you experiment with packing algorithms without leaving the UI. Find it by clicking the editor button next to any display grid property in your stites. Despite those updates for DevTools inside Chrome, we continue to bring the best of DevTools to agents with our Chrome DevTools MCP server. You can now run Lighthouse audits directly through MCP. This allows your agents to check for regressions in accessibility, SEO, and best practices through your coding agent using the same audits as familiar from DevTools UI. To analyze performance, agents can rely on more specialized tools built into the server, allowing agents to record and investigate traces and related performance insights. We also added various skills to the MCP server, including a dedicated accessibility debugging skill, a skill to measure and debug LCP, and a skill to troubleshoot your DevTools MCP installation. And to mention one last of many improvements we did over the last couple of weeks. We added a new slim mode enabling only essential tools to keep upfront token costs for setup as minimal as possible. Before we wrap up, bonus tip coming back to CSS in the styles computed in properties paints the filter bars now support regular expressions. Whether you're looking for all CSS variables or a specific set of properties, just use a rag X. It's a small change that makes navigating large stylesheets significantly faster. For example, type carrot- dash and make sure to enable the rex control to filter for all CSS variables. That's what was new in dev tools for 145 through 147. From measuring spas to agentic debugging, we are making the web easier to build and debug. For a full in-depth overview of all features that landed in the three releases, find all our release notes on developer.chrome.com linked from the description. Let us know what you think of the new and updated features in the comments below. Thanks for watching and see you next time. [music] >> [music]