chrome-devtools
8
总安装量
6
周安装量
#33829
全站排名
安装命令
npx skills add https://github.com/duc01226/easyplatform --skill chrome-devtools
Agent 安装分布
claude-code
4
windsurf
3
opencode
3
codex
3
antigravity
3
gemini-cli
3
Skill 文档
Chrome DevTools Agent Skill
Browser automation via Puppeteer scripts with persistent sessions. All scripts output JSON.
â ï¸ MUST READ References
IMPORTANT: You MUST read these reference files for complete protocol. Do NOT skip.
- â ï¸ MUST READ
references/devtools-patterns.mdâ ARIA, screenshots, console, custom scripts - â ï¸ MUST READ
references/cdp-domains.mdâ CDP domain reference - â ï¸ MUST READ
references/puppeteer-reference.mdâ Puppeteer API reference - â ï¸ MUST READ
references/performance-guide.mdâ Performance analysis guide - â ï¸ MUST READ
scripts/README.mdâ Script options reference
Choosing Your Approach
| Scenario | Approach |
|---|---|
| Source-available sites | Read source code first, write selectors directly |
| Unknown layouts | Use aria-snapshot.js for semantic discovery |
| Visual inspection | Take screenshots to verify rendering |
| Debug issues | Collect console logs, analyze with session storage |
Quick Start
cd .claude/skills/chrome-devtools/scripts
npm install
node navigate.js --url https://example.com
# Headless on Linux/WSL/CI; headed on macOS/Windows
# Linux/WSL: Run ./install-deps.sh first for Chrome system libraries
Session Persistence
Browser state persists via .browser-session.json. Scripts disconnect but keep browser running.
node navigate.js --url https://example.com/login
node fill.js --selector "#email" --value "user@example.com"
node click.js --selector "button[type=submit]"
node navigate.js --url about:blank --close true # Close when done
Available Scripts
All in .claude/skills/chrome-devtools/scripts/:
| Script | Purpose |
|---|---|
navigate.js |
Navigate to URLs |
screenshot.js |
Capture screenshots (auto-compress >5MB) |
click.js |
Click elements |
fill.js |
Fill form fields |
evaluate.js |
Execute JS in page context |
snapshot.js |
Extract interactive elements (JSON) |
aria-snapshot.js |
Get ARIA accessibility tree (YAML with refs) |
select-ref.js |
Interact with elements by ARIA ref |
console.js |
Monitor console messages/errors |
network.js |
Track HTTP requests/responses |
performance.js |
Measure Core Web Vitals |
Script Options (All scripts)
--headless false– Show browser window--close true– Close browser completely--timeout 30000– Set timeout (ms)--wait-until networkidle2– Wait strategy
Common Patterns
# Web scraping
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'
# Form automation
node fill.js --selector "#search" --value "query"
node click.js --selector "button[type=submit]"
# Performance
node performance.js --url https://example.com | jq '.vitals'
Local HTML Files
Never use file://. Serve via local server: npx serve ./dist -p 3000 &
Troubleshooting
| Error | Solution |
|---|---|
Cannot find package 'puppeteer' |
Run npm install in scripts directory |
libnss3.so missing (Linux) |
Run ./install-deps.sh |
| Element not found | Use snapshot.js to find correct selector |
| Script hangs | Use --timeout 60000 or --wait-until load |
| Screenshot >5MB | Auto-compressed; use --max-size 3 for lower |
| Session stale | Delete .browser-session.json and retry |
IMPORTANT Task Planning Notes
- Always plan and break many small todo tasks
- Always add a final review todo task to review the works done at the end to find any fix or enhancement needed