Chrome DevTools MCP 配置指南：让 AI 助手控制你的浏览器

🔧 Chrome DevTools MCP 配置指南：让 AI 助手控制你的浏览器

前言

在 AI 编程助手（如 Claude、CodeBuddy、Cursor 等）中，MCP（Model Context Protocol）是一种让 AI 与外部工具交互的协议。Chrome DevTools MCP 允许 AI 直接操控 Chrome 浏览器，实现：

• 🖼️ 自动截取网页截图
• 🔍 获取页面 DOM 结构
• ⚡ 执行 JavaScript 代码
• 🌐 监控网络请求
• 🧪 自动化 UI 测试

本文将详细介绍如何在 macOS 和 Windows 上配置 Chrome DevTools MCP，并创建便捷的启动方式。

---

一、原理简介

Chrome DevTools MCP 的工作原理：

┌─────────────┐     MCP协议      ┌─────────────────────┐     CDP协议      ┌─────────────┐
│   AI 助手   │ ◄──────────────► │ Chrome DevTools MCP │ ◄──────────────► │   Chrome    │
│ (CodeBuddy) │                  │      Server         │                  │  (调试模式)  │
└─────────────┘                  └─────────────────────┘                  └─────────────┘

• CDP（Chrome DevTools Protocol）：Chrome 原生的调试协议
• MCP Server：作为中间层，将 CDP 能力暴露给 AI 助手

---

二、macOS 配置

2.1 创建调试模式 Chrome 快捷方式

为了让 MCP 能连接 Chrome，需要以 远程调试模式 启动浏览器。我们创建一个独立的应用，保持插件和数据持久化。

方案 A：Automator 应用程序（推荐）

1. 创建用户数据目录

mkdir -p ~/ChromeDebugProfile

2. 打开 Automator

   • Spotlight 搜索 Automator 并打开
   • 选择 新建文稿 → 应用程序

3. 添加 Shell 脚本

   • 左侧搜索「运行 Shell 脚本」，双击添加
   • 粘贴以下内容：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir="$HOME/ChromeDebugProfile" &

4. 保存应用

   • ⌘ + S 保存
   • 名称：Chrome Debug
   • 位置：应用程序 文件夹

5. 设置图标（可选）

   • 右键 /Applications/Google Chrome.app → 显示简介 → 点击左上角图标 → ⌘ + C
   • 右键 /Applications/Chrome Debug.app → 显示简介 → 点击左上角图标 → ⌘ + V

方案 B：命令行脚本

# 创建脚本
cat > ~/Applications/chrome-debug.command << 'EOF'
#!/bin/bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir="$HOME/ChromeDebugProfile" &
exit
EOF

# 添加执行权限
chmod +x ~/Applications/chrome-debug.command

双击 chrome-debug.command 即可启动。

---

2.2 配置 MCP Server

以 CodeBuddy 为例，编辑配置文件：

路径 ：~/Library/Application Support/CodeBuddyExtension/Cache/CodeBuddyIDE/CodeBuddy CN/mcp/settings.json

添加以下配置：

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://127.0.0.1:9222"
      ],
      "timeout": 60000,
      "disabled": false
    }
  }
}

⚠️ 注意：如果使用 nvm 管理 Node.js，需要填写 npx 的完整路径：

# 获取 npx 路径
which npx
# 输出类似：/Users/yourname/.nvm/versions/node/v22.11.0/bin/npx

将 command 改为完整路径。

---

三、Windows 配置

3.1 创建调试模式 Chrome 快捷方式

方案 A：桌面快捷方式（推荐）

1. 右键桌面 → 新建 → 快捷方式

2. 输入目标位置：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%USERPROFILE%\ChromeDebugProfile"

3. 命名 ：Chrome Debug

4. 更换图标（可选）：

   • 右键快捷方式 → 属性 → 更改图标
   • 浏览到 C:\Program Files\Google\Chrome\Application\chrome.exe

方案 B：批处理脚本

创建 chrome-debug.bat 文件：

