Chrome DevTools MCP: Let Your AI Agent Debug Your App

Your AI assistant can’t see what’s happening in your browser. You describe a bug, they guess at fixes, and it’s usually wrong because they don’t have the actual error message or network data.

Chrome DevTools MCP fixes that. It gives your AI agent access to your running app. They can take screenshots, see what’s in the DOM, check network requests, run JavaScript, and see console errors. Same stuff you see in DevTools.

Update: the install configs now use the real package

The first version of this post told you to run @anthropic-ai/chrome-devtools-mcp. That package doesn’t exist on npm. The server is published by the Chrome DevTools team as chrome-devtools-mcp, and the setup steps below now follow its client configuration guide.

You install an MCP server that talks to your browser. Now when you describe a bug, your AI agent can actually see it instead of guessing.

Here’s what happens in practice. You tell Claude “there’s a form that won’t submit.” Claude takes a screenshot, inspects the network tab, sees the API returned a 401, checks the error handler code, and tells you exactly what’s broken. No more guessing. No more “have you tried…?”

Installation

Most clients take the same config:

1
{
2
  "mcpServers": {
3
    "chrome-devtools": {
4
      "command": "npx",
5
      "args": ["-y", "chrome-devtools-mcp@latest"]
6
    }
7
  }
8
}

Cursor: Go to Cursor Settings -> MCP -> New MCP Server and paste the config above.

Claude Code:

1
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

VS Code (GitHub Copilot):

1
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

OpenAI Codex:

1
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Gemini CLI:

1
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

GitHub Copilot CLI: Start copilot, run /mcp add, name the server chrome-devtools, pick Local, and set the command to npx -y chrome-devtools-mcp@latest.

JetBrains IDEs (IntelliJ, WebStorm, PyCharm): Go to Settings | Tools | AI Assistant | Model Context Protocol (MCP) -> Add and paste the config above.

After adding the config, restart your editor. In your next conversation, tell your AI agent: “Use Chrome DevTools MCP to inspect my app at localhost:3000.” It’ll ask for permission (for safety), connect to your browser, and start debugging.

The value is immediate. Your AI agent goes from making educated guesses to seeing actual errors. When something breaks in production but works locally, or performance tanks under load, your agent can now see what you see and debug in real-time.