乱世浮生 ·

Chrome DevTools MCP：让 AI agent 真正接管浏览器调试

💡 原文中文，约5300字，阅读约需13分钟。

📝

内容提要

chrome-devtools-mcp 是 Google 提供的工具，允许 AI agent 通过 Chrome DevTools 访问浏览器状态，支持截图、Console 监控和网络请求等功能，适合性能分析和错误排查。与 Puppeteer 和 Playwright 不同，它专注于调试而非自动化操作。

🔎

延伸解读

调试与自动化的区别

chrome-devtools-mcp 与 Puppeteer 和 Playwright 的主要区别在于其专注于调试而非自动化操作。虽然三者都能控制浏览器，但 chrome-devtools-mcp 更加注重性能分析和错误排查，适合开发者在调试过程中使用。了解这一点有助于开发者选择合适的工具来满足不同的需求。

安全性考虑

使用 chrome-devtools-mcp 时，开启调试端口可能带来安全风险。任何能够访问该端口的进程都可以控制 Chrome 实例，因此建议在非敏感环境中使用，并避免在登录了重要账户的浏览器上开启调试。确保调试端口不暴露到公网是保护数据安全的重要措施。

功能与局限性

虽然 chrome-devtools-mcp 提供了丰富的调试功能，如截图、Console 监控和性能分析，但它仍然存在局限性。例如，它不支持跨浏览器操作，也无法处理复杂的自动化流程。开发者在使用时需明确这些限制，以便合理规划调试策略。

❓

Q&A

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 时需要注意哪些安全问题？

开启调试端口后，需谨慎使用，避免在敏感账号上使用，并确保调试端口不暴露到公网。

🏷️