💡
原文中文，约5300字，阅读约需13分钟。
📝
内容提要
chrome-devtools-mcp 是 Google 提供的工具，允许 AI agent 通过 Chrome DevTools 访问浏览器状态，支持截图、Console 监控和网络请求等功能，适合性能分析和错误排查。与 Puppeteer 和 Playwright 不同，它专注于调试而非自动化操作。
🎯
关键要点
- chrome-devtools-mcp 是 Google 提供的工具，允许 AI agent 通过 Chrome DevTools 访问浏览器状态。
- 该工具支持截图、Console 监控、网络请求等功能，适合性能分析和错误排查。
- chrome-devtools-mcp 的定位是调试感知，而非自动化操控。
- AI agent 通过 MCP 提供的标准化工具调用协议接入外部能力。
- chrome-devtools-mcp 通过 Chrome DevTools Protocol (CDP) 将调试能力暴露给 AI agent。
- 核心能力包括截图、DOM 操作、Console 监控、网络请求抓取、性能分析和审计报告。
- 与 Puppeteer 和 Playwright 的区别在于，chrome-devtools-mcp 更专注于调试和感知。
- 安装和配置 chrome-devtools-mcp 需要启动 Chrome 调试模式并接入 AI 客户端。
- 常见使用场景包括性能分析、错误排查和截图与视觉回归。
- chrome-devtools-mcp 能够读取 DOM、执行 JS、抓取网络请求等，但不支持跨浏览器和复杂自动化流程。
- 安全性方面，开启调试端口后需谨慎，避免在敏感账号上使用。
- 目前 chrome-devtools-mcp 处于可用但仍在演化的阶段，核心功能稳定。
- 未来可能支持远程 Chrome 实例和更深度的性能分析能力。
❓
延伸问答
chrome-devtools-mcp 是什么？
chrome-devtools-mcp 是 Google 提供的工具，允许 AI agent 通过 Chrome DevTools 访问浏览器状态，支持截图、Console 监控和网络请求等功能。
如何安装和配置 chrome-devtools-mcp？
安装 chrome-devtools-mcp 需要启动 Chrome 调试模式并接入 AI 客户端，具体步骤包括使用调试端口启动 Chrome 和在 VS Code 或 OpenCode 中配置 MCP。
chrome-devtools-mcp 与 Puppeteer 和 Playwright 有什么区别？
chrome-devtools-mcp 专注于调试和感知，而 Puppeteer 和 Playwright 更侧重于自动化操作，三者的核心定位和使用场景不同。
chrome-devtools-mcp 的核心能力有哪些？
核心能力包括截图、DOM 操作、Console 监控、网络请求抓取、性能分析和审计报告。
使用 chrome-devtools-mcp 进行性能分析的流程是什么？
使用 chrome-devtools-mcp 进行性能分析时，AI agent 会调用性能录制工具，收集 Core Web Vitals 指标并分析性能瓶颈。
使用 chrome-devtools-mcp 时需要注意哪些安全问题？
开启调试端口后，需谨慎使用，避免在敏感账号上使用，并确保调试端口不暴露到公网。
➡️
