Chrome DevTools MCP

by Google Chrome DevTools

Ask Claude to check if your page actually renders correctly, and it opens Chrome, navigates to localhost, takes a screenshot, and tells you the hero image is 400px off-center. That's Chrome DevTools MCP — Google's official answer to the "AI coding blind" problem. Before this server existed, AI coding agents operated with a blindfold on. They could write frontend code all day, but they had zero way to verify that code actually worked in a browser. You'd paste screenshots into chat, describe layout bugs in words, copy-paste console errors — a painful feedback loop that made AI-assisted frontend work feel half-broken. Chrome DevTools MCP gives your AI agent direct access to a live Chrome browser with 29 specialized tools across six categories. Input automation (click, drag, fill forms), navigation (open tabs, wait for elements), performance profiling (record traces, analyze LCP/TBT/CLS), network inspection (catch failed API calls, CORS errors), and full debugging (evaluate scripts, read console logs with source-mapped stack traces, run Lighthouse audits). The real power shows up in compound workflows. Tell Claude to "navigate to the signup page, fill out the form, submit it, and check if the success message appears" — and it actually does it, step by step, in a real browser. Pair it with the GitHub MCP server and you get a pipeline: write code, verify it renders, commit the fix. Setup takes 60 seconds. One npx command in your MCP config and you're running. For CI/CD environments, the --headless flag runs Chrome without a visible UI. The --slim flag strips the tool count down to 3 for basic tasks when you don't need all 29. And --isolated creates temporary browser profiles that auto-clean after each session. Built on Puppeteer with automatic result waiting, so actions don't race against page loads. Works with Claude Code, Cursor, VS Code Copilot, Gemini CLI, JetBrains, and every other MCP-compatible client.

FAQ