Chrome DevTools MCP
Google 官方 MCP server, 让 AI agent 经 CDP 驱动 Chrome 调试与性能分析。
访问 Chrome DevTools MCP 官网 →关于 Chrome DevTools MCP
Chrome DevTools MCP 是 Google Chrome 团队官方开源的 MCP server, 2025 年 9 月公开预览, 通过 Chrome DevTools Protocol 把真实浏览器的调试能力暴露给 AI agent。它让 Claude Code、Cursor、Gemini CLI 等编码 agent 能直接看到渲染结果、控制台报错、网络请求与内存堆快照, 从只能盲写代码升级为可观测的调试闭环。底层借 Puppeteer 做可靠自动化, 以 Apache-2.0 许可发布在 npm 上。
与 Playwright MCP 主打跨浏览器端到端测试不同, 它定位在调试感知加基础交互: 只在 Chrome 上运行, 弱化测试隔离, 但独有性能 trace、Core Web Vitals 与 Lighthouse 审计能力。它更适合前端排障与性能优化, 而非 CI 中要求强隔离与多浏览器覆盖的自动化测试; 不少团队两者并用, 按任务类型切换。
技能规格
| 厂商 | |
|---|---|
| 平台 | MCP |
| 能力维度 | 浏览器自动化 |
| 是否官方 | 官方出品 |
| 中文支持 | 不支持 |
| 上线时间 | 2025-09 |
| 最近核实 | 2026-09 |
| 费用说明 | 开源免费 (Apache-2.0), npm 包直接运行, 无使用费用。 |
怎么安装
在 MCP 客户端配置 command=npx, args=["-y", "chrome-devtools-mcp@latest"]; 命令行示例 claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest。需 Node.js LTS 与稳定版 Chrome。常见参数: --headless 无头运行, --isolated 用临时 profile, --browser-url=http://127.0.0.1:9222 连接已开的 Chrome 实例。适用场景
- 前端排障: 让 agent 打开有问题的页面, 读取控制台报错与网络请求, 定位白屏、接口报错或样式错乱的真实原因
- 性能优化: 录制页面加载 trace, 分析 LCP、INP、CLS 等 Core Web Vitals 指标, 给出优化建议并复测
- 可视化与无障碍审计: 截图加无障碍树快照让 agent 看懂页面结构, 并用 Lighthouse 检查 SEO、可访问性与最佳实践
相关链接
同维度的其他技能
以下是「浏览器自动化」维度下的其他技能,可作备选。 想一次看完,见 浏览器自动化类 Agent Skills。