它是什么
chrome-devtools-mcp 由 Chrome DevTools 官方团队开源，是一个 Model-Context-Protocol（MCP）服务器，同时附带一套 CLI。它的作用很直接：把你本机正在跑的 Chrome 浏览器"接"给 AI 编程助手。只要客户端支持 MCP（Claude、Cursor、Copilot、Antigravity 等），在配置里加一段 JSON，模型就能自己打开页面、点击按钮、读取控制台报错、查看网络请求、录制性能 trace，而不再靠你复制粘贴日志。
核心功能
- 真实浏览器操控：底层用 Puppeteer 驱动 Chrome，点击、输入、跳转后会等待操作真正完成，减少"页面还没加载完就断言"的时序问题。
- 性能洞察：调用 DevTools 录制 trace，从加载、渲染、长任务中提取可执行的优化结论；还可选地结合 CrUX 真实用户数据，与实验室数据互相印证。
- 深度调试：查看网络请求细节、截取页面截图、读取控制台消息，并给出经过 source map 还原的调用栈，定位到具体源码行。
- 两种接入形态：既能作为 MCP server 挂在 AI 客户端里，也能当命令行工具用，方便写脚本或接入 CI。
- 隐私开关齐全：提供参数关闭 CrUX 数据查询、使用统计上报和版本更新检查。
适用场景
- 前端排障：与其贴一大段报错，不如让助手自己复现——打开页面、看 console、顺着 source map 找到出错文件。
- 性能调优：让模型跑一遍关键用户路径，导出 trace 分析阻塞渲染的长任务和过大的资源。
- 页面自动化：用自然语言描述"登录→搜索→下单"的流程，由助手转成稳定的浏览器操作步骤。
- UI 细节核对：让助手截图确认某个状态下的样式、文案与布局。
上手建议
- 环境准备：Node.js 用 LTS 版本，Chrome 保持当前稳定版或更新。
- 在 MCP 客户端里用
npx -y chrome-devtools-mcp@latest启动即可，写@latest能始终用最新版。 - 务必用独立的测试用浏览器配置目录：这个工具会把浏览器内容暴露给 MCP 客户端，日常登录态、Cookie 等敏感数据不建议共享。
- 在意隐私时加上
--no-usage-statistics与--no-performance-crux，统计默认是开启的，需要手动关闭。 - 兼容性上官方只保证 Google Chrome 与 Chrome for Testing，其他 Chromium 内核浏览器可能有意料之外的表现。
- 提示词里把步骤写清楚（先打开、再等待、最后断言），配合它自带的等待机制，成功率会明显更高。
