chrome-devtools

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chrome DevTools Agent Skill

Browser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.

通过可执行的Puppeteer脚本实现浏览器自动化。所有脚本均输出JSON格式，便于解析。

Quick Start

快速开始

Installation

安装

Step 1: Install System Dependencies (Linux/WSL only)

步骤1：安装系统依赖（仅适用于Linux/WSL）

On Linux/WSL, Chrome requires system libraries. Install them first:

bash

cd .claude/skills/chrome-devtools/scripts
./install-deps.sh  # Auto-detects OS and installs required libs

Supports: Ubuntu, Debian, Fedora, RHEL, CentOS, Arch, Manjaro

macOS/Windows: Skip this step (dependencies bundled with Chrome)

在Linux/WSL环境下，Chrome需要特定的系统库。请先安装这些依赖：

bash

cd .claude/skills/chrome-devtools/scripts
./install-deps.sh  # 自动检测操作系统并安装所需依赖库

支持的系统：Ubuntu、Debian、Fedora、RHEL、CentOS、Arch、Manjaro

macOS/Windows：跳过此步骤（Chrome已捆绑所需依赖）

Step 2: Install Node Dependencies

步骤2：安装Node.js依赖

bash

npm install  # Installs puppeteer, debug, yargs

bash

npm install  # 安装puppeteer、debug、yargs

Test

测试

bash

node navigate.js --url https://example.com

bash

node navigate.js --url https://example.com

Output: {"success": true, "url": "https://example.com", "title": "Example Domain"}

输出：{"success": true, "url": "https://example.com", "title": "Example Domain"}

undefined

undefined

Available Scripts

可用脚本

All scripts are in

.claude/skills/chrome-devtools/scripts/

所有脚本位于

.claude/skills/chrome-devtools/scripts/

目录下

Script Usage

脚本使用说明

```
./scripts/README.md
```

```
./scripts/README.md
```

Core Automation

核心自动化脚本

```
navigate.js
```
- Navigate to URLs
```
screenshot.js
```
- Capture screenshots (full page or element)
```
click.js
```
- Click elements
```
fill.js
```
- Fill form fields
```
evaluate.js
```
- Execute JavaScript in page context

```
navigate.js
```
- 导航至指定URL
```
screenshot.js
```
- 截取网页截图（支持整页或指定元素）
```
click.js
```
- 点击页面元素
```
fill.js
```
- 填写表单字段
```
evaluate.js
```
- 在页面上下文执行JavaScript代码

Analysis & Monitoring

分析与监控脚本

```
snapshot.js
```
- Extract interactive elements with metadata
```
console.js
```
- Monitor console messages/errors
```
network.js
```
- Track HTTP requests/responses
```
performance.js
```
- Measure Core Web Vitals + record traces

```
snapshot.js
```
- 提取带有元数据的交互式元素
```
console.js
```
- 监控控制台消息/错误
```
network.js
```
- 追踪HTTP请求/响应
```
performance.js
```
- 测量核心Web指标并记录性能轨迹

Usage Patterns

使用模式

Single Command

单命令执行

bash

cd .claude/skills/chrome-devtools/scripts
node screenshot.js --url https://example.com --output ./docs/screenshots/page.png

Important: Always save screenshots to

./docs/screenshots

directory.

bash

cd .claude/skills/chrome-devtools/scripts
node screenshot.js --url https://example.com --output ./docs/screenshots/page.png

重要提示：请始终将截图保存至

./docs/screenshots

目录。

Chain Commands (reuse browser)

链式命令执行（复用浏览器实例）

bash

undefined

bash

undefined

Keep browser open with --close false

保持浏览器打开，使用--close false参数

node navigate.js --url https://example.com/login --close false node fill.js --selector "#email" --value "user@example.com" --close false node fill.js --selector "#password" --value "secret" --close false node click.js --selector "button[type=submit]"

undefined

undefined

Parse JSON Output

解析JSON输出

bash

undefined

bash

undefined

Extract specific fields with jq

使用jq提取特定字段

node performance.js --url https://example.com | jq '.vitals.LCP'

Save to file

将输出保存至文件

node network.js --url https://example.com --output /tmp/requests.json

undefined

