Browser automation, debugging, and performance analysis via executable Puppeteer CLI scripts that output JSON — navigate, screenshot, fill forms, monitor console/network, and measure Core Web Vitals.
---
name: Chrome DevTools (Puppeteer)
description: Browser automation, debugging, and performance analysis using executable Puppeteer CLI scripts that output JSON. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.
---
Drive Chrome via standalone Puppeteer scripts; every script emits JSON for easy parsing.
## How to use
1. Always check `pwd` first, then `cd` into the skill's `scripts/` directory.
2. Install deps: on Linux/WSL run `./install-deps.sh` for system libraries; everywhere run `npm install`. Optionally install ImageMagick so screenshots over 5MB auto-compress.
3. Core automation scripts: `navigate.js`, `screenshot.js`, `click.js`, `fill.js`, `evaluate.js` (run JS in page context).
4. Analysis scripts: `snapshot.js` (interactive elements), `console.js` (messages/errors), `network.js` (HTTP traffic), `performance.js` (Core Web Vitals + traces).
5. Example: `node screenshot.js --url https://example.com --output ./docs/screenshots/page.png` — save screenshots under `./docs/screenshots`.
Named tool: Puppeteer CLI scripts. Screenshots auto-compress above 5MB when ImageMagick is present.
Full skill & source: https://github.com/mrgoonie/claudekit-skills/tree/main/.claude/skills/chrome-devtoolsSign in to rate and review this skill.
No reviews yet. Be the first to review this skill.