📘 MCP Chrome DevTools

1.1 🎯 简介

Chrome DevTools MCP 是一个官方维护的 MCP 服务器，它允许 AI 助手（如 Claude, Gemini）通过 DevTools 协议控制和检查 Chrome 浏览器。

核心特性:

🔹 浏览器自动化: 点击、输入、导航、页面交互。
🔹 性能分析: 记录 Trace，分析页面性能瓶颈。
🔹 调试与检查: 查看 Console 日志、网络请求、执行 JavaScript。

技术栈: TypeScript, Node.js, Puppeteer, Chrome DevTools Protocol

1.2 💡 适用场景

1.2.1 ✅ 适合使用的场景

Web 开发调试
- 让 AI 帮你重现 Bug，或者检查页面上的 Console 报错。
- "打开 localhost
  并检查有没有网络请求失败"。
性能优化
- 让 AI 分析特定网页的加载性能，给出优化建议。
自动化测试
- 让 AI 执行简单的端到端测试流程。

1.2.2 ❌ 不适合使用的场景

生产环境监控: 这是一个开发辅助工具，不适合作为长期运行的监控服务。

1.3 🔧 安装步骤

1.3.1 前置要求

Node.js v20.19 或更高版本。
Chrome 浏览器。

1.3.2 安装方法

通常不需要单独安装，直接在 MCP Client 配置中使用 npx 运行即可。

1.3.3 Claude Desktop 配置

在 claude_desktop_config.json 中添加配置：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

1.3.4 验证安装

重启 Claude Desktop。
询问 Claude: "打开 https://google.com 并截图"。
预期输出：Claude 启动一个 Chrome 窗口（或 Headless 模式），访问并截图。

1.4 ⚠️ 常见错误与排查

1.4.1 错误1: 无法连接现有 Chrome

症状: 希望 AI 控制已打开的 Chrome 窗口，但它新开了一个。

原因: 默认配置会启动新的 Puppeteer 实例。

解决方案:

启动 Chrome 时添加参数: --remote-debugging-port=9222.
在 MCP 配置 args 中添加: --browserUrl=http://localhost:9222。

1.5 ✨ 最佳实践

1.5.1 🎨 使用技巧

连接现有窗口
- 调试复杂应用时，手动登录并打开页面，然后让 AI 连接进来进行分析，比让 AI 从头模拟登录更高效。

1.6 📌 P.S. 其他注意事项

这是一个非常强大的工具，赋予了 AI "看" 网页和 "用" 浏览器的能力。