chrome-devtools-mcp

Chrome DevTools MCP 这个项目，简单说就是给你的 AI 编程助手装上了一双能直接操控 Chrome 浏览器的“手”。过去，AI 写代码只能生成文本，无法真正“看到”网页的运行情况，现在它可以直接打开浏览器、检查网络请求、截屏、读取控制台报错，甚至跑性能分析。它通过 MCP 协议作为桥梁，让用户常用的编码助手如 Antigravity、Claude、Cursor 或 Copilot 都能像使用 DevTools 一样实时调试前端应用。这解决了 AI 在 Web 开发中最大的痛点——缺乏真实环境的反馈，尤其是复杂的交互问题，过去靠猜，现在能直接看到。 技术方面，它底层依赖 Puppeteer 做自动化操作，确保每次点击或输入都能等待结果稳定后再返回。同时它调用了 Chrome DevTools 底层能力，比如录制性能追踪 trace 并提取可操作的优化建议；分析网络请求和来源映射过的堆栈跟踪，让错误定位更精准。最妙的是，它通过 MCP（模型-上下文-协议）标准接口暴露能力，这意味着不需要额外适配就能兼容多个主流 AI 编码工具，极大地降低了集成成本。官方还提供了一个 CLI 模式，即便你的助手不支持 MCP，也能通过命令行交互。 这个项目最适合前端工程师、全栈开发者以及自动化测试团队。比如你在用 Cursor 编写一个 React 组件，可以命令 AI 打开预览页面，截图并分析渲染性能，然后让它自动修复；或者配合 CI 流程，让 AI 助手在 Chromium 里跑 E2E 测试并抓取错误日志。对于需要频繁排查页面性能瓶颈的场景，比如大型 SPA 应用，它能节省大量手动点开 DevTools 的时间。 上手难度不算高，需要你有 Node.js 基础，能通过 npm 安装。官方提供了完整的工具参考文档和排错指南。唯一需要注意的是，这个工具会把浏览器里的所有内容暴露给 MCP 客户端，所以不要在涉及敏感数据的页面上使用，官方也特别提醒了这一点。另外它只正式支持 Google Chrome 和 Chrome for Testing，其他浏览器虽然可能能用但官方不保证稳定。总的来说，如果你已经在用 AI 编码助手做前端开发，这个项目能瞬间把你的助手从“纸上谈兵”升级为“实战老手”。