Chrome DevTools MCP是 Google 在 -- 发布的“Model‑Context‑Protocol”服务器。它把完整的 Chrome DevTools 能力暴露给 AI 编程助手，让大模型可以真正「看见」并操控浏览器，从而解决过去“盲写代码、无法验证”的痛点。

一句话定位

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

主要能力

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

典型场景 & 使用者痛点对接

• AI 生成前端代码后自动打开页面验证渲染、样式与控制台错误——解决“代码生成后手动检查太费时”的问题。
• 对慢页面自动跑性能追踪，给出瓶颈函数与资源加载顺序建议——缓解“性能瓶颈不易定位”的困扰。
• 至于端到端测试。让 AI 自己点按钮、填表单、断言结果，失败即截图+日志——避免“手写脚本繁琐且易出错”。
• 至于网络调试，一键抓取 / 请求。分析 CORS、延迟、响应体——帮助开发者快速定位“网络异常难以复现”。

快速上手

1. 环境准备：Node.js ≥14、最新 Chrome 浏览器、npm。

2. MCP 客户端配置：

   
   {
   "mcpServers": {
   "chrome-devtools": {
   "command": "npx"。"args":
   }
   }
   }
   

3. 对 AI 发指令：

   至于示例，“Check performance of example.com”。浏览器会自动启动 → 录制追踪 → 返回分析报告。

高阶参数

• --headless: 无头运行，适合 CI/CD 环境。
• --isolated: 每次使用干净使用者目录，防止缓存干扰。
• --channel=canary: 指定 Canary 版 Chrome，以获取最新实验特性。
• --executablePath : 自定义 Chrome 可执行文件方法。怎么说呢，
• --browserUrl : 连到已手动打开的调试端口。实现 “随时接管”，

安全注意事项

MCP 客户端拥有对浏览器及页面数据的完全访问权，请勿在包含敏感信息或登录状态的页面上使用；其实，生产环境建议配合隔离容器或专用账号，以减少风险。

一句话

Chrome DevTools MCP = “给 AI 戴上浏览器眼镜”。从此代码生成‑验证‑调试‑性能调整全流程可由 AI 自主闭环完成，彻底摆脱传统开发中“手动检查”“盲测”“重复脚本编写”的痛点。