node network.js --url https://example.com --output /tmp/requests.json

undefined

Common Workflows

常见工作流

Web Scraping

网页爬取

bash

node evaluate.js --url https://example.com --script "
  Array.from(document.querySelectorAll('.item')).map(el => ({
    title: el.querySelector('h2')?.textContent,
    link: el.querySelector('a')?.href
  }))
" | jq '.result'

bash

node evaluate.js --url https://example.com --script "
  Array.from(document.querySelectorAll('.item')).map(el => ({
    title: el.querySelector('h2')?.textContent,
    link: el.querySelector('a')?.href
  }))
" | jq '.result'

Performance Testing

性能测试

bash

PERF=$(node performance.js --url https://example.com)
LCP=$(echo $PERF | jq '.vitals.LCP')
if (( $(echo "$LCP < 2500" | bc -l) )); then
  echo "✓ LCP passed: ${LCP}ms"
else
  echo "✗ LCP failed: ${LCP}ms"
fi

bash

PERF=$(node performance.js --url https://example.com)
LCP=$(echo $PERF | jq '.vitals.LCP')
if (( $(echo "$LCP < 2500" | bc -l) )); then
  echo "✓ LCP 达标：${LCP}ms"
else
  echo "✗ LCP 不达标：${LCP}ms"
fi

Form Automation

表单自动化

bash

node fill.js --url https://example.com --selector "#search" --value "query" --close false
node click.js --selector "button[type=submit]"

bash

node fill.js --url https://example.com --selector "#search" --value "query" --close false
node click.js --selector "button[type=submit]"

Error Monitoring

错误监控

bash

node console.js --url https://example.com --types error,warn --duration 5000 | jq '.messageCount'

bash

node console.js --url https://example.com --types error,warn --duration 5000 | jq '.messageCount'

Script Options

脚本选项

All scripts support:

```
--headless false
```
- Show browser window
```
--close false
```
- Keep browser open for chaining
```
--timeout 30000
```
- Set timeout (milliseconds)
```
--wait-until networkidle2
```
- Wait strategy

See

./scripts/README.md

for complete options.

所有脚本均支持以下参数：

```
--headless false
```
- 显示浏览器窗口
```
--close false
```
- 保持浏览器打开以便链式执行
```
--timeout 30000
```
- 设置超时时间（毫秒）
```
--wait-until networkidle2
```
- 页面等待策略

完整选项请查看

./scripts/README.md

。

Output Format

输出格式

All scripts output JSON to stdout:

json

{
  "success": true,
  "url": "https://example.com",
  ... // script-specific data
}

Errors go to stderr:

json

{
  "success": false,
  "error": "Error message"
}

所有脚本均向标准输出（stdout）输出JSON：

json

{
  "success": true,
  "url": "https://example.com",
  ... // 脚本特定数据
}

错误信息将输出至标准错误（stderr）：

json

{
  "success": false,
  "error": "错误信息"
}

Finding Elements

元素定位

Use

snapshot.js

to discover selectors:

bash

node snapshot.js --url https://example.com | jq '.elements[] | {tagName, text, selector}'

使用

snapshot.js

脚本查找元素选择器：

bash

node snapshot.js --url https://example.com | jq '.elements[] | {tagName, text, selector}'

Troubleshooting

故障排除

Common Errors

常见错误

"Cannot find package 'puppeteer'"

Run:
```
npm install
```
in the scripts directory

"error while loading shared libraries: libnss3.so" (Linux/WSL)

Missing system dependencies
Fix: Run
```
./install-deps.sh
```
in scripts directory

Manual install:

sudo apt-get install -y libnss3 libnspr4 libasound2t64 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1

"Failed to launch the browser process"

Check system dependencies installed (Linux/WSL)
Verify Chrome downloaded:
```
ls ~/.cache/puppeteer
```
Try:
```
npm rebuild
```
then
```
npm install
```

Chrome not found

Puppeteer auto-downloads Chrome during
```
npm install
```
If failed, manually trigger:
```
npx puppeteer browsers install chrome
```

"Cannot find package 'puppeteer'"

解决方法：在脚本目录下执行
```
npm install
```

"error while loading shared libraries: libnss3.so"（Linux/WSL）

原因：缺少系统依赖
解决方法：在脚本目录下执行
```
./install-deps.sh
```

手动安装：

sudo apt-get install -y libnss3 libnspr4 libasound2t64 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1

"Failed to launch the browser process"

检查是否已安装系统依赖（Linux/WSL）
验证Chrome是否已下载：
```
ls ~/.cache/puppeteer
```
尝试：
```
npm rebuild
```
后重新执行
```
npm install
```

Chrome未找到

Puppeteer会在
```
npm install
```
时自动下载Chrome
若下载失败，手动触发：
```
npx puppeteer browsers install chrome
```

Script Issues

脚本问题

Element not found

Get snapshot first to find correct selector:
```
node snapshot.js --url <url>
```

Script hangs

Increase timeout:
```
--timeout 60000
```

Change wait strategy:

--wait-until load

--wait-until domcontentloaded

Blank screenshot

Wait for page load:
```
--wait-until networkidle2
```
Increase timeout:
```
--timeout 30000
```

Permission denied on scripts

Make executable:
```
chmod +x *.sh
```

元素未找到

先执行快照脚本获取正确选择器：
```
node snapshot.js --url <url>
```

脚本挂起

增加超时时间：
```
--timeout 60000
```

更改等待策略：

--wait-until load

或

--wait-until domcontentloaded

截图空白

等待页面加载完成：
```
--wait-until networkidle2
```
增加超时时间：
```
--timeout 30000
```

脚本权限不足

添加可执行权限：
```
chmod +x *.sh
```

Reference Documentation

参考文档

Detailed guides available in

./references/

CDP Domains Reference - 47 Chrome DevTools Protocol domains
Puppeteer Quick Reference - Complete Puppeteer API patterns
Performance Analysis Guide - Core Web Vitals optimization

详细指南位于

./references/

目录下：

CDP域参考文档 - 47个Chrome DevTools协议域
Puppeteer快速参考 - 完整的Puppeteer API使用模式
性能分析指南 - 核心Web指标优化

Advanced Usage

高级用法

Custom Scripts

自定义脚本

Create custom scripts using shared library:

javascript

import { getBrowser, getPage, closeBrowser, outputJSON } from './lib/browser.js';
// Your automation logic

使用共享库创建自定义脚本：

javascript

import { getBrowser, getPage, closeBrowser, outputJSON } from './lib/browser.js';
// 你的自动化逻辑

Direct CDP Access

直接访问CDP

javascript

const client = await page.createCDPSession();
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });

