What makes Skill notable?

1.1K downloads. Trust evidence available

How should Skill be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Skill

Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作 Skill: Skill Owner: cn-big-cabbage Summary: Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作 Tags: latest:0.1.1 Version history: v0.1.1 | 2026-06-16T09:47:24.718Z | auto - Bumped version to 0.1.1. - Updated metadata in SKILL.md to specify required binaries (node, npx) for better environment validation. - Added _meta.json file for improved metadata manageme

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.1k

Updated

Oct 11, 2026

Version

0.1.1

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1.1K downloadsadoption · observed Oct 11, 2026
Latest release: 0.1.1release · observed Jun 16, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17dbd0j0kazk5ay31x9kv1z3n84f04v:cn-chrome-devtools-mcp

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-cn-big-cabbage-cn-chrome-devtools-mcp/snapshot"

Documentation

CLAWHUB

35,440 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: chrome-devtools-mcp
description: Chrome DevTools MCP 服务器，让 AI 编码助手（Claude Code、Cursor、Copilot）直接控制和调试真实 Chrome 浏览器，实现截图、性能分析、网络请求检查、控制台调试和自动化操作
version: 0.1.1
metadata:
  openclaw:
    requires:
      bins:
        - node
        - npx
    emoji: 🔧
    homepage: https://github.com/ChromeDevTools/chrome-devtools-mcp
---

# chrome-devtools-mcp — AI 浏览器调试与自动化 MCP 工具

chrome-devtools-mcp 是 Google Chrome DevTools 团队官方出品的 MCP 服务器，通过 Model Context Protocol 让 AI 编码助手获得完整的 Chrome DevTools 能力。它使用 Puppeteer 实现可靠的浏览器自动化，内置等待机制确保操作结果正确。支持 Claude Code、Cursor、VS Code Copilot、Codex 等主流 AI 工具，是 AI 驱动前端调试和 Web 自动化的首选方案。

## 核心使用场景

- **前端 Bug 调试**：AI 直接打开页面、查看控制台报错（含源码映射的堆栈追踪）、检查网络请求
- **性能分析**：录制页面性能 Trace、提取可操作的优化建议，结合真实用户数据（CrUX）
- **截图与视觉验证**：AI 截图当前页面状态，辅助 UI 回归测试和 Bug 复现
- **Web 自动化测试**：AI 填写表单、点击按钮、导航页面，可靠等待操作完成
- **接入已有 Chrome 实例**：连接 DevTools 远程调试端口，调试任意 Chrome 标签页

## AI 辅助使用流程

1. **安装配置** — AI 在 Claude Code 中执行一行命令完成 MCP 服务器安装
2. **连接浏览器** — 服务器自动启动 Chrome，或连接指定的 DevTools 远程端口
3. **导航目标页面** — AI 通过 MCP 工具导航到待调试的 URL
4. **执行调试操作** — AI 截图、检查控制台、分析网络请求、录制性能 Trace
5. **自动化交互** — AI 自动化点击/填写/滚动等用户操作
6. **分析结果** — AI 基于 DevTools 数据给出优化建议或 Bug 定位

## 关键章节导航

- [安装指南](guides/01-installation.md) — Claude Code / VS Code / Cursor 多种安装方式
- [快速开始](guides/02-quickstart.md) — 调试工作流、截图、性能分析、网络检查
- [高级用法](guides/03-advanced-usage.md) — 连接已有浏览器、Slim 模式、隐私配置
- [故障排查](troubleshooting.md) — 浏览器连接失败、超时、权限问题

## AI 助手能力

使用本技能时，AI 可以：

- ✅ 通过 `claude mcp add` 或 `/plugin install` 完成 MCP 服务器安装
- ✅ 导航到任意 URL 并等待页面加载完成
- ✅ 截图当前页面状态（支持全页面 / 视口截图）
- ✅ 读取浏览器控制台消息（含源码映射的完整堆栈追踪）
- ✅ 检查网络请求（URL / 状态码 / 响应头 / 响应体）
- ✅ 录制性能 Trace 并提取关键性能指标
- ✅ 执行点击、填写表单、键盘输入等自动化操作
- ✅ 执行任意 JavaScript 代码并获取返回值

## 核心功能

