集成Chrome DevTools MCP

Chrome DevTools MCP

Chrome DevTools MCP 是一个 Model-Context-Protocol (MCP) 服务器,它允许 Gemini、Claude、Cursor 或 Copilot 等 AI 编码助手控制和检查实时运行的 Chrome 浏览器,从而实现可靠的自动化、高级调试和性能分析。

核心特性

  • 获取性能洞察:使用 Chrome DevTools 记录追踪数据并提取可操作的性能洞察。
  • 高级浏览器调试:分析网络请求、截取屏幕截图并检查浏览器控制台。
  • 可靠的自动化。使用 puppeteer 在 Chrome 中自动执行操作,并自动等待操作结果。
MCP 类型技术栈优势主要生态系统最适合
Chrome DevTools MCPNode.js / Puppeteer官方标准,稳健可靠,具备深度性能分析工具。广泛(Gemini、Copilot、Cursor)CI/CD 自动化、跨 IDE 工作流以及深入的性能审计。
Playwright MCPNode.js / Playwright使用无障碍树而非像素;确定性强且对 LLM 友好,无需视觉能力。广泛(VS Code、Copilot)可靠、结构化的自动化,不易因微小的 UI 变化而中断。
Scrapeless MCP云服务无需本地设置,可扩展的云浏览器,可处理复杂站点和反爬虫措施。API 驱动(任意客户端)大规模并行自动化任务,以及与具有强大机器人检测能力的网站交互。

环境要求

快速开始

获取你的 Scrapeless API Key

登录 Scrapeless 并获取你的 API Key。

get-api-key.png

快速上手

此 JSON 配置由 MCP 客户端用于连接 Chrome DevTools MCP 服务器并控制远程的 Scrapeless 云浏览器实例。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoin=wss://browser.scrapeless.com/api/v2/browser?token=scrapeless api key&proxyCountry=US&sessionRecording=true&sessionTTL=900&sessionName=CDPDemo"
      ]
    }
  }
}
 

案例展示

chrome-devtools-mcp.gif

一个云浏览器,无限集成

Chrome DevTools MCP、Playwright MCP 和 Scrapeless Browser MCP —— 共享同一个基础:它们都连接到 Scrapeless Cloud Browser。

与传统的本地浏览器自动化不同,Scrapeless Browser 完全运行在****云端,为开发者和 AI 智能体提供无与伦比的灵活性和可扩展性。

以下是它真正强大之处:

  • 无缝集成: 完全兼容 Puppeteer、Playwright 和 CDP,只需一行代码即可从现有项目轻松迁移。
  • 全球 IP 覆盖: 可访问覆盖 195+ 个国家/地区的住宅、ISP 和无限 IP 池,价格透明且经济实惠($0.6–1.8/GB)。非常适合大规模网络数据自动化。
  • 隔离的配置文件: 每个任务在专用的持久化环境中运行,确保会话隔离、多账号管理和长期稳定性。
  • 无限并发扩展: 借助自动扩缩容基础设施,可即时启动 50–1000+ 个浏览器实例 —— 无需搭建服务器,没有性能瓶颈。
  • 全球边缘节点: 部署在多个全球节点上,实现超低延迟,启动速度比其他云浏览器快 2–3 倍。
  • 反检测: 内置针对 reCAPTCHA、Cloudflare Turnstile 和 AWS WAF 的解决方案,即使在严格的防护层下也能确保自动化不中断。
  • 可视化调试: 通过 Live View 实现人机交互式调试和实时代理流量监控。通过 Session Recordings 逐页回放会话,快速定位问题并优化操作。

使用场景

  • 网页性能分析:使用 CDP 记录追踪数据,并提取有关页面加载、网络请求和 JavaScript 执行的可操作洞察,使 AI 助手能够提出性能优化建议。
  • 自动化调试:捕获控制台日志、检查网络流量、截取屏幕截图,并自动复现 bug,从而更快地排查问题。
  • 端到端测试:使用 Puppeteer 自动化复杂工作流,验证页面交互,并检查 Chrome 中的动态内容渲染。
  • AI 辅助自动化:Gemini 或 Copilot 等 LLM 能够可靠、精确地填写表单、点击按钮或从 Chrome 页面抓取结构化数据。