Help us improve
Share bugs, ideas, or general feedback.
From chrome-devtools
Runs Puppeteer CLI scripts for browser automation including screenshots, performance analysis, network monitoring, web scraping, form filling, JS evaluation, and debugging errors.
npx claudepluginhub secondsky/claude-skills --plugin chrome-devtoolsHow this skill is triggered — by the user, by Claude, or both
Slash command
/chrome-devtools:chrome-devtoolsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Browser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.
Automates browser tasks via Chrome DevTools CLI: take snapshots, click, fill, navigate, and more from the terminal.
CLI for AI agents to automate browser tasks: open sites, snapshot DOM refs, fill forms, click elements, screenshot, extract data, test web apps.
Automates headless browser via agent-browser CLI: open/navigate sites, snapshot interactive elements for refs, click/fill forms, verify UI, scrape data, e2e test web apps.
Share bugs, ideas, or general feedback.
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)
# Preferred: Using bun (faster)
bun install # Installs puppeteer, debug, yargs
# Alternative: Using npm
npm install
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).
bun 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
bun 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
bun screenshot.js --url https://example.com --output page.png
# Custom size threshold (e.g., 3MB)
bun screenshot.js --url https://example.com --output page.png --max-size 3
# Disable compression
bun 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
bun navigate.js --url https://example.com/login --close false
bun fill.js --selector "#email" --value "user@example.com" --close false
bun fill.js --selector "#password" --value "secret" --close false
bun click.js --selector "button[type=submit]"
# Extract specific fields with jq
bun performance.js --url https://example.com | jq '.vitals.LCP'
# Save to file
bun 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:
bun 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
If script fails:
Example:
# CSS selector fails
bun click.js --url https://example.com --selector ".btn-submit"
# Error: waiting for selector ".btn-submit" failed
# Discover correct selector
bun snapshot.js --url https://example.com | jq '.elements[] | select(.tagName=="BUTTON")'
# Try XPath
bun click.js --url https://example.com --selector "//button[contains(text(),'Submit')]"
All scripts support:
--headless false - Show browser window (default: true)--close false - Keep browser open after script--timeout 30000 - Timeout in milliseconds (default: 30000)--help - Show script-specific helpBrowser fails to launch (Linux):
./install-deps.sh # Install missing system libraries
Large screenshots:
--max-size to set custom thresholdElement not found:
snapshot.js first to discover selectorsScript not found:
bun /path/to/scripts/navigate.js