Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
The command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
File Explorer
26 files
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview
name
chrome-devtools
description
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.
license
Apache-2.0
Chrome DevTools Agent Skill
Browser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.
Quick Start
CRITICAL: Always check pwd before running scripts.
Installation
Step 1: Install System Dependencies (Linux/WSL only)
On Linux/WSL, Chrome requires system libraries. Install them first:
pwd# Should show current working directorycd .claude/skills/chrome-devtools/scripts
./install-deps.sh # Auto-detects OS and installs required libs
All scripts are in .claude/skills/chrome-devtools/scripts/
CRITICAL: Always check pwd before running scripts.
Script Usage
./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
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
Usage Patterns
Single Command
pwd# Should show current working directorycd .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.
Automatic Image Compression
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:
# 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
Execution Protocol
Working Directory Verification
BEFORE executing any script:
Check current working directory with pwd
Verify in .claude/skills/chrome-devtools/scripts/ directory
If wrong directory, cd to correct location
Use absolute paths for all output files
Example:
pwd# Should show: .../chrome-devtools/scripts# If wrong:cd .claude/skills/chrome-devtools/scripts
Output Validation
AFTER screenshot/capture operations:
Verify file created with ls -lh <output-path>
Read screenshot using Read tool to confirm content
Check JSON output for success:true
Report file size and compression status
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
❌ 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