- ✅ **截图** — 全页面或视口截图，辅助视觉 Bug 复现
- ✅ **控制台检查** — 读取 log/warn/error 消息，含源码映射堆栈
- ✅ **网络分析** — 拦截和检查所有 HTTP/HTTPS 请求
- ✅ **性能分析** — 录制 DevTools Trace，结合 CrUX 真实用户数据
- ✅ **浏览器自动化** — 基于 Puppeteer 的可靠点击/填写/导航
- ✅ **JavaScript 执行** — 在页面上下文中执行任意 JS
- ✅ **Slim 模式** — 精简工具集，适合基础浏览任务
- ✅ **无头模式** — `--headless` 支持 CI 环境
- ✅ **远程连接** — 连接已有 Chrome DevTools 远程调试端口
- ✅ **多 AI 工具** — Claude Code / Cursor / VS Code / Copilot / Codex

## 快速安装示例

```bash
# Claude Code CLI 安装（推荐）
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

# Claude Code 插件安装（含 Skills）
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp

# VS Code CLI 安装
code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","chrome-devtools-mcp"]}'
```

**MCP 配置（手动添加到 settings.json）：**
```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
```

## 安装要求

| 依赖 | 版本要求 |
|------|---------|
| Node.js | >= 20.19（最新 LTS 维护版） |
| Chrome | 当前稳定版或更新 |
| npm | 任意版本 |

## 项目链接

- GitHub：https://github.com/ChromeDevTools/chrome-devtools-mcp
- 工具参考：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md
- Slim 工具参考：https://github.com/ChromeDevTools/chr

_meta.json

{
  "ownerId": "kn7c5ry95ff7x22mt3fx6j0q3d81p8t3",
  "slug": "cn-chrome-devtools-mcp",
  "version": "0.1.1",
  "publishedAt": 1781603244718
}

guides/01-installation.md

# 安装指南

## 适用场景

- 在 Claude Code 中安装 chrome-devtools-mcp
- 在 VS Code / Cursor 等其他 AI 工具中配置
- 验证 MCP 服务器正常连接

---

## Claude Code 安装（推荐两种方式）

### 方式一：CLI 安装（仅 MCP）

> **AI 可自动执行**

```bash
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
```

`--scope user` 表示对当前用户全局生效（所有项目可用）。

### 方式二：插件安装（MCP + Skills，功能更完整）

在 Claude Code 会话中执行：

```
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp
```

**安装完成后必须重启 Claude Code**，然后用 `/skills` 验证 Skills 已加载。

> 若出现 `Failed to clone repository` 错误（企业网络 HTTPS 受限），改用方式一 CLI 安装。

---

## VS Code / Copilot 安装

### CLI 一键安装

```bash
# macOS / Linux
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

# Windows PowerShell
code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
```

### 手动配置

在 VS Code MCP 配置文件中添加：

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
```

---

## Cursor 安装

进入 `Cursor Settings → MCP → New MCP Server`，使用以下配置：

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
```

---

## Windows 特殊配置（Codex）

Windows 下需要指定 Chrome 路径和增加超时时间，在 `.codex/config.toml` 中：

```toml
[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
```

---

## 验证安装

安装并重启 AI 工具后，在对话中发送：

```
请截图 https://example.com 的当前状态
```

**期望结果：** AI 打开浏览器，导航到 example.com，并返回截图。

或检查 MCP 服务器列表：

```bash
# Claude Code
claude mcp list
```

---

## 隐私设置（可选）

