chrome-devtools

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts with JSON output.

• Automate browser navigation, form filling, and element interactions
• Capture screenshots and analyze performance metrics
• Monitor network traffic and console logs
• Detect and debug element selectors and browser errors
• Generate compressed screenshots under 5MB for API compatibility

• All scripts output JSON for easy parsing
• Automatic screenshot compression (auto or configurable) to stay under 5MB
• Supports full page and element screenshots with metadata
• Tracks network requests, console errors, and Core Web Vitals
• Reuses browser context across chained commands
• Built-in error recovery via snapshot.js for selector discovery

1. 1.Always verify working directory with `pwd` before running scripts
2. 2.Run scripts from `.claude/skills/chrome-devtools/scripts/`
3. 3.Save screenshots to `./docs/screenshots/` directory
4. 4.Use `snapshot.js` to discover correct element selectors
5. 5.Validate output files with `ls -lh` and visual inspection
6. 6.Parse JSON output with `jq` for specific fields
7. 7.Chain commands to reuse browser state
8. 8.Install ImageMagick for automatic compression (optional but recommended)