BAIZE AI RESOURCE

让 AI 编码助手通过 MCP 控制并检查真实 Chrome 浏览器的调试服务器

chrome-devtools-mcp

让 AI 编码助手通过 MCP 控制并检查真实 Chrome 浏览器的调试服务器

获取资源
chrome-devtools-mcp

资源介绍

chrome-devtools-mcp 是 Chrome DevTools 团队发布的 Model-Context-Protocol（MCP）服务器，把真实 Chrome 浏览器的控制与检查能力开放给 AI 编码助手（如 Antigravity、Claude、Cursor、Copilot）。它基于 Puppeteer 驱动浏览器，并接入 Chrome DevTools 前端能力，使助手能够录制性能 trace 并提取可执行的性能洞察、分析网络请求、截图、读取控制台消息（含 source map 堆栈），以及执行点击、填表、按键等交互并自动等待结果。除 MCP 模式外，项目还提供 chrome-devtools CLI，可在终端或 shell 脚本中完成同样的浏览器操作。仓库内置多个技能文档，覆盖无障碍调试、Cookie 与会话调试、LCP 优化、内存泄漏排查、扩展测试等场景。它适合需要让 AI 助手真正操作浏览器进行调试、自动化测试和性能优化的开发者；官方仅支持 Google Chrome 与 Chrome for Testing，其他 Chromium 浏览器不保证兼容。

MCP 能力

浏览器调试与网络检查

可分析网络请求、截图、读取浏览器控制台消息（含 source map 堆栈），并通过 get_network_request 检查 Cookie/Set-Cookie 等请求响应头，用于排查 401/403、重定向与会话问题。

基于 Puppeteer 的可靠自动化

使用 Puppeteer 在 Chrome 中执行点击、填表、拖拽、按键、上传文件等操作，并自动等待操作结果；通过 take_snapshot 获取元素 uid 后交互，状态在多次命令间保持。

内存泄漏调试工具

在启用 --memoryDebugging 后，可对 Chrome 页面执行堆快照采集与对比分析：先捕获堆快照，再用 get_heapsnapshot_summary 查看快照统计、compare_heapsnapshots 对比前后两份快照、get_heapsnapshot_class_nodes 按类名查看实例节点，从而定位内存增长与泄漏来源。

扩展与无障碍审计

借助内置的 a11y-debugging 技能，通过 take_snapshot 获取页面的无障碍树，检查标题层级、语义地标、表单标签、图片替代文本与焦点顺序；使用 press_key 模拟 Tab/Shift+Tab 验证键盘导航与焦点陷阱，并用 lighthouse_audit 运行无障碍审计获取评分与失败项。

MCP 与 CLI 双形态

该资源同时提供 MCP 服务器与 chrome-devtools CLI 两种使用形态：作为 MCP 服务器时，可接入 Antigravity、Claude、Cursor、Copilot 等 AI 客户端，让编码助手控制并检查运行中的 Chrome 浏览器；不依赖 MCP 时，可直接在终端以 chrome-devtools [arguments] [flags] 执行浏览器操作，并通过 --output-format=json 获得结构化输出，便于编写 shell 脚本自动化浏览器任务。

资源配置

支持客户端

Claude CodeCursorVS CodeCodexGemini CLI其他 MCP Client

安装方式

NPMNPX源码安装

配置方式

JSON配置环境变量命令行

运行环境

Node.js本地系统

安装与配置

  1. 准备受支持的 Chrome 或 Chrome for Testing，并确保本机具备符合要求的 Node.js 环境。

  2. 在 Claude、Cursor、Copilot 等 MCP 客户端中添加 chrome-devtools-mcp 服务器配置，然后启动或连接浏览器。

  3. 向 AI 助手说明要检查的页面和目标，例如网络错误、页面性能、控制台异常或自动化操作。

  4. 让助手读取页面快照和调试结果；涉及点击、填表或修改状态时，先确认目标页面和操作范围。

使用案例

页面性能分析

使用场景评估网页加载性能并定位 LCP 瓶颈

在 MCP 客户端输入“Check the performance of https://developers.chrome.com”，客户端会打开浏览器并录制性能 trace，随后可用 performance_analyze_insight 查看 LCPBreakdown 等洞察。

Cookie 与登录态调试

使用场景排查 401/403 或登录重定向问题

使用 list_network_requests 找到失败请求，再用 get_network_request 检查请求 Cookie 头与登录响应的 Set-Cookie，判断 Path、Domain、SameSite、Secure 或过期时间是否导致 Cookie 未发送。

内存泄漏排查

使用场景前端应用内存持续增长

启用 --memoryDebugging 后，用 take_heapsnapshot 在基线、操作后、恢复后分别保存堆快照，再用 compare_heapsnapshots 对比差异，并通过 get_heapsnapshot_retainers 定位保留链。

CLI 自动化操作

使用场景在终端或 shell 脚本中操作浏览器

运行 chrome-devtools list_pages 获取页面 ID，再用 chrome-devtools take_snapshot 获取元素 uid，随后执行 chrome-devtools click 或 fill 等命令，状态在命令间保持。

包含内容

chrome-devtools-mcp-source.zip
README-中文安装说明.md
LICENSE-Apache-2.0.txt
SHA256.txt

常见问题

chrome-devtools-mcp 支持哪些浏览器？
官方仅支持 Google Chrome 和 Chrome for Testing，并承诺为最新版 Extended Stable Chrome 提供修复与支持。其他基于 Chromium 的浏览器可能可用，但不保证兼容，可能出现意外行为。
如何关闭使用统计和更新检查？
使用统计默认开启，可在启动参数中加入 --no-usage-statistics，或设置 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 环境变量来关闭。更新检查可通过设置 CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 环境变量禁用。
内存调试工具为什么不可用？
compare_heapsnapshots、get_heapsnapshot_details 等高级内存调试工具只有在服务器以 --memoryDebugging 标志启动时才可用；若工具列表中不存在，需要在 MCP 配置的 args 中加入该标志并重启服务器。
性能工具会把数据发送到外部服务吗？
性能工具可能将 trace URL 发送到 Google CrUX API 以获取真实用户体验数据，用于在实验室数据之外提供现场数据。可通过 --no-performance-crux 标志禁用该行为。
运行 chrome-devtools-mcp 需要什么环境？
需要 Node.js LTS 版本、当前稳定版或更新的 Chrome 浏览器以及 npm。package.json 中 engines 字段要求 Node.js ^20.19.0 || ^22.12.0 || >=23。