禁用 Google 使用统计收集：

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
    }
  }
}
```

或通过环境变量：
```bash
export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1
```

---

## 完成确认检查清单

- [ ] MCP 服务器配置已添加到对应 AI 工具
- [ ] AI 工具已重启
- [ ] 发送截图请求，AI 成功控制浏览器并返回截图
- [ ] （可选）`claude mcp list` 显示 chrome-devtools 已注册

---

## 下一步

- [快速开始](02-quickstart.md) — 调试工作流、性能分析、网络检查

guides/02-quickstart.md

# 快速开始

## 适用场景

- 用 AI 调试前端页面的 JavaScript 报错
- 分析页面性能瓶颈
- 检查网络请求和 API 响应
- 执行浏览器自动化操作

---

## 基础工作流：调试前端 Bug

典型的 AI 调试会话流程：

1. **告诉 AI 访问页面**
   ```
   请打开 http://localhost:3000，截图并检查控制台是否有报错
   ```

2. **AI 返回截图 + 控制台消息**，通常包含带源码映射的完整错误堆栈

3. **深入检查**
   ```
   查看页面所有网络请求，找出失败的 API 调用
   ```

4. **执行交互**
   ```
   点击"Submit"按钮，然后截图表单提交后的状态
   ```

---

## 截图

```
请截图 https://www.example.com 的首屏效果
```

```
截图 http://localhost:3000/dashboard，确认侧边栏是否正确显示
```

AI 会返回图片供直接查看，无需手动操作浏览器。

---

## 控制台调试

```
打开 http://localhost:3000，读取控制台的所有错误和警告
```

chrome-devtools-mcp 会返回：
- 错误消息文本
- 源码映射后的真实文件名和行号（不是 bundle.js:1）
- 完整调用堆栈

---

## 网络请求检查

```
访问 http://localhost:3000/api-test，检查所有网络请求，
特别关注失败的请求（4xx/5xx）
```

AI 可以看到：
- 请求 URL 和方法
- 响应状态码
- 请求/响应头
- 响应体内容

---

## 性能分析

```
录制 https://example.com 的页面性能，找出主要性能瓶颈
```

AI 会：
1. 录制 DevTools Performance Trace
2. 提取关键指标（FCP、LCP、TBT 等）
3. 结合真实用户数据（CrUX）对比实验室数据
4. 给出可操作的优化建议

禁用 CrUX 真实用户数据（隐私敏感场景）：
```json
"args": ["-y", "chrome-devtools-mcp@latest", "--no-performance-crux"]
```

---

## 浏览器自动化

```
在 http://localhost:3000/login 填写用户名 "[email protected]"
和密码 "password123"，点击登录，截图登录结果
```

```
在搜索框输入 "Claude Code"，点击搜索按钮，截图结果页面
```

Puppeteer 底层确保每次操作都等待执行完成，比简单的 `setTimeout` 更可靠。

---

## 执行 JavaScript

```
在当前页面执行 document.title，返回页面标题
```

```
执行 window.localStorage.getItem('user_token')，查看当前存储的 token
```

---

## 完成确认检查清单

- [ ] 成功截图本地开发服务器页面
- [ ] 读取到控制台错误消息（含源码映射堆栈）
- [ ] 检查到网络请求列表
- [ ] 执行了至少一次自动化点击/填写操作

---

## 下一步

- [高级用法](03-advanced-usage.md) — 连接已有浏览器、Slim 模式、CI 无头模式

guides/03-advanced-usage.md

# 高级用法

## 连接已有 Chrome 实例

不启动新浏览器，而是连接到已运行的 Chrome：

```bash
# 先启动 Chrome 并开启远程调试
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222

# 配置 MCP 连接到该端口
```

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest",
               "--browser-url=http://127.0.0.1:9222"]
    }
  }
}
```

适用场景：调试已登录状态的页面、连接特定浏览器 Profile。

---

## Slim 模式（轻量基础功能）

只需要截图、导航等基础操作时，使用 `--slim` 减少工具数量：

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}
```

Slim 模式工具集更小，适合 Token 敏感场景，完整工具列表见 [Slim 工具参考](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md)。

---

## 无头模式（CI 环境）

在 CI/CD 中使用，无需图形界面：

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--headless"]
    }
  }
}
```

CI 环境会自动禁用使用统计（检测到 `CI` 环境变量）。

---

## 禁用自动更新检查

```bash
export CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1
```

---

## 工具参考速查

完整 MCP 工具列表（从对话中直接调用）：

| 工具类别 | 说明 |
|---------|------|
| `screenshot` | 截图当前页面 |
| `navigate` | 导航到 URL |
| `click` | 点击元素 |
| `type` | 输入文本 |
| `evaluate` | 执行 JavaScript |
| `network` | 检查网络请求 |
| `console` | 读取控制台消息 |
| `performance` | 录制性能 Trace |

完整工具文档：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

---

## 完成确认检查清单

- [ ] 成功连接到已有 Chrome 实例（如有需要）
- [ ] Slim 模式测试通过（如需精简功能）
- [ ] 无头模式在 CI 脚本中运行成功

---

## 相关链接

- [故障排查](../troubleshooting.md)
- [完整工具参考](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)
- [设计原则](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/design-principles.md)

Github ReposUpdated 2d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.