🔧 Chrome DevTools MCP：38.6k Stars，给你的 AI Agent 装个 Chrome 开发者工具
项目地址：ChromeDevTools/chrome-devtools-mcp | ⭐ 38,600 Stars | 🛠 TypeScript | 作者：Chrome DevTools 团队
老实说，AI 编程助手写代码还行，但让它调试前端页面、分析性能、查网络请求——基本靠蒙。
Chrome DevTools MCP 就是来解决这个问题的。它是 Google Chrome 团队官方出的 MCP 服务器，让你的 AI Agent（Claude Code、Gemini、Cursor、Copilot）直接控制 Chrome 浏览器，像人一样用 DevTools。
38.6k Stars、2.4k Forks、829 次提交，Chrome DevTools 团队亲儿子项目。
一、它能干什么
一句话：你的 AI Agent 现在可以像前端工程师一样用 Chrome DevTools 了。
具体能力：
| 能力 | 说明 |
|------|------|
| 性能分析 | 录制 Performance Trace，自动分析性能瓶颈 |
| 网络调试 | 查看网络请求、响应头、加载时间 |
| 截图 + 控制台 | 页面截图 + 查看 Console 日志（带 source map 堆栈）|
| 自动化操作 | 基于 Puppeteer 的页面交互，自动等待操作结果 |
| 多 Tab 管理 | 打开、切换、关闭标签页 |
核心驱动是 Puppeteer + Chrome DevTools Protocol，底层是 Chrome DevTools Frontend 的 trace 引擎。
二、安装配置
前提条件
# Node.js v20.19+ (LTS)
node -v
# Chrome 最新稳定版
google-chrome --version
通用 MCP 配置
所有 MCP 客户端（Claude Code、Cursor、Copilot 等）共用一套配置：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
参数说明：
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| --headless | boolean | false | 无头模式 |
| --channel | string | stable | Chrome 渠道（stable/canary/dev/beta） |
| --isolated | boolean | false | 隔离模式（每次用临时用户目录） |
| --slim | boolean | false | 精简模式（只暴露 3 个工具） |
| --autoConnect | boolean | false | 自动连接已有 Chrome 实例（需 Chrome 144+） |
| --no-usage-statistics | boolean | false | 关闭使用统计上报 |
| --browser-url | string | - | 连接已有 Chrome 实例的 WebSocket URL |
各客户端配置
Claude Code（MCP 模式）：
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Claude Code（Plugin 模式，含 Skills）：
# 在 Claude Code 中执行
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
# 重启后检查
/skills
Google Gemini CLI：
# 在 gemini-cli 配置中添加
# 支持 --autoConnect 连接正在运行的 Chrome
VS Code / GitHub Copilot（推荐 Plugin）：
# Command Palette → Chat: Install Plugin From Source
# 粘贴：https://github.com/ChromeDevTools/chrome-devtools-mcp
Cursor：
Cursor Settings → MCP → New MCP Server
command: npx
args: -y chrome-devtools-mcp@latest
Codex CLI：
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Factory CLI：
factory mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Amp：
amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
三、玩法示例
性能分析
配置好后，直接让你的 AI Agent 跑：
帮我分析一下 https://example.com 的页面性能
MCP 服务器会：
2. 加载页面
3. 录制 Performance Trace
4. 分析性能瓶颈
5. 返回优化建议
调试网络请求
打开 https://myapp.com，看看登录接口发了什么请求
AI Agent 会用 DevTools 抓取 Network 请求，分析请求头、响应体和状态码。
截图检查
打开我的网站，截个首页图给我看
Slim 模式
如果只需要基本操作（导航、执行脚本、截图），用 --slim 减少工具数量：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}
四、连接已有 Chrome 实例
默认情况下，MCP 服务器会启动一个新的 Chrome 实例。但如果你希望：
可以用 --autoConnect（Chrome 144+）：
Step 1: 在 Chrome 中打开 chrome://inspect/#remote-debugging，开启远程调试。
Step 2: 配置 MCP 使用 --autoConnect：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest", "--autoConnect"]
}
}
}
Step 3: Chrome 会弹框询问是否允许连接，点击 Allow。
或者用 --browser-url 手动连接指定端口：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browser-url=http://127.0.0.1:9222"
]
}
}
}
获取 WebSocket 地址：
curl http://127.0.0.1:9222/json/version | jq .webSocketDebuggerUrl
五、注意事项
2. 仅支持 Chrome：官方只支持 Google Chrome 和 Chrome for Testing，其他 Chromium 浏览器不保证
3. 数据收集：默认会上报使用统计（工具调用成功率、延迟等），用 --no-usage-statistics 关闭
4. 用户数据目录：默认在 ~/.cache/chrome-devtools-mcp/，跨会话共享。用 --isolated 使用临时目录
5. 网络头脱敏：用 --redactNetworkHeaders 隐藏敏感请求头
6. CrUX 数据：性能分析可能会发 trace URL 到 Google CrUX API 获取真实用户数据，用 --no-performance-crux 关闭
六、应用场景
七、总结
如果你的 AI Agent 只会写代码不会调试，装上这个，它就能像前端工程师一样看 DevTools 了。
标签：#Chrome #DevTools #MCP #AI #调试 #前端