让 Claude Code 控制真实 Chrome 浏览器，实现自动化浏览、调试、性能分析和截图。

---

一、配置方式

1.1 注册 MCP 服务器（推荐）

不要手动编辑 .mcp.json，用命令行注册：

用户级（所有项目可用，推荐）：

claude mcp add --scope user chrome-devtools -- npx -y chrome-devtools-mcp@latest

# 带代理的完整注册（见第二章）
claude mcp add --scope user chrome-devtools -- npx -y chrome-devtools-mcp@latest --chromeArg=--proxy-pac-url=data:...Base64...

# 查看是否生效
claude mcp list

配置写入 ~\.claude.json 的 mcpServers 字段，所有新对话自动加载。不要用项目根目录的 .mcp.json——当前版本存在识别不稳定问题。

1.2 可选配置参数

参数	说明	示例
默认	自动启动 Chrome 新实例，功能完整（45+ 个工具）	["-y", "chrome-devtools-mcp@latest"]
--headless	无头模式，无浏览器窗口	["-y", "chrome-devtools-mcp@latest", "--headless"]
--slim	轻量模式，仅 3 个基础工具	["-y", "chrome-devtools-mcp@latest", "--slim"]
--autoConnect	连接本地已运行的 Chrome（Chrome 144+）	["-y", "chrome-devtools-mcp@latest", "--autoConnect"]
--browser-url	连接远程调试端口	["-y", "chrome-devtools-mcp@latest", "--browser-url", "http://127.0.0.1:9222"]
--isolated	临时用户目录，关闭自动清理	["-y", "chrome-devtools-mcp@latest", "--isolated"]
--no-usage-statistics	禁用使用数据统计	["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

---

二、代理配置

✅ 2026-06-01 验证通过：PAC Data URL 方案已成功实现国内外分流。

2.1 PAC 自动分流（推荐，已验证）

将 proxy.pac 脚本内嵌为 Base64 Data URL，通过 --chromeArg=--proxy-pac-url=data:... 传给 Chrome，实现按域名自动分流。

PAC 规则 (<工作目录>\proxy.pac)：

类别	域名示例	策略
国内站点	*.baidu.com、*.bilibili.com、*.zhihu.com、*.jd.com、*.cn 等 40 余个	DIRECT
境外站点	*.google.com、*.github.com、*.youtube.com、*.openai.com 等 30 余个	PROXY <代理服务器IP>:2020
其他	未匹配域名	DIRECT

注册命令：

# 将 proxy.pac 转为 Base64 并注册
PAC_B64=$(cat <工作目录>\proxy.pac | base64 -w0)
claude mcp remove "chrome-devtools" -s user
claude mcp add --scope user chrome-devtools -- \
  npx -y chrome-devtools-mcp@latest \
  --chromeArg="--proxy-pac-url=data:application/x-ns-proxy-autoconfig;base64,$PAC_B64"

验证结果（2026-06-01）：

站点	策略	结果
https://www.google.com	PROXY	✅ 30 秒内加载完成，无错误
https://www.baidu.com	DIRECT	✅ 15 秒内加载完成，零控制台错误
https://httpbin.org/ip	PROXY	✅ 出站 IP 为代理地址 <代理出口IP>

⚠️ 修改配置后需重启 Claude Code 才能生效。

2.2 全局代理（不推荐）

不使用 PAC 分流时，可全局走代理：

claude mcp add --scope user chrome-devtools -- \
  npx -y chrome-devtools-mcp@latest \
  --proxyServer=http://<代理服务器IP>:2020

缺点：国内站点（如百度）的部分资源也会走代理，容易出现 ERR_TIMED_OUT。

2.3 参数说明

参数	说明
--proxyServer	Chromium 全局代理，所有流量走代理
--proxy-pac-url	PAC 脚本 URL，支持 data: 协议内嵌 Base64
--chromeArg=...	传递任意 Chrome flag（PAC、沙箱、实验性功能等）
--acceptInsecureCerts	忽略 SSL 证书错误（代理拦截 HTTPS 时需要）

---

三、启动 / 关闭方法

启动

通过 claude mcp add --scope user 注册后，Claude Code 启动时自动加载 ~\.claude.json 中的 MCP 服务，无需手动启动。Chrome 浏览器会自动打开。

关闭

• 退出 Claude Code → MCP 服务自动关闭，Chrome 窗口也会关闭
• claude mcp remove "chrome-devtools" -s user → 永久移除，下次启动不再加载

---

四、测试方法

4.1 验证服务已加载

启动 Claude Code 后，检查可用工具列表中是否包含 mcp__chrome-devtools__* 开头的工具：

# 在 Claude Code 中输入以下提示验证：
检查一下 chrome-devtools MCP 是否已加载，列出可用的浏览器工具

预期看到以下类别的工具：

类别	工具示例	数量
输入自动化	click、fill、fill_form、hover、press_key、type_text、upload_file、drag	约 10 个
导航	navigate_page、new_page、list_pages、close_page、select_page、wait_for	约 6 个
仿真	emulate, resize_page	2
性能	performance_start_trace, performance_stop_trace, performance_analyze_insight	3
网络	list_network_requests, get_network_request	2
调试	evaluate_script、take_screenshot、take_snapshot、lighthouse_audit、get_console_message	约 8 个
内存	take_heapsnapshot 等堆分析工具	约 5 个
扩展	install_extension、list_extensions、reload_extension 等	约 5 个

4.2 功能测试（按顺序执行）

在 Claude Code 中依次发送以下提示：

① 导航测试

用 chrome-devtools 打开 https://httpbin.org/get，告诉我页面内容

预期：返回页面 JSON 内容

② 截图测试

给当前页面截图

预期：返回页面截图

③ 表单填写测试

打开 https://www.baidu.com，在搜索框输入"Claude Code"，然后截图

预期：百度搜索框出现"Claude Code"

④ 脚本执行测试

在当前页面执行 JavaScript 获取页面标题

预期：返回 document.title 的值

⑤ Lighthouse 审计测试

对当前页面执行 Lighthouse 审计

预期：返回 SEO、无障碍、最佳实践的评分报告

4.3 完整功能验收清单

功能	测试方式	✓
页面导航	navigate_page 访问任意 URL	☐
页面快照	take_snapshot 获取 a11y 树	☐
截图	take_screenshot 全页或元素截图	☐
点击操作	click 点击页面元素	☐
表单填写	fill / fill_form 输入表单	☐
键盘操作	press_key 发送快捷键	☐
JavaScript 执行	evaluate_script 运行 JS 代码	☐
网络抓包	list_network_requests 查看请求	☐
性能追踪	performance_start_trace 启动追踪	☐
控制台日志	list_console_messages 查看日志	☐
设备仿真	emulate 模拟移动设备	☐
多标签管理	new_page / list_pages / close_page	☐

4.4 常见问题排查

现象	解决方案
代理连不上	先用 curl -x 验证代理服务本身正常；若使用 PAC 方案，检查 Base64 编码是否完整
国内站资源超时	说明走了全局代理 → 改用 PAC 分流方案（2.1 节）
MCP 工具未出现	用 claude mcp list 确认注册状态，必要时用 claude mcp add --scope user 重新注册
Chrome 启动失败	确认已安装 Google Chrome（非 Chromium），或使用 --browser-url 连接已有实例
npx 下载慢	首次运行需下载 npm 包，等待片刻即可
工具调用无响应	检查 Chrome 窗口是否被手动关闭，重新启动 Claude Code
权限被拒绝	在 Claude Code 中批准 mcp__chrome-devtools 相关权限

---

五、常用操作示例

打开网页并截图

打开 https://github.com，给我截图

填写并提交表单

打开 https://www.baidu.com，在搜索框输入"Claude Code MCP"，点击"百度一下"

性能分析

打开 https://example.com，启动性能追踪，等待 3 秒后停止并分析性能瓶颈

网络调试

打开 https://example.com，列出所有网络请求，找出 4xx/5xx 错误的请求

多页面操作

打开新标签页导航到 https://httpbin.org/ip，再打开一个标签页到 https://httpbin.org/headers，列出所有页面的 URL

模拟移动端

用 iPhone 14 Pro 的视口打开 https://www.baidu.com，然后截图

---

最后更新：2026-06-01