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.

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

Cursor / Claude:

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

VS Code + Claude:

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

OpenAI ChatGPT / ChatGPT Canvas:

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

Google Gemini:

1
{
2
  "servers": {
3
    "chrome-devtools-mcp": {
4
      "command": "npx",
5
      "args": ["@anthropic-ai/chrome-devtools-mcp"]
6
    }
7
  }
8
}

GitHub Copilot:

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

JetBrains IDEs (IntelliJ, WebStorm, PyCharm):

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

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.