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 可直接调试、性能分析和自动化测试的"外部工具"。

核心能力

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

典型场景

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

快速上手（3 步）

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

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

perl 复制代码

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

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

高阶参数

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

安全注意

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

一句话总结

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