Claude Code 配置 Chrome DevTools MCP 指南

本文详细介绍如何在 Windows 系统上为 Claude Code 配置 Chrome DevTools MCP，包括踩坑经验和解决方案。

一、MCP 是什么？

MCP（Model Context Protocol） 是一种模型上下文协议，它允许 AI 工具（如 Claude Code）通过标准化的方式与外部服务进行交互。简单来说，MCP 就像是 AI 与各种工具之间的"桥梁"。

Chrome DevTools MCP 介绍

Chrome DevTools MCP 是一个基于 MCP 协议的服务器，它允许 Claude Code 通过 Chrome DevTools Protocol (CDP) 直接控制浏览器，实现：

🌐 访问并分析真实页面内容：例如直接打开后台或内部系统页面，在已登录状态下查看真实用户视角下的页面表现
🔍 检查控制台错误与网络请求（Network / Console）：例如页面白屏时，快速判断是脚本报错、接口异常还是资源加载失败
🖱️ 自动化用户操作（点击、滚动、填写表单）：例如自动复现用户操作路径，用于问题复现或功能验证
📡 分析接口请求与响应数据：例如定位某个页面行为实际触发了哪些接口，以及返回数据是否正确
⚡ 页面加载与性能分析：例如分析首屏慢的原因，是接口延迟、资源体积过大，还是脚本阻塞
🧪 前端自动化测试与回归验证：例如在真实浏览器环境中快速跑一遍核心业务流程，验证改动是否影响功能

GitHub 仓库 ：github.com/ChromeDevTo...

二、Chrome 开启远程调试

找到 Chrome 快捷方式，右键 → 属性
在「目标」栏末尾添加参数：

ini 复制代码

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="D:\software\chromeDebugProfile"

Chrome快捷方式配置

参数说明：

--remote-debugging-port=9222：开启远程调试端口（9222 是约定俗成的默认端口）
--user-data-dir="D:\software\chromeDebugProfile"：指定独立的用户数据目录

为什么需要 `--user-data-dir` 参数？

⚠️ 这是本文最重要的一个坑！

从 Chrome 136 版本开始，Chrome 出于安全考虑，对远程调试做了限制：

如果使用默认的用户数据目录，--remote-debugging-port 参数会被忽略，不会真正监听端口。

这意味着：

❌ 只加 --remote-debugging-port=9222 不够
✅ 必须同时指定 --user-data-dir 为一个独立的目录

推荐做法：创建调试专用 Chrome

你可以同时拥有两个 Chrome：

日常使用的 Chrome：正常启动，保留所有登录状态
调试专用的 Chrome：带调试参数启动，用于 MCP 连接

💡 提示：第一次启动调试 Chrome 时需要重新登录账号，但之后会一直保留登录状态（因为是固定目录，不会丢失）。

验证调试端口是否开启

启动调试 Chrome 后，验证端口是否正常监听：

powershell 复制代码

# 检查端口监听状态
netstat -ano | findstr :9222

如果看到 LISTENING，说明端口已开启。

或者直接访问：

arduino 复制代码

http://127.0.0.1:9222/json/version

如果返回 JSON 数据，说明 Chrome DevTools Protocol 已就绪。

三、安装 Chrome DevTools MCP

方式一：全局安装（用户级别，推荐）

bash 复制代码

claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest

参数说明：

-s user：指定安装到用户级别配置，所有项目都可使用
--：分隔符，后面的参数传递给 MCP 服务器

配置会写入：C:\Users\<用户名>\.claude.json

方式二：项目级别安装

bash 复制代码

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

这会将配置写入用户配置文件 C:\Users\<用户名>\.claude.json 中对应项目路径下的 mcpServers 部分。

验证安装

bash 复制代码

claude mcp list

安装成功后，在 Claude Code 中输入 /mcp 可以看到 MCP 服务器状态：

四、修改配置文件

安装后，需要修改配置文件，添加 --browserUrl 参数让 MCP 连接到我们手动启动的 Chrome。

配置文件位置

C:\Users\<用户名>\.claude.json

完整配置示例

json 复制代码

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

关键参数说明：

--browserUrl=http://127.0.0.1:9222：告诉 MCP 连接到我们手动启动的 Chrome 调试端口

此时运行 /mcp

五、实战测试

配置完成后，我们来测试一下 MCP 是否正常工作。

测试示例：网站性能分析

在 Claude Code 中输入：

arduino 复制代码

帮我测试一下这个网站的性能 https://tongyi.aliyun.com/

Claude 会通过 Chrome DevTools MCP 自动：

打开目标网页
收集性能指标（加载时间、资源大小等）
分析控制台错误
给出优化建议

六、常见问题排查

问题 1：`localhost:9222` 连接被拒绝

原因：Chrome 没有真正监听 9222 端口

解决：

确保使用了 --user-data-dir 参数（Chrome 136+ 必须）
确保没有其他 Chrome 进程在后台运行（任务管理器结束所有 chrome.exe）
使用 netstat -ano | findstr :9222 检查端口是否在监听

七、总结

步骤	操作
1	创建调试专用目录（如 `D:\software\chromeDebugProfile`）
2	使用带参数的命令启动 Chrome
3	验证 `http://127.0.0.1:9222/json/version` 可访问
4	安装 MCP：`claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest`
5	修改配置文件，添加 `--browserUrl` 参数
6	重启 Claude Code，开始使用

核心要点：

Chrome 136+ 必须配合 --user-data-dir 才能开启远程调试
建议创建独立的调试 Chrome，不影响日常使用
安装时使用 -s user 可以全局生效

希望这篇文章能帮助你顺利配置 Chrome DevTools MCP！如有问题欢迎评论交流。

参考链接：

Claude Code 配置 Chrome DevTools MCP 指南