Chrome DevTools MCP × Claude Code 完整配置指南#

方案 A：启动全新浏览器（默认，最简单）#

每次 AI 需要浏览器时，自动启动一个全新的 Chrome 实例。 不能访问你当前的登录状态。

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

方案 B：复用当前浏览器 Session —— —autoConnect （推荐，需 Chrome 144+）#

直接连接你正在使用的 Chrome ，保留所有 Cookie、登录状态、当前打开的页面。

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

如果你的 Chrome 版本是 Beta/Canary（144 尚未正式发布时）：

1
{
2
 "mcpServers": {
3
 "chrome-devtools": {
4
 "command": "npx",
5
 "args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect", "--channel=beta"]
6
 }
7
 }
8
}

方案 C：复用当前浏览器 Session —— —browser-url （任意 Chrome 版本）#

适用于已手动启动带调试端口的 Chrome。

1
{
2
 "mcpServers": {
3
 "chrome-devtools": {
4
 "command": "npx",
5
 "args": [
6
 "-y",
7
 "chrome-devtools-mcp@latest",
8
 "--browser-url=http://127.0.0.1:9222"
9
 ]
10
 }
11
 }
12
}

方案 D：通过 WebSocket 直连#

适合需要鉴权头或精确控制 Tab 的场景。

1
{
2
 "mcpServers": {
3
 "chrome-devtools": {
4
 "command": "npx",
5
 "args": [
6
 "-y",
7
 "chrome-devtools-mcp@latest",
8
 "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/ ",
9
 "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
10
 ]
11
 }
12
 }
13
}

通过访问 http://127.0.0.1:9222/json/version 获取 webSocketDebuggerUrl 字段。

方式一： —autoConnect （Chrome 144+，最简单推荐）#

第 1 步：确认 Chrome 版本 ≥ 144

打开 chrome://settings/help 查看版本号。

第 2 步：在 Chrome 中开启远程调试权限

• 打开 chrome://inspect/#remote-debugging

• 页面会出现「启用远程调试」的选项，点击允许

第 3 步：配置 Claude Code MCP

编辑（或创建） ~/.claude.json ，在 mcpServers 中加入：

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

或直接运行命令：

1
claude mcp add --transport stdio chrome-devtools -- \
2
 npx -y chrome-devtools-mcp@latest --autoConnect

第 4 步：重启 Claude Code

1
# 重新打开 Claude Code 会话，让 MCP Server 重新加载

第 5 步：首次连接时在 Chrome 中确认授权

当 Claude 第一次调用浏览器工具时：

• Chrome 会弹出 用户确认对话框 → 点击「允许」

• Chrome 顶部会出现横幅： “Chrome is being controlled by automated test software”

• ✅ 连接成功，AI 现在可以访问你当前所有打开的标签页

方式二： —remote-debugging-port （任意 Chrome 版本）#

⚠️ Chrome 136+ 限制 ： —remote-debugging-port 不能使用 Chrome 默认 Profile， 必须通过 —user-data-dir 指定独立目录。

第 1 步：用调试端口启动 Chrome

关闭已有的 Chrome 进程 ，然后用以下命令启动：

1
# macOS
2
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
3
 --remote-debugging-port=9222 \
4
 --user-data-dir="$HOME/.chrome-debug-profile"
5

6
# Linux
7
google-chrome \
8
 --remote-debugging-port=9222 \
9
 --user-data-dir=/tmp/chrome-debug-profile
10

11
# Windows
12
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
13
 --remote-debugging-port=9222 ^
14
 --user-data-dir="%TEMP%\chrome-debug-profile"

💡 —user-data-dir 目录会被 Chrome 自动创建，你也可以指向你的现有 Profile 目录（如 ~/Library/Application Support/Google/Chrome/Default ），但 不推荐 （有数据安全风险）。

第 2 步：验证调试端口已生效

1
curl http://127.0.0.1:9222/json/version

正常返回类似：

1
{
2
 "Browser": "Chrome/146.0.7680.154",
3
 "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/browser/abc-123-..."
4
}

第 3 步：配置 Claude Code MCP

1
{
2
 "mcpServers": {
3
 "chrome-devtools": {
4
 "command": "npx",
5
 "args": [
6
 "-y",
7
 "chrome-devtools-mcp@latest",
8
 "--browser-url=http://127.0.0.1:9222"
9
 ]
10
 }
11
 }
12
}

第 4 步：重启 Claude Code，即可使用

连接参数#

参数 类型 说明

—autoConnect boolean 连接当前运行的 Chrome（需 144+），触发用户授权弹窗

—browser-url string 指定 Chrome 调试 HTTP 端点，如 http://127.0.0.1:9222

—wsEndpoint string 直接指定 WebSocket 端点

—wsHeaders string WebSocket 连接的自定义 HTTP 头（JSON 字符串）

内部逻辑 ：只要提供了 —browser-url 、 —wsEndpoint 或 —autoConnect 任一参数，就会连接已有浏览器；否则自动启动新浏览器。

新浏览器启动参数#

参数 默认值 说明

—headless false 无头模式（无 UI）

—channel stable Chrome 渠道： stable / beta / canary / dev

—isolated false 使用临时 Profile（退出后自动删除）

—user-data-dir ~/.cache/chrome-devtools-mcp/… 自定义 Profile 目录

—viewport — 视窗尺寸，如 1280x720

—executablePath 自动检测 指定 Chrome 可执行文件路径

—acceptInsecureCerts false 忽略 SSL 证书错误

—chromeArg — 传递额外的 Chrome 启动参数

功能开关参数#

参数 默认值 说明

—slim false 精简模式：仅保留 3 个工具（navigate、evaluate_script、screenshot）

—headless false 无头运行

—categoryPerformance true 启用性能分析工具

—categoryNetwork true 启用网络请求工具

—categoryEmulation true 启用设备模拟工具

—usageStatistics true 是否发送遥测数据到 Google（设为 false 可关闭）

Q1： —autoConnect 连接后 Chrome 报错「无法连接」？#

原因 ：Chrome 版本低于 144。

解决 ：升级 Chrome 到 144+，或改用 —browser-url 方式（方案 C）。

Q2： —remote-debugging-port 启动失败，提示「不能使用默认 Profile」？#

原因 ：Chrome 136+ 的安全限制，不允许对默认 Profile 开启远程调试。

解决 ：必须加 —user-data-dir 参数指定独立目录：

1
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
2
 --remote-debugging-port=9222 \
3
 --user-data-dir="$HOME/.chrome-debug-profile"

Q3：如何确认 MCP Server 已成功加载？#

1
# 查看已注册的 MCP Server
2
claude mcp list

Q4：连接已有 Chrome 后，AI 能看到哪些 Tab？#

所有已打开的标签页都能被列出和访问。使用 list_pages 工具可以查看，再用 select_page 切换。

Q5：已有 Chrome 的 Session（Cookie/登录态）会泄露给 AI 吗？#

AI 可以读取当前页面内容、执行 JS（包括读取 Cookie），所以 会有访问权限 。每次 —autoConnect 连接时 Chrome 都会弹出用户确认对话框，这是安全防护机制。建议只在可信的开发环境中使用。

Q6：关闭 Google 数据遥测？#

1
"args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect", "--usageStatistics=false"]

或设置环境变量：

1
export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1

公告#

博客园 © 2004-2026

浙公网安备 33010602011771号 浙ICP备2021040463号-3