chrome-devtools-mcp — AI 浏览器调试与自动化 MCP 工具

chrome-devtools-mcp 是 Google Chrome DevTools 团队官方出品的 MCP 服务器，通过 Model Context Protocol 让 AI 编码助手获得完整的 Chrome DevTools 能力。它使用 Puppeteer 实现可靠的浏览器自动化，内置等待机制确保操作结果正确。支持 Claude Code、Cursor、VS Code Copilot、Codex 等主流 AI 工具，是 AI 驱动前端调试和 Web 自动化的首选方案。

核心使用场景

• 前端 Bug 调试：AI 直接打开页面、查看控制台报错（含源码映射的堆栈追踪）、检查网络请求
• 性能分析：录制页面性能 Trace、提取可操作的优化建议，结合真实用户数据（CrUX）
• 截图与视觉验证：AI 截图当前页面状态，辅助 UI 回归测试和 Bug 复现
• Web 自动化测试：AI 填写表单、点击按钮、导航页面，可靠等待操作完成
• 接入已有 Chrome 实例：连接 DevTools 远程调试端口，调试任意 Chrome 标签页

AI 辅助使用流程

1. 安装配置 — AI 在 Claude Code 中执行一行命令完成 MCP 服务器安装
2. 连接浏览器 — 服务器自动启动 Chrome，或连接指定的 DevTools 远程端口
3. 导航目标页面 — AI 通过 MCP 工具导航到待调试的 URL
4. 执行调试操作 — AI 截图、检查控制台、分析网络请求、录制性能 Trace
5. 自动化交互 — AI 自动化点击/填写/滚动等用户操作