Chrome DevTools MCP

Chrome DevTools MCP （developer.chrome.com/blog/chrome… Google 在 2025-09-23 发布的“Model-Context-Protocol”服务器，它把完整的 Chrome DevTools 能力暴露给 AI 编程助手（Gemini、Claude、Cursor、Copilot 等），让大模型可以真正「看见」并操控浏览器，从而解决过去“盲写代码、无法验证”的痛点。

一句话定位

把 Chrome 浏览器变成 AI 可直接调试、性能分析和自动化测试的“外部工具”。

核心能力

1. 性能洞察performance_start_trace 一键录制性能轨迹，返回可操作的优化建议。
2. 深度调试抓取网络请求、控制台日志、截图、DOM 快照，甚至执行任意 JS。
3. 可靠自动化基于 Puppeteer，封装了 18+ 个原子工具：点击、填表、上传、拖拽、等待、模拟弱网/慢 CPU 等。
4. 标准化协议遵循 MCP（Model Context Protocol），任何兼容 MCP 的客户端（Claude Desktop、Cursor、Copilot Chat…）都能“零代码”调用。

典型场景

• AI 生成前端代码后，自动打开页面验证渲染、样式与控制台错误；
• 对慢页面自动跑性能追踪，给出瓶颈函数与资源加载顺序建议；
• 端到端测试：让 AI 自己点按钮、填表单、断言结果，失败即截图+日志；
• 网络调试：一键抓取 404/500 请求，分析 CORS、延迟、响应体。

快速上手（3 步）

1. 环境：Node.js ≥22、最新 Chrome、npm。

2. 在 MCP 客户端配置里加一段 JSON：

   1. {
        "mcpServers": {
          "chrome-devtools": {
            "command": "npx",
            "args": ["chrome-devtools-mcp@latest"]
          }
        }
      }
      

3. 对 AI 说：“Check the performance of example.com”——浏览器自动启动、录追踪、返回分析报告。

高阶参数

• --headless 无头运行
• --isolated 每次干净用户目录
• --channel=canary 指定 Canary 版 Chrome
• --executablePath 自定义 Chrome 路径
• --browserUrl 连接已手动打开的调试端口

安全注意

MCP 客户端拥有对浏览器及页面数据的完全访问权，切勿在含敏感信息的页面使用。

一句话总结

Chrome DevTools MCP = “给 AI 戴上浏览器眼镜”，从此代码生成-验证-调试-性能优化全流程可由 AI 自主闭环完成。