首页AutomationChromeDevTools/chrome-devtools-mcp
ChromeDevTools

chrome-devtools-mcp

AIMCPChrome DevToolsPuppeteerAutomationBrowser Debugging
前往 GitHub →
83

// 项目简介

Chrome DevTools for Agents 是一个 MCP server,旨在让 AI coding assistants 能够控制并检查运行中的 Chrome 浏览器实例。它提供了一套全面的工具,用于浏览器自动化、性能分析以及深度调试。该项目支持与各种 AI coding platforms 无缝集成,通过可靠的浏览器交互来增强开发者的工作流程。

// 技术分析

Chrome DevTools for Agents (chrome-devtools-mcp) 是一个 Model-Context-Protocol 服务器,旨在弥合 AI 编码助手与 Chrome 浏览器之间的差距。通过利用 Puppeteer 和 Chrome DevTools 协议,它使智能体能够直接在其工作流程中执行复杂的浏览器自动化、性能分析和调试任务。这种架构允许开发人员将浏览器视为一种交互式工具,为 AI 模型提供检查网络流量、截取屏幕截图以及执行脚本的能力,从而解决现实世界中的 Web 开发挑战。

// 核心亮点

01
通过记录跟踪并使用 Chrome DevTools 提取可操作的数据,提供全面的性能洞察。
02
实现高级浏览器调试,包括网络请求分析和带有 source-mapped 堆栈跟踪的控制台消息检查。
03
通过 Puppeteer 实现可靠的浏览器自动化,其中包括自动等待操作结果。
04
支持广泛的输入和导航工具,允许智能体与表单、按钮和拖放界面等 Web 元素进行交互。
05
提供灵活的配置选项,例如无头模式以及连接到现有浏览器实例以进行专门工作流程的能力。
06
通过标准化的 Model Context Protocol 与各种 AI 编码助手和 IDE 无缝集成。

// 典型使用场景

01
使用 Puppeteer 自动化浏览器操作和导航
02
通过分析网络请求和控制台消息执行深度调试
03
为 Web 应用程序生成性能洞察和跟踪记录

// 快速开始

首先,请确保已安装 Node.js v20.19 或更高版本以及当前版本的 Chrome。通过指定命令 'npx' 和参数 'chrome-devtools-mcp@latest',将服务器添加到您的 MCP 客户端配置中。配置完成后,您可以提示您的 AI 助手执行任务(例如检查特定网站的性能)来测试集成效果。