名称: chrome-devtools 描述: 使用 Puppeteer CLI 脚本进行浏览器自动化、调试和性能分析。用于自动化浏览器、截图、分析性能、监控网络流量、网页抓取、表单自动化和 JavaScript 调试。许可证: Apache-2.0

Chrome 开发工具代理技能

通过可执行的 Puppeteer 脚本实现浏览器自动化。所有脚本输出 JSON 以便轻松解析。

快速开始

安装

步骤 1: 安装系统依赖（仅 Linux/WSL）

在 Linux/WSL 上，Chrome 需要系统库。先安装它们：

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

支持: Ubuntu, Debian, Fedora, RHEL, CentOS, Arch, Manjaro

macOS/Windows: 跳过此步骤（依赖项与 Chrome 捆绑）

步骤 2: 安装 Node 依赖

npm install  # 安装 puppeteer, debug, yargs

测试

node navigate.js --url https://example.com
# 输出: {"success": true, "url": "https://example.com", "title": "Example Domain"}

可用脚本

所有脚本位于 .claude/skills/chrome-devtools/scripts/

脚本使用

./scripts/README.md

核心自动化

navigate.js - 导航到 URL
screenshot.js - 捕获截图（全页或元素）
click.js - 点击元素
fill.js - 填充表单字段
evaluate.js - 在页面上下文中执行 JavaScript

分析与监控

snapshot.js - 提取带元数据的交互元素
console.js - 监控控制台消息/错误
network.js - 跟踪 HTTP 请求/响应
performance.js - 测量核心网页指标 + 记录跟踪

使用模式

单命令

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

重要: 始终将截图保存到 ./docs/screenshots 目录。

链式命令（重用浏览器）

# 使用 --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]"

解析 JSON 输出

# 使用 jq 提取特定字段
node performance.js --url https://example.com | jq '.vitals.LCP'

# 保存到文件
node network.js --url https://example.com --output /tmp/requests.json

常见工作流

网页抓取

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'

性能测试

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

表单自动化

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

错误监控

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

脚本选项

所有脚本支持:

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

查看 ./scripts/README.md 获取完整选项。

输出格式

所有脚本输出 JSON 到 stdout:

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

错误输出到 stderr:

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

查找元素

使用 snapshot.js 发现选择器:

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

故障排除

常见错误

“找不到包 ‘puppeteer’”

运行: 在脚本目录中运行 npm install

“加载共享库时出错: 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

“启动浏览器进程失败”

检查系统依赖是否已安装 (Linux/WSL)
验证 Chrome 是否已下载: ls ~/.cache/puppeteer
尝试: npm rebuild 然后 npm install

找不到 Chrome

Puppeteer 在 npm install 期间自动下载 Chrome
如果失败，手动触发: npx puppeteer browsers install chrome

脚本问题

找不到元素

先获取快照以找到正确选择器: node snapshot.js --url <url>

脚本挂起

增加超时: --timeout 60000
更改等待策略: --wait-until load 或 --wait-until domcontentloaded

空白截图

等待页面加载: --wait-until networkidle2
增加超时: --timeout 30000

脚本权限被拒绝

使可执行: chmod +x *.sh

参考文档

详细指南位于 ./references/:

CDP 领域参考 - 47 个 Chrome 开发者工具协议领域
Puppeteer 快速参考 - 完整 Puppeteer API 模式
性能分析指南 - 核心网页指标优化

高级使用

自定义脚本

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

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

直接 CDP 访问

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

查看参考文档以获取高级模式和完整 API 覆盖。

Chrome开发工具代理技能Skill chrome-devtools

名称: chrome-devtools 描述: 使用 Puppeteer CLI 脚本进行浏览器自动化、调试和性能分析。用于自动化浏览器、截图、分析性能、监控网络流量、网页抓取、表单自动化和 JavaScript 调试。许可证: Apache-2.0