# Chrome Devtools

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

- Repository: https://github.com/mrgoonie/claudekit-skills (2229 stars)
- Category: Testing
- License: Apache-2.0
- Last updated: 2026-04-03
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add mrgoonie/claudekit-skills --skill chrome-devtools -g -a claude-code -y`
Codex: `npx skills add mrgoonie/claudekit-skills --skill chrome-devtools -g -a codex -y`
Cursor: `npx skills add mrgoonie/claudekit-skills --skill chrome-devtools -g -a cursor -y`
Gemini CLI: `npx skills add mrgoonie/claudekit-skills --skill chrome-devtools -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add mrgoonie/claudekit-skills`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

```bash
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)

#### Step 2: Install Node Dependencies

```bash
npm install  # Installs puppeteer, debug, yargs
```

#### Step 3: Install ImageMagick (Optional, Recommended)

ImageMagick enables automatic screenshot compression to keep files under 5MB:

**macOS:**
```bash
brew install imagemagick
```

**Ubuntu/Debian/WSL:**
```bash
sudo apt-get install imagemagick
```

**Verify:**
```bash
magick -version  # or: convert -version
```

Without ImageMagick, screenshots >5MB will not be compressed (may fail to load in Gemini/Claude).

### Test
```bash
node navigate.js --url https://example.com
# Output: {"success": true, "url": "https://example.com", "title": "Example Domain"}
```

## 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

The rest: https://github.com/mrgoonie/claudekit-skills/blob/HEAD/.claude/skills/chrome-devtools/SKILL.md