Chrome Devtools MCP:用于Web开发的AI驱动浏览器控制
Chrome Devtools MCP 是 Benjaminr 开发的服务器工具,使用 Node.js 构建,并作为 npm 包分发。它使 AI 代理和大型语言模型能够与实时 Chrome 浏览器实例进行交互。通过连接到 Chrome 的 DevTools 自动化功能,它为 web 应用程序分析和控制提供了强大的接口。可以通过 npx 或作为 .dxt 扩展提供给像 Claude Desktop 这样的客户端,它扩展了浏览器交互,超越了传统脚本。该工具旨在将先进的浏览器调试和自动化直接带入 AI 工作流程。
最受推荐的替代方案
Chrome Devtools MCP 连接到什么?
Chrome Devtools MCP 工具作为模型上下文协议服务器。它与正在运行的 Chrome 浏览器实例建立连接。此连接使其能够利用 Chrome 的 DevTools 自动化和调试功能。它通过使用 Chrome DevTools 协议 (CDP) 和 Puppeteer 来实现。这种设置使 AI 代理能够访问和控制浏览器功能,使浏览器成为各种任务的可编程环境。服务器充当中介,将 AI 代理请求转换为浏览器操作和数据检索。
核心功能和工具
Chrome Devtools MCP 向 AI 代理公开许多 DevTools 功能,提供超过 26 种工具。这些工具涵盖输入自动化、导航、调试、网络、性能和仿真等类别。具体可调用的工具包括:navigate_page、performance_start_trace、performance_stop_trace、performance_analyze_insight、evaluate_script、click、upload_file、take_snapshot 和 get_connection_status()。控制台和网络消息工具的命名略有不同,有些引用使用 list_console_messages 和 list_network_requests,而其他则使用 list-console_messages 和 listnetworkrequests。
适合谁?
Chrome Devtools MCP 的主要受众包括 AI 编码助手、大型语言模型和前端开发团队。它服务于那些需要自动化浏览器交互、调试 Web 应用程序或分析性能而无需直接人工干预的人。确认兼容的 AI 客户端包括 Antigravity、Claude、Gemini CLI、JetBrains AI Assistant 和 Visual Studio 等等。如果您的工作不涉及 AI 代理与 Chrome 浏览器的交互,请跳过此部分。
如何开始
Chrome Devtools MCP 不需要凭据。CLI 客户端在 Linux/Mac 上使用 Unix 套接字,在 Windows 上使用命名管道与后台守护进程进行通信。
用例
- 自动化性能分析和优化:AI 代理可以记录性能跟踪、提取指标并生成洞察,从而在 CI/CD 管道中实现自动化性能审计。
- 深入调试 Web 应用程序:AI 代理可以检查 DOM 和 CSS,分析网络请求,读取控制台输出,执行 JavaScript,并诊断 CORS 错误等问题。
- 可靠的浏览器自动化和交互:代理可以自主导航页面、点击按钮、填写表单、截屏,并模拟用户行为,而无需直接编写 Puppeteer 脚本。
Chrome Devtools MCP 提供了一个直接的桥梁,连接 AI 代理和 Chrome 的 DevTools,使得高级浏览器控制和数据提取成为可能。它的功能支持自动化的 web 应用分析、调试和交互,使其成为开发工作流程中的宝贵资产。该工具简化了 AI 系统的复杂浏览器操作,为新的自动化和测试范式打开了可能性。尝试使用 performance_start_trace 和 performance_analyze_insight 自动化性能跟踪和洞察生成。