你是否想过，让 Gemini、Claude 或 Cursor 这样的 AI 编程助手，不只是“写代码”，还能真正“打开浏览器、查看网络请求、截图报错、分析性能瓶颈”？Chrome DevTools MCP 正是为此而生——它不是给程序员用的调试工具，而是给 AI 编码智能体（coding agents）量身定制的「浏览器感知接口」。它把 Chrome DevTools 的全部能力封装成标准化协议，让 AI 能像人类开发者一样可靠地观察、操作和理解真实网页运行状态，彻底告别“黑盒式”网页自动化。
核心功能
- 实时性能诊断：自动录制 Chrome 性能轨迹（Performance Trace），精准提取首屏时间、长任务、内存泄漏等关键指标，并生成 AI 可读的优化建议
- 全链路网络洞察：完整捕获所有 HTTP 请求/响应头、状态码、资源大小与加载时序，支持按域名、类型或耗时筛选，助 AI 快速定位 API 异常
- 带源码映射的错误分析：实时抓取浏览器控制台日志，自动解析 sourcemap，将压缩后的错误堆栈还原为原始 TypeScript/JS 行号，让 AI 真正“看懂”报错根源
- 高可靠性页面操作：基于 Puppeteer 深度集成，支持点击、输入、等待元素出现/消失等动作，并内置智能重试与 DOM 稳定性检测，避免传统自动化中的“竞态失败”
- 所见即所得视觉反馈：一键截取全屏或指定区域截图，支持返回 Base64 或保存至本地，让 AI “亲眼确认”UI 渲染结果是否符合预期
- 灵活接入方式：既可作为标准 Model-Context-Protocol（MCP）服务端对接各类 AI 工具链，也提供开箱即用的命令行工具（CLI），无需改造现有架构即可快速验证
适合哪些人用
如果你正在构建或使用以下类型的系统，ChromeDevTools MCP 将成为关键基础设施：AI 编程助手开发者（如自研 Copilot 类产品）、智能测试平台工程师（需让 AI 自动发现前端 Bug）、低代码/无代码平台团队（赋予可视化编排引擎真实浏览器执行能力）、前端性能优化 SaaS 服务商（为客户提供自动化诊断报告）。它不面向终端开发者日常调试，而是为“让 AI 具备前端工程能力”这一前沿场景提供底层支撑。
快速上手
安装极其简单：只需一条命令即可启动 MCP 服务（需已安装 Node.js 18+）：
npm install -g chrome-devtools-mcp
npx chrome-devtools-mcp serve --port 3000
启动后，你的 AI 助手即可通过标准 MCP 协议连接 http://localhost:3000；若想手动验证，也可直接使用 CLI 执行单次任务，例如：
npx chrome-devtools-mcp screenshot https://example.com --output example.png
详细参数与工具链集成示例（如与 LangChain、LlamaIndex 对接）请参考项目 工具参考文档。
项目信息
Chrome DevTools for coding agents
39.0k
今日 +107 stars today
Stars
2.5k
Forks
TypeScript
Apache-2.0
编程语言：TypeScript｜GitHub Star 数：38950｜开源协议：Apache-2.0｜GitHub 项目地址
这是由 Chrome DevTools 官方团队主导开发的前沿项目，代表了浏览器调试能力向 AI 原生化演进的重要里程碑——它不只是一套工具，更是人机协同开发范式升级的基础设施。
如果你希望 AI 编程助手不再“纸上谈兵”，而是真正具备前端工程师的浏览器洞察力与执行力，ChromeDevTools MCP 就是当前最成熟、最权威的选择。
