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.

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: Supports: Ubuntu, Debian, Fedora, RHEL, CentOS, Arch, Manjaro macOS/Windows : Skip this step (dependencies bundled with Chrome) Step 2: Install Node Dependencies Step 3: Install ImageMagick (Optional, Recommended) ImageMagick enables automatic screenshot compression to keep files under 5MB: macOS: Ubuntu/Debian/WSL: Verify: Without ImageMagick, screenshots 5MB will not be compressed (may fail to load in Gemini/Claude). Test Available Scripts 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 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: Compression behavior: PNG: Resizes to 90% + quality 85 (or 75% + quality 70 if still too large) JPEG: Quality 80 + progressive encoding (or quality 60 if still too large) Other formats: Converted to JPEG with compression Requires ImageMagick installed (see imagemagick skill) Output includes compression info: Chain Commands (reuse browser) Parse JSON Output Execution Protocol Working Directory Verification BEFORE executing any script: 1. Check current working directory with pwd 2. Verify in .claude/skills/chrome devtools/scripts/ directory 3. If wrong directory, cd to correct location 4. Use absolute paths for all output files Example: Output Validation AFTER screenshot/capture operations: 1. Verify file created with ls lh <output path 2. Read screenshot using Read tool to confirm content 3. Check JSON output for success:true 4. Report file size and compression status Example: 5. Restart working directory to the project root. Error Recovery If script fails: 1. Check error message for selector issues 2. Use snapshot.js to discover correct selectors 3. Try XPath selector if CSS selector fails 4. Verify element is visible and interactive Example: Common Mistakes ❌ 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 Common Workflows Web Scraping Performance Testing Form Automation Error Monitoring Script Options All scripts support: headless false Show browser window close false Keep browser open for chaining timeout 30000 Set timeout (milliseconds) wait until networkidle2 Wait strategy See ./scripts/README.md for complete options. Output Format All scripts output JSON to stdout: Errors go to stderr: Finding Elements Use snapshot.js to discover selectors: Troubleshooting Common Errors "Cannot find package 'puppeteer'" Run: npm install in the scripts directory "error while loading shared libraries: libnss3.so" (Linux/WSL) Missing system dependencies Fix: Run ./install deps.sh in scripts directory Manual install: sudo 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" Check system dependencies installed (Linux/WSL) Verify Chrome downloaded: ls ~/.cache/puppeteer Try: npm rebuild then npm install Chrome not found Puppeteer auto downloads Chrome during npm install If failed, manually trigger: npx puppeteer browsers install chrome Script Issues Element not found Get snapshot first to find correct selector: node snapshot.js url <url Script hangs Increase timeout: timeout 60000 Change wait strategy: wait until load or wait until domcontentloaded Blank screenshot Wait for page load: wait until networkidle2 Increase timeout: timeout 30000 Permission denied on scripts Make executable: chmod +x .sh Screenshot too large ( 5MB) Install ImageMagick for automatic compression Manually set lower threshold: max size 3 Use JPEG format instead of PNG: format jpeg quality 80 Capture specific element instead of full page: selector .main content Compression not working Verify ImageMagick installed: magick version or convert version Check file was actually compressed in output JSON: "compressed": true For very large pages, use selector to capture only needed area Reference Documentation Detailed guides available in ./references/ : [CDP Domains Reference](./references/cdp domains.md) 47 Chrome DevTools Protocol domains [Puppeteer Quick Reference](./references/puppeteer reference.md) Complete Puppeteer API patterns [Performance Analysis Guide](./references/performance guide.md) Core Web Vitals optimization Advanced Usage Custom Scripts Create custom scripts using shared library: Direct CDP Access See reference documentation for advanced patterns and complete API coverage. External Resources [Puppeteer Documentation](https://pptr.dev/) [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools protocol/) [Scripts README](./scripts/README.md)

chrome-devtools