Claude + Chrome DevTools + MCP 完整指南：让 AI 直接“操作浏览器”

在 AI 辅助开发逐渐成为趋势的今天，我们不满足于只让 Claude 回答问题，而是希望它能直接操作浏览器、查看 DOM、执行 JavaScript、抓包调试网页。
这一切得益于一个新协议——MCP（Model Context Protocol） 和工具 chrome-devtools-mcp。

---

✅ 一、MCP 是什么？是谁提出的？

MCP，全称 Model Context Protocol，由 Anthropic（Claude 的公司）在 2024 年推出。

它的目标是：

✅ 让 AI 通过“标准协议”与外部世界（文件系统、浏览器、数据库、Git 等工具）安全、可控地交互。

就像 USB 是设备通用接口一样，MCP 是 AI 和工具之间的“通用协议”。

官方来源：

• 🔗 https://docs.claude.com/en/docs/claude-code/mcp
• 🔗 https://www.theverge.com/2024/11/25/anthropic-model-context-protocol
• 🔗 https://github.com/modelcontextprotocol

---

✅ 二、chrome-devtools-mcp 是什么？

这是一个基于 MCP 的插件（MCP Server），由 Chrome 官方团队开发：

• GitHub 链接：🔗 https://github.com/ChromeDevTools/chrome-devtools-mcp
• 作用：让 Claude 通过 Chrome DevTools 协议（CDP）直接控制浏览器

它能让 Claude 做这些事：

功能	示例
打开网页	“打开 https://example.com 并帮我分析页面结构”
读取 DOM	“列出所有 h1 标签内容”
执行代码	“执行 document.title 并返回”
抓取网络请求	“告诉我页面加载了哪些 XHR 请求”

---

✅ 三、环境准备

必备条件	是否必须
Claude Desktop（非网页版）	✅ 必须
Node.js & npm	✅ 安装 MCP 服务
Chrome / Chromium	✅ 调试浏览器
启用 DevTools 调试端口	✅ 使用 CDP

---

✅ 四、完整安装步骤（一步步来）

✅ 1）安装 chrome-devtools-mcp

npm install -g chrome-devtools-mcp

✅ 2）打开 Chrome 调试模式

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-mcp

说明：

• 9222 是 DevTools 监听端口
• user-data-dir 避免和你日常 Chrome 冲突

✅ 3）启动 MCP Server

chrome-devtools-mcp --port 8080

✅ 4）注册到 Claude Desktop

编辑配置文件（路径因系统不同）：

系统	配置路径
macOS	~/Library/Application Support/Claude/claude_desktop_config.json
Windows	%APPDATA%\Claude\claude_desktop_config.json
Linux	~/.config/Claude/claude_desktop_config.json

添加内容：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp",
      "args": ["--port", "8080"]
    }
  }
}

然后 重启 Claude Desktop ✅

---

✅ 五、如何测试是否成功？

打开 Claude，对它说：

/mcp

如果出现 chrome-devtools ✅ loaded，说明配置成功。

再试：

打开 https://example.com 并返回页面标题

或：

帮我执行 document.title 并返回结果

---

✅ 六、命令区别：claude mcp add vs --scope user

Claude CLI 也支持添加 MCP 服务：

命令	意义
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest	只对当前项目生效（存 .claude/config.json）
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest --scope user	全局生效（适用于所有工程）✅ 推荐

---

✅ 七、常见问题排查（新手必看）

问题	原因	解决方案
输入 /mcp 没反应	使用的是 Claude 网页版	换成 Claude Desktop
浏览器连接失败	Chrome 未用 --remote-debugging-port=9222 启动	重新启动
MCP 显示未加载	JSON 配置错误或未重启 Claude	检查路径 & 重启
端口冲突	9222/8080 被占用	改成 9223 或 8081

---

✅ 八、完整流程图

安装 Node.js → 安装 MCP 插件 → 启动 Chrome → 启动 MCP 服务 → 配置到 Claude → 直接让 AI 操作浏览器

---

✅ 九、总结

🟢 MCP 是 Claude 背后的“插件标准协议”，由 Anthropic 提出
🟢 chrome-devtools-mcp 是 Chrome 官方基于 MCP 提供的浏览器控制接口
🟢 配置完成后，Claude 能像程序员一样操作浏览器、调试网页