See reference documentation for advanced patterns and complete API coverage.

javascript

const client = await page.createCDPSession();
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });

更多高级模式和完整API覆盖请查看参考文档。

chrome-devtools

Original

Translation

Chrome DevTools Agent Skill

Chrome DevTools Agent Skill

Quick Start

快速开始

Installation

安装

Step 1: Install System Dependencies (Linux/WSL only)

步骤1：安装系统依赖（仅适用于Linux/WSL）

Step 2: Install Node Dependencies

步骤2：安装Node.js依赖

Test

测试

Output: {"success": true, "url": "https://example.com", "title": "Example Domain"}

输出：{"success": true, "url": "https://example.com", "title": "Example Domain"}

Available Scripts

可用脚本

Script Usage

脚本使用说明

Core Automation

核心自动化脚本

Analysis & Monitoring

分析与监控脚本

Usage Patterns

使用模式

Single Command

单命令执行

Chain Commands (reuse browser)

链式命令执行（复用浏览器实例）

Keep browser open with --close false

保持浏览器打开，使用--close false参数

Parse JSON Output

解析JSON输出

Extract specific fields with jq

使用jq提取特定字段

Save to file

将输出保存至文件

Common Workflows

常见工作流

Web Scraping

网页爬取

Performance Testing

性能测试

Form Automation

表单自动化

Error Monitoring

错误监控

Script Options

脚本选项

Output Format

输出格式

Finding Elements

元素定位

Troubleshooting

故障排除

Common Errors

常见错误

Script Issues

脚本问题

Reference Documentation

参考文档

Advanced Usage

高级用法

Custom Scripts

自定义脚本

Direct CDP Access

直接访问CDP

External Resources

外部资源