- Published on
Chrome DevTools MCP
- Authors
- Name
Introduction
If youâve used LLM coding tools like Cursor, Codex, or Claude, youâve probably faced this scenario: you write a bunch of rules and descriptions of what you want the LLM to implement. The LLM writes a bunch of code and⌠boom, nothing works! You try again, paste the full error logs, it writes more code and⌠baam! Still nothing.
Well, if youâre facing this in the frontend world, Google might have a new tool to help you spend fewer tokens on unnecessary code: Chrome DevTools MCP.
In this post Iâll describe my tests with this MCP to solve real problems. Letâs dive in!
A new way to debug
First of all, in case youâve been asleep for the past few months, MCP is an open protocol to connect text-based LLMs to the real world. Thatâs not the official definition, but itâs how I see it. Imagine you type plain text into an LLM, and itâs able to run other applications. Thatâs possible as long as the application has an MCP provider.
You can check a deeper explanation here, or see how to install it in your favorite LLM tool here.
I first installed it on codex cli, then created a project with React + Vite that had some performance issues, like this one:
I created a form with multiple fields, but one of them had slow validation: the email field. You can check the repository.
Then I opened Codex in my terminal and typed:
Use MCP 'chrome-devtools' for:
1. Run this app and open http://localhost:5174/issue3
2. Run a performance check while filling all the fields
3. Describe which fields are causing performance issues
4. Fix the performance issues
Just wait for the magic. MCP opened a new Chrome instance, filled in all the fields, and ran a performance test from DevTools. After that, it described and fixed the problem. And it worked!
The solution itself isnât part of this post, but you can see it in the repository.
You can even add a new todo item like this:
5. I'm using Codex, create an AGENT to do this check automatically, like a UI test
In the repository I created an AGENT and a Cursor Command to transform this into a UI testâjust in case someone introduces the issue again.
You can also ask DevTools MCP to run a performance test for a set time, like this:
Use MCP 'chrome-devtools' for:
1. Run this app and open http://localhost:5174/issue1
2. Run a performance check for 10 seconds
3. Based on results, fix the performance issue in the code
There are a bunch of other commands too, like testing network speed, LCP, and more. You can use this MCP to guide you through testing, collecting, and analyzing metrics.
Conclusion
Google Chrome DevTools MCP is awesome. But like with any LLM, youâll get the best results if youâre specific instead of generic: describe which metric you want to measure, how long you want to run the tests, or even ask MCP to guide your exploration.
When it comes to optimization, remember the golden rule: first measure, then change, then measure again. If the metric doesnât show improvement, pick another one and restart the process until you find the root cause.