5 Game-Changing Chrome DevTools Updates You Need to Try in 2025

#webdev #ai #webperf #javascript

This is an article version of my talk “Chrome DevTools LIVE LIVE LIVE” presented at DevFest Venice 2025 and DevFest Birmingham 2025.*

In this article, we dive into the latest updates in Chrome DevTools designed to help developers cut through the complexity of auditing web pages for performance. We'll explore how Live Metrics Page offers instant, user-centric data; how CPU and Network Throttling can be used to accurately simulate real-world device performance and connection conditions; and how AI is finally making the notorious performance "waterfall" readable.

Live Metrics Page

Cartoon illustration titled — (Credit: "IWOMM - It Works on My Machine" by Torsten J. Zelger)

"Hey, the website feels very snappy on my computer," says the developer using an M5 MacBook Pro with 32GB of RAM, costing 2,299 Euro.

It is important to know the real-world performance results for your users. Thankfully, Chrome collects this data globally in the Chrome User Experience Report (CrUX). This report measures essential web performance metrics, known as Core Web Vitals, such as Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

With that, we can use the Live Metrics Page to get a high-level understanding of web performance by opening the Performance panel. The metrics data is live, as the INP and CLS scores will keep updating as you interact with the page. It will also point out your LCP element, identify which element is causing CLS, and show the history of interactions.

CPU Throttling Calibration

One way to simulate real user environments for accurate local metrics is to use CPU throttling. DevTools added CPU throttling back in 2015; however, the current 4x or 20x (CPU) slowdown options are quite limited, making it difficult to accurately simulate real-world performance. For example, with the 20x CPU slowdown throttling selected, your expensive M5 MacBook Pro could be faster than the performance of your user’s device.

In Chrome 134, DevTools added CPU throttling calibration, which allows you to simulate CPU throttling with a more accurate result. By running the CPU throttling calibration, DevTools will generate "low-tier mobile" and "mid-tier mobile" throttling presets, specific to your development machine.

Individual Request Throttling

Network Throttling was added to Chrome DevTools back in 2014. For the past 11+ years, network throttling has always applied to all network requests.

As of November 2025, Individual Request Throttling has been added to Chrome Canary. With this feature, you can now throttle a specific network request to a specific speed. You can customize the request in the “Request conditions” tab (previously called “Network request blocking”).

You can use network throttling profiles to create a custom network throttling profile, allowing you to customize download/upload speeds, network latency, packet loss percentage, and packet queue length.

To enable Individual Request Throttling, you need to install the latest version of Chrome Canary and enable “Enable individual request throttling in DevTools” in chrome://flags.

Example use case for Individual Request Throttling:

Scenario: You want to test if your web font loading strategy prevents "Flash of Invisible Text" (FOIT), but you don't want to slow down your JS bundles.
How to test it:
1. Open the Network Panel.
2. Right-click a specific resource (e.g., roboto.woff2).
3. Select "Throttle requests" > “Throttle request URL”.
4. In the “Request conditions” tab, change the network preset as you like, “Slow 4G” for example.
5. Refresh the page, notice the color for roboto.woff2 in Network Panel has now changed to yellow.

By only slowing down the roboto.woff2, you can now check if your font-display: swap fallback strategy is working correctly without affecting the rest of the page to load.

AI Assistance for Performance

The "Waterfall" (or inverted flamechart) in the Performance panel has been notoriously difficult to read and understand. Things just get worse with modern web frameworks, which bombard the waterfall with even more noise.

Tip: There are two ways to navigate the waterfall using a keyboard: Modern (use scrollwheel to scroll) and Classic (use scrollwheel to zoom). Click the question mark icon in the top right corner in the performance panel. And use “W” and “S” for zooming, “A” and “D” for panning left or right.

Another Tip: If you are using Angular v20 or React 19.2, you will now see custom tracks that provide more detailed information about your Angular/React app's performance thanks to the console.timeStamp API and User Timings API.

AI Annotation

Understanding the waterfall is the first step to analyze web performance. Annotation on the waterfall could be very useful, as you can label the track with your own words. This is also very useful if you need to share the findings with your colleagues. With the help of AI, DevTools can automatically generate the label for you based on the context.

To do this, double-click on one of the main tracks, then click on "Generate label". AI will suggest a label based on the stack trace.

Debug with AI

In the AI assistance panel, you can simply ask “What performance issues exist with my page?”, and you will be able to look at the potential performance issues from a higher level before diving deeper.

Or in the performance waterfall, right-click on any stack, then you can use AI to assess the purpose, identify time spent, find improvements, or just ask AI any question in the chat (AI assistance panel) in plain language

Note: This feature was previously called “Ask AI”, it was renamed to “Debug with AI” in Chrome 142.

Chrome DevTools MCP

The Chrome DevTools MCP is the most powerful feature added to Chrome DevTools this year. It allows your coding agent (such as Gemini CLI, Copilot, Cursor, etc) to control and inspect a live Chrome browser, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.

This is significantly more powerful than the built-in AI assistance within Chrome DevTools because it has direct access to your source code. Previously, the AI suggestions from your IDE were generated without runtime context. Now with Chrome DevTools MCP, it can cross-reference your source code with live browser behavior, including performance trace, network requests, and console errors.

For example, you can ask the AI, localhost:8080 is loading slowly. Make it load faster. Chrome DevTools MCP will start a performance trace and use performance_analyze_insight to gather Core Web Vitals metrics like LCP, CLS, and INP.

Since it also has access to your source code, it can pinpoint the culprit and provide accurate fixes. It can even re-measure performance after the fix to verify that the changes actually worked.

Performance auditing is just one use case for the Chrome DevTools MCP. Addy Osmani’s article covers even more scenarios, such as verifying code changes, performing network diagnosis, simulating user behavior for testing, and more.

Conclusion

In conclusion, optimizing web performance is very important for providing a good user experience. By using these 5 game-changing DevTools features, including the Live Metrics Page, advanced throttling options, and powerful AI Assistance, you can move beyond local benchmarks to accurately understand and optimize Core Web Vitals for every user.

However, these features are just the tip of the iceberg; Chrome DevTools is significantly more powerful than you might expect. With the Chrome DevTools MCP still improving, I can’t wait to see more advanced use cases emerge that redefine performance auditing.

Find me on social media!