chrome-devtools by mrgoonie/claudekit-skills
npx skills add https://github.com/mrgoonie/claudekit-skills --skill chrome-devtools通过可执行的 Puppeteer 脚本实现浏览器自动化。所有脚本都输出 JSON,便于解析。
重要提示:运行脚本前务必检查 pwd。
在 Linux/WSL 上,Chrome 需要系统库。请先安装它们:
pwd # 应显示当前工作目录
cd .claude/skills/chrome-devtools/scripts
./install-deps.sh # 自动检测操作系统并安装所需库
支持:Ubuntu、Debian、Fedora、RHEL、CentOS、Arch、Manjaro
macOS/Windows:跳过此步骤(依赖项已与 Chrome 捆绑)
npm install # 安装 puppeteer、debug、yargs
ImageMagick 支持自动截图压缩,以保持文件大小在 5MB 以下:
macOS:
brew install imagemagick
Ubuntu/Debian/WSL:
sudo apt-get install imagemagick
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
验证:
magick -version # 或:convert -version
如果没有 ImageMagick,大于 5MB 的截图将不会被压缩(可能无法在 Gemini/Claude 中加载)。
node navigate.js --url https://example.com
# 输出:{"success": true, "url": "https://example.com", "title": "Example Domain"}
所有脚本都在 .claude/skills/chrome-devtools/scripts/ 目录下
重要提示:运行脚本前务必检查 pwd。
./scripts/README.mdnavigate.js - 导航到 URLscreenshot.js - 捕获截图(整个页面或元素)click.js - 点击元素fill.js - 填写表单字段evaluate.js - 在页面上下文中执行 JavaScriptsnapshot.js - 提取带有元数据的交互元素console.js - 监控控制台消息/错误network.js - 跟踪 HTTP 请求/响应performance.js - 测量核心网页指标 + 记录跟踪信息pwd # 应显示当前工作目录
cd .claude/skills/chrome-devtools/scripts
node screenshot.js --url https://example.com --output ./docs/screenshots/page.png
重要:始终将截图保存到 ./docs/screenshots 目录。
如果截图超过 5MB,将自动压缩,以确保与 Gemini API 和 Claude Code(有 5MB 限制)的兼容性。这内部使用了 ImageMagick:
# 默认:如果 >5MB 则自动压缩
node screenshot.js --url https://example.com --output page.png
# 自定义大小阈值(例如 3MB)
node screenshot.js --url https://example.com --output page.png --max-size 3
# 禁用压缩
node screenshot.js --url https://example.com --output page.png --no-compress
压缩行为:
输出包含压缩信息:
{
"success": true,
"output": "/path/to/page.png",
"compressed": true,
"originalSize": 8388608,
"size": 3145728,
"compressionRatio": "62.50%",
"url": "https://example.com"
}
# 使用 --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]"
# 使用 jq 提取特定字段
node performance.js --url https://example.com | jq '.vitals.LCP'
# 保存到文件
node network.js --url https://example.com --output /tmp/requests.json
在执行任何脚本之前:
pwd 检查当前工作目录.claude/skills/chrome-devtools/scripts/ 目录下cd 到正确位置示例:
pwd # 应显示:.../chrome-devtools/scripts
# 如果错误:
cd .claude/skills/chrome-devtools/scripts
在截图/捕获操作之后:
ls -lh <output-path> 验证文件已创建示例:
node screenshot.js --url https://example.com --output ./docs/screenshots/page.png
ls -lh ./docs/screenshots/page.png # 验证文件存在
# 然后使用 Read 工具进行视觉检查
5. 将工作目录重启到项目根目录。
如果脚本失败:
示例:
# CSS 选择器失败
node click.js --url https://example.com --selector ".btn-submit"
# 错误:等待选择器 ".btn-submit" 失败
# 发现正确的选择器
node snapshot.js --url https://example.com | jq '.elements[] | select(.tagName=="BUTTON")'
# 尝试 XPath
node click.js --url https://example.com --selector "//button[contains(text(),'Submit')]"
❌ 工作目录错误 → 输出文件保存到错误位置 ❌ 跳过输出验证 → 静默失败 ❌ 使用复杂 CSS 选择器而不测试 → 选择器错误 ❌ 不检查元素可见性 → 超时错误
✅ 运行脚本前始终验证 pwd ✅ 截图后始终验证输出 ✅ 使用 snapshot.js 发现选择器 ✅ 先用简单命令测试选择器
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。
所有脚本都向 stdout 输出 JSON:
{
"success": true,
"url": "https://example.com",
... // 脚本特定数据
}
错误输出到 stderr:
{
"success": false,
"error": "错误信息"
}
使用 snapshot.js 来发现选择器:
node snapshot.js --url https://example.com | jq '.elements[] | {tagName, text, selector}'
"Cannot find package 'puppeteer'"
npm install"error while loading shared libraries: libnss3.so" (Linux/WSL)
./install-deps.shsudo 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"
ls ~/.cache/puppeteernpm rebuild 然后 npm installChrome not found
npm install 期间会自动下载 Chromenpx puppeteer browsers install chromeElement not found
node snapshot.js --url <url>Script hangs
--timeout 60000--wait-until load 或 --wait-until domcontentloadedBlank screenshot
--wait-until networkidle2--timeout 30000Permission denied on scripts
chmod +x *.shScreenshot too large ( >5MB)
--max-size 3--format jpeg --quality 80--selector .main-contentCompression not working
magick -version 或 convert -version"compressed": true--selector 仅捕获所需区域详细指南可在 ./references/ 中找到:
使用共享库创建自定义脚本:
import { getBrowser, getPage, closeBrowser, outputJSON } from './lib/browser.js';
// 你的自动化逻辑
const client = await page.createCDPSession();
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
高级模式和完整 API 覆盖范围请参见参考文档。
每周安装次数
472
仓库
GitHub 星标数
1.9K
首次出现
2026 年 1 月 22 日
安全审计
安装于
opencode388
gemini-cli365
claude-code349
codex347
github-copilot313
cursor289
Browser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.
CRITICAL : Always check pwd before running scripts.
On Linux/WSL, Chrome requires system libraries. Install them first:
pwd # Should show current working directory
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)
npm install # Installs puppeteer, debug, yargs
ImageMagick enables automatic screenshot compression to keep files under 5MB:
macOS:
brew install imagemagick
Ubuntu/Debian/WSL:
sudo apt-get install imagemagick
Verify:
magick -version # or: convert -version
Without ImageMagick, screenshots >5MB will not be compressed (may fail to load in Gemini/Claude).
node navigate.js --url https://example.com
# Output: {"success": true, "url": "https://example.com", "title": "Example Domain"}
All scripts are in .claude/skills/chrome-devtools/scripts/
CRITICAL : Always check pwd before running scripts.
./scripts/README.mdnavigate.js - Navigate to URLsscreenshot.js - Capture screenshots (full page or element)click.js - Click elementsfill.js - Fill form fieldsevaluate.js - Execute JavaScript in page contextsnapshot.js - Extract interactive elements with metadataconsole.js - Monitor console messages/errorsnetwork.js - Track HTTP requests/responsesperformance.js - Measure Core Web Vitals + record tracespwd # Should show current working directory
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.
Screenshots are automatically compressed if they exceed 5MB to ensure compatibility with Gemini API and Claude Code (which have 5MB limits). This uses ImageMagick internally:
# Default: auto-compress if >5MB
node screenshot.js --url https://example.com --output page.png
# Custom size threshold (e.g., 3MB)
node screenshot.js --url https://example.com --output page.png --max-size 3
# Disable compression
node screenshot.js --url https://example.com --output page.png --no-compress
Compression behavior:
Output includes compression info:
{
"success": true,
"output": "/path/to/page.png",
"compressed": true,
"originalSize": 8388608,
"size": 3145728,
"compressionRatio": "62.50%",
"url": "https://example.com"
}
# Keep browser open with --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]"
# Extract specific fields with 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
BEFORE executing any script:
pwd.claude/skills/chrome-devtools/scripts/ directorycd to correct locationExample:
pwd # Should show: .../chrome-devtools/scripts
# If wrong:
cd .claude/skills/chrome-devtools/scripts
AFTER screenshot/capture operations:
ls -lh <output-path>Example:
node screenshot.js --url https://example.com --output ./docs/screenshots/page.png
ls -lh ./docs/screenshots/page.png # Verify file exists
# Then use Read tool to visually inspect
5. Restart working directory to the project root.
If script fails:
Example:
# CSS selector fails
node click.js --url https://example.com --selector ".btn-submit"
# Error: waiting for selector ".btn-submit" failed
# Discover correct selector
node snapshot.js --url https://example.com | jq '.elements[] | select(.tagName=="BUTTON")'
# Try XPath
node click.js --url https://example.com --selector "//button[contains(text(),'Submit')]"
❌ Wrong working directory → output files go to wrong location ❌ Skipping output validation → silent failures ❌ Using complex CSS selectors without testing → selector errors ❌ Not checking element visibility → timeout errors
✅ Always verify pwd before running scripts ✅ Always validate output after screenshots ✅ Use snapshot.js to discover selectors ✅ Test selectors with simple commands first
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 passed: ${LCP}ms"
else
echo "✗ LCP failed: ${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'
All scripts support:
--headless false - Show browser window--close false - Keep browser open for chaining--timeout 30000 - Set timeout (milliseconds)--wait-until networkidle2 - Wait strategySee ./scripts/README.md for complete options.
All scripts output JSON to stdout:
{
"success": true,
"url": "https://example.com",
... // script-specific data
}
Errors go to stderr:
{
"success": false,
"error": "Error message"
}
Use snapshot.js to discover selectors:
node snapshot.js --url https://example.com | jq '.elements[] | {tagName, text, selector}'
"Cannot find package 'puppeteer'"
npm install in the scripts directory"error while loading shared libraries: libnss3.so" (Linux/WSL)
./install-deps.sh in scripts directorysudo 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"
ls ~/.cache/puppeteernpm rebuild then npm installChrome not found
npm installnpx puppeteer browsers install chromeElement not found
node snapshot.js --url <url>Script hangs
--timeout 60000--wait-until load or --wait-until domcontentloadedBlank screenshot
--wait-until networkidle2--timeout 30000Permission denied on scripts
chmod +x *.shScreenshot too large ( >5MB)
--max-size 3--format jpeg --quality 80--selector .main-contentCompression not working
magick -version or convert -version"compressed": true--selector to capture only needed areaDetailed guides available in ./references/:
Create custom scripts using shared library:
import { getBrowser, getPage, closeBrowser, outputJSON } from './lib/browser.js';
// Your automation logic
const client = await page.createCDPSession();
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
See reference documentation for advanced patterns and complete API coverage.
Weekly Installs
472
Repository
GitHub Stars
1.9K
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykFail
Installed on
opencode388
gemini-cli365
claude-code349
codex347
github-copilot313
cursor289
Lark Task CLI 任务管理工具 - 飞书任务创建、分配、更新与协作完整指南
7,100 周安装
OpenAPI 转 TypeScript 工具 - 自动生成 API 接口与类型守卫
563 周安装
Rust Unsafe代码检查器 - 安全使用Unsafe Rust的完整指南与最佳实践
566 周安装
数据库模式设计器 - 内置最佳实践,自动生成生产级SQL/NoSQL数据库架构
565 周安装
Nx 生成器使用指南:自动化代码生成与单体仓库项目搭建
594 周安装
.NET并发编程模式指南:async/await、Channels、Akka.NET选择决策树
725 周安装
韩语语法检查器 - 基于国立国语院标准的拼写、空格、语法、标点错误检测与纠正
586 周安装