Chrome DevTools MCP + CodeBuddy 配置指南
Chrome DevTools MCP + CodeBuddy 配置指南
通过 Chrome DevTools MCP，让 CodeBuddy（AI 编码助手）直接控制你正在使用的 Chrome 浏览器，复用已有的登录态和 Session，无需新开浏览器。
目录
- 前提条件
- 核心概念
- 配置方式一：autoConnect（推荐，Chrome 144+）
- 配置方式二：手动指定调试端口（Chrome 143 及以下）
- 在 CodeBuddy 中启动 MCP
- 常用操作示例
- 完整参数列表
- 常见问题排查
前提条件
| 依赖 | 最低版本 | 说明 |
|---|---|---|
| Chrome 浏览器 | 144+（推荐） | 低版本需用方式二 |
| Node.js | 18+ | 用于 npx 运行 MCP 服务器 |
| CodeBuddy | 最新版 | IDE 内的 AI 编码助手 |
核心概念
什么是 Chrome DevTools MCP？
chrome-devtools-mcp 是一个 MCP（Model Context Protocol）服务器，让 AI 编码助手能够：
- 🔍 查看和管理标签页 — 列出、切换、关闭页面
- 🖱️ 模拟用户操作 — 点击、输入、滚动、拖拽
- 📸 截图 — 捕获页面截图用于分析
- 🌐 监控网络 — 查看请求、分析 CORS 等问题
- ⚡ 性能分析 — Lighthouse 审计、性能追踪
- 💻 执行脚本 — 在页面中运行 JavaScript
为什么要复用已有浏览器？
默认模式会启动一个全新的 Chrome 实例，这意味着：
- ❌ 没有任何登录态
- ❌ 没有已保存的 Cookie
- ❌ 没有你安装的扩展插件
- ❌ 无法访问需要鉴权的内部页面
复用已有浏览器（即连接到你正在使用的 Chrome）则可以：
- ✅ 保留所有登录态和 Cookie
- ✅ 使用已安装的扩展插件
- ✅ 访问公司内网、需要鉴权的页面
- ✅ 操作你当前打开的标签页
配置方式一：autoConnect（推荐，Chrome 144+）
这是最简单、最推荐的方式，直接连接到你当前正在使用的 Chrome 浏览器。
第 1 步：在 Chrome 中开启远程调试
- 打开 Chrome 浏览器
- 在地址栏输入：
chrome://inspect/#remote-debugging - 找到 "Allow remote debugging for this browser instance" 开关
- 打开该开关
- 页面会显示
Server running at: 127.0.0.1:9222（端口号可能不同）
⚠️ 安全提示：开启远程调试意味着外部应用可以完全控制浏览器，包括读取 Cookie、导航等。仅在开发环境中使用，用完后建议关闭。
第 2 步：配置 mcp.json
编辑 CodeBuddy 的 MCP 配置文件 ~/.codebuddy/mcp.json：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--autoConnect"
],
"disabled": false
}
}
}
关键参数说明：
-y：自动确认 npx 安装提示chrome-devtools-mcp@latest：始终使用最新版--autoConnect：核心参数，自动发现并连接到本地已开启远程调试的 Chrome
第 3 步：在 CodeBuddy 中启动
详见下方 在 CodeBuddy 中启动 MCP 章节。
配置方式二：手动指定调试端口（Chrome 143 及以下）
适用于较旧版本的 Chrome，或需要精确控制连接的场景。
第 1 步：以调试模式启动 Chrome
需要先完全退出 Chrome，然后从命令行启动：
macOS：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--remote-debugging-port=9222 \
--user-data-dir=/tmp/chrome-profile-stable
Linux：
google-chrome \
--remote-debugging-port=9222 \
--user-data-dir=/tmp/chrome-profile-stable
Windows：
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
--remote-debugging-port=9222 ^
--user-data-dir=%TEMP%\chrome-profile-stable
💡 关于
--user-data-dir：
- 使用你的默认用户数据目录可以复用已有的登录态和 Cookie
- macOS 默认路径：
~/Library/Application Support/Google/Chrome- 使用临时目录（如
/tmp/chrome-profile-stable）会得到一个干净的浏览器环境
第 2 步：验证调试端口
打开另一个终端，执行：
curl http://127.0.0.1:9222/json/version
应该返回类似：
{
"Browser": "Chrome/143.x.x.x",
"Protocol-Version": "1.3",
"webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/browser/..."
}
第 3 步：配置 mcp.json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--browserUrl=http://127.0.0.1:9222"
],
"disabled": false
}
}
}
或者使用 WebSocket 端点直连：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>"
],
"disabled": false
}
}
}
在 CodeBuddy 中启动 MCP
第 1 步：打开 MCP 设置
- 打开 CodeBuddy 对话面板
- 点击右上角的 设置按钮 ⚙️
- 切换到 MCP 标签页
第 2 步：确认配置已加载
- 你应该能看到
chrome-devtools服务器条目 - 如果看不到，检查
~/.codebuddy/mcp.json文件是否保存正确
第 3 步：启动 MCP 服务器
- 找到
chrome-devtools条目 - 如果状态是 🔴（红色）→ 点击右侧的 "Try to Run" 按钮
- 等待状态变为 🟢（绿色）
第 4 步：授权连接（仅 autoConnect 模式）
使用 --autoConnect 时，Chrome 浏览器会弹出一个授权对话框：
"An application is requesting to debug this browser. Allow?"
点击 "Allow"（允许） 即可完成连接。
验证连接
在 CodeBuddy 对话框中输入：
查看浏览器中有哪些标签页
如果返回了标签页列表，说明连接成功！🎉
常用操作示例
连接成功后，你可以在 CodeBuddy 中用自然语言操控浏览器：
页面管理
查看所有打开的标签页
关闭所有 xxx.com 的页面
打开一个新页面，访问 https://example.com
切换到第 3 个标签页
页面交互
截个屏
在搜索框中输入 "hello world"
点击登录按钮
滚动到页面底部
信息提取
获取当前页面的标题和 URL
读取页面上的表格数据
查看页面的控制台日志
性能分析
对当前页面做一次 Lighthouse 审计
录制 5 秒的性能追踪
分析页面的网络请求
执行脚本
在当前页面执行 JavaScript：document.title
获取页面上所有链接的 href
完整参数列表
| 参数 | 类型 | 说明 |
|---|---|---|
--autoConnect |
布尔 | 自动连接到本地 Chrome（需 Chrome 144+，需先开启远程调试） |
--browserUrl |
字符串 | 连接到指定调试 URL，如 http://127.0.0.1:9222 |
--wsEndpoint |
字符串 | 连接到指定 WebSocket 端点 |
--wsHeaders |
字符串 | WebSocket 连接的自定义 JSON 头部 |
--headless |
布尔 | 无头模式运行（无界面） |
--executablePath |
字符串 | 指定 Chrome 可执行文件路径 |
--userDataDir |
字符串 | Chrome 用户数据目录 |
--isolated |
布尔 | 使用临时用户数据目录，关闭后自动清理 |
--channel |
字符串 | Chrome 通道：stable（默认）、canary、beta、dev |
--viewport |
字符串 | 视口大小，如 1280x720 |
--proxyServer |
字符串 | 代理服务器地址 |
--acceptInsecureCerts |
布尔 | 忽略 SSL 证书错误 |
--slim |
布尔 | 精简模式，仅暴露导航、脚本执行、截图 3 个工具 |
--no-usage-statistics |
布尔 | 禁用使用统计收集 |
--logFile |
字符串 | 调试日志输出文件路径 |
--categoryNetwork |
布尔 | 启用网络工具（默认 true） |
--categoryPerformance |
布尔 | 启用性能工具（默认 true） |
--categoryEmulation |
布尔 | 启用模拟工具（默认 true） |
常见问题排查
Q1：MCP 启动后报 ENOTEMPTY npm 缓存错误
现象：
npm error ENOTEMPTY: directory not empty, rmdir '...node_modules/bare-url/prebuilds'
解决：
# 清理 npx 缓存
rm -rf ~/.npm/_npx/
# 然后在 CodeBuddy 中重新启动 MCP
Q2：autoConnect 模式下 MCP 连接失败
排查步骤：
- 确认 Chrome 版本 ≥ 144（地址栏输入
chrome://version） - 确认已在
chrome://inspect/#remote-debugging开启远程调试 - 确认页面显示
Server running at: 127.0.0.1:xxxx - 在 CodeBuddy MCP 面板中重启
chrome-devtools服务器 - 检查 Chrome 是否弹出授权对话框，需要点击 "Allow"
Q3：传统端口模式下 /json/list 返回 404
原因：Chrome 144+ 的 chrome://inspect 远程调试不再支持传统的 HTTP 端点。
解决：
- Chrome 144+：使用
--autoConnect - Chrome 143-：使用
--remote-debugging-port=9222命令行参数启动 Chrome
Q4：WebSocket 连接返回 403
原因：Chrome 新版远程调试需要授权 token，不能直接用 WebSocket 连接。
解决：使用 --autoConnect 参数，MCP 会自动处理授权流程。
Q5：MCP 服务器状态一直是红色
排查：
- 确认 Node.js 已安装且版本 ≥ 18
- 终端运行
npx chrome-devtools-mcp@latest --help检查是否能正常下载 - 检查网络/代理设置是否阻止了 npm 下载
- 尝试清理 npm 缓存：
npm cache clean --force
Q6：想复用登录态但每次都是新浏览器
确认你使用的是连接模式而非启动模式：
- ✅
--autoConnect— 连接到已有 Chrome - ✅
--browserUrl— 连接到已有 Chrome - ❌ 无连接参数 — 会启动新 Chrome 实例
- ❌
--headless— 无头模式，不复用已有浏览器 - ❌
--isolated— 临时环境，不复用数据
推荐配置
日常开发（复用浏览器，推荐）
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect"],
"disabled": false
}
}
}
CI/自动化测试（无头模式）
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless",
"--isolated",
"--no-usage-statistics"
],
"disabled": false
}
}
}
精简模式（减少 Token 消耗）
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect", "--slim"],
"disabled": false
}
}
}
参考链接
踩坑之路多回顾，不要在一个坑掉两次！
THINK TWICE,CODE ONCE!
浙公网安备 33010602011771号