@echo off
start "" "C:\Program Files\Google\Chrome\Application\chrome.exe" ^
  --remote-debugging-port=9222 ^
  --user-data-dir="%USERPROFILE%\ChromeDebugProfile"

双击运行即可。

方案 C：PowerShell 脚本

创建 chrome-debug.ps1 文件：

Start-Process "C:\Program Files\Google\Chrome\Application\chrome.exe" `
  -ArgumentList "--remote-debugging-port=9222", "--user-data-dir=$env:USERPROFILE\ChromeDebugProfile"

---

3.2 配置 MCP Server

以 CodeBuddy 为例，编辑配置文件：

路径 ：%APPDATA%\CodeBuddyExtension\Cache\CodeBuddyIDE\CodeBuddy CN\mcp\settings.json

添加以下配置：

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://127.0.0.1:9222"
      ],
      "timeout": 60000,
      "disabled": false
    }
  }
}

⚠️ 注意 ：如果 npx 不在系统 PATH 中，需要填写完整路径，如：

"command": "C:\\Program Files\\nodejs\\npx.cmd"

---

四、验证配置

4.1 验证 Chrome 调试模式

启动调试模式 Chrome 后，浏览器访问：

http://127.0.0.1:9222/json

如果看到类似以下 JSON 输出，说明调试模式启动成功：

[
  {
    "description": "",
    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/...",
    "id": "...",
    "title": "New Tab",
    "type": "page",
    "url": "chrome://newtab/",
    "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/..."
  }
]

4.2 验证 MCP 连接

重启 IDE 后，在 AI 对话中尝试：

帮我截取当前浏览器页面的截图

如果 AI 能返回截图，说明配置成功！

---

五、常见问题

Q1: MCP Server process closed during connection

原因 ：command 字段不支持 shell 命令组合（如 &&）

❌ 错误写法：

"command": "nvm use 22 && npx"

✅ 正确写法：

"command": "/Users/yourname/.nvm/versions/node/v22.11.0/bin/npx"

---

Q2: 端口 9222 被占用

解决方案：

# macOS/Linux：查找占用进程
lsof -i :9222

# Windows：查找占用进程
netstat -ano | findstr :9222

# 杀掉进程或换一个端口（如 9223）

---

Q3: 每次启动都是新的浏览器环境

原因 ：没有指定 --user-data-dir 参数

解决方案：确保启动命令包含：

--user-data-dir="你的数据目录路径"

---

Q4: 插件无法使用 / 登录状态丢失

原因：调试模式 Chrome 使用了独立的用户数据目录

解决方案：首次启动后，在调试模式 Chrome 中重新安装插件、登录账号，后续会自动保存。

---

六、进阶配置

6.1 开机自启动

macOS

系统设置 → 通用 → 登录项 → 添加 Chrome Debug.app

Windows

1. Win + R 输入 shell:startup
2. 将 Chrome Debug 快捷方式复制到打开的文件夹

---

6.2 多端口配置

如果需要同时运行多个调试实例：

# 实例 1
chrome --remote-debugging-port=9222 --user-data-dir="~/ChromeDebug1"

# 实例 2
chrome --remote-debugging-port=9223 --user-data-dir="~/ChromeDebug2"

---

七、参数说明

参数	说明
--remote-debugging-port=9222	开启远程调试端口
--user-data-dir="路径"	指定用户数据目录（插件、书签、Cookie 等）
--headless	无头模式（不显示界面）
--disable-gpu	禁用 GPU 加速（解决某些兼容问题）
--no-first-run	跳过首次运行向导

---

八、总结

通过本文的配置，你可以：

1. ✅ 创建独立的调试模式 Chrome，不影响日常使用
2. ✅ 保持插件、书签、登录状态持久化
3. ✅ 让 AI 助手通过 MCP 控制浏览器
4. ✅ 实现自动化截图、DOM 分析、UI 测试等功能

希望这篇文章对你有帮助！如果遇到问题，欢迎在评论区交流 💬

---

相关链接：

• Chrome DevTools Protocol 官方文档
• MCP 协议规范