Chrome DevTools MCP
Let the agent open the page and read what actually rendered
Chrome DevTools MCP gives an agent a real Chrome instance: navigate, screenshot, click, evaluate scripts, read the console and inspect network requests. It closes the loop between writing frontend code and knowing whether it worked.
Best for when
- the agent writes frontend code and needs to see the result
- debugging a hydration or console error you cannot reproduce by reading
- measuring performance rather than guessing at it
Watch out for
- screenshots consume a lot of context, so ask for them at decision points only
- it drives a real browser that can log in and submit forms, so scope what it may reach
- a visible Chrome window competes with your own browsing session
Install
Add to Claude Code
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latestWhy this is the highest value server for frontend work
Without a browser, an agent writing UI is guessing. It cannot see that a heading wrapped, that a request returned 500, or that a component threw during hydration. With a browser it reads the console, takes a screenshot and fixes the actual problem.
Performance traces and Lighthouse audits are also exposed, which turns vague instructions about making a page fast into a measurement the agent can act on.
How to use it without wasting tokens
Screenshots are expensive in context. Ask for one at a decision point, not after every edit, and prefer reading the console or a specific element's computed style when that answers the question.
It drives a real browser, so it can log into things and submit forms. Point it at local development, and be deliberate before pointing it at anything authenticated or public.
