Workflow·Web, Search & Scraping

Chrome DevTools

Name: Chrome DevTools
Author: mrgoonie

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

You say

Install this skill Read the source first Free Written by mrgoonie · unverified publisher

Context cost: 43.3k tokensestimated from the bundle, loaded when it triggers
Bundle: 24 files · 173.0 kB16 scripts among them — read before you run
Licence: Apache-2.0free to use
Last change: —no release on file
Servers it uses: Noneruns standalone

What it does

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.

Installed, it changes the agent in these ways.

What this skill changes about the agent is not written down here yet. The listing was collected from its source, and the description is in its own SKILL.md.

Workflow

Runs a procedure end to end.

browserautomationpuppeteerdebuggingperformance

Filed under

Web, Search & Scraping

The skill itself

This is the whole product. A skill is instructions the model reads, so there is nothing behind the listing you cannot see first — the front matter loads with every session, and the body below it loads when the skill triggers.

SKILL.md10.4 kB · 361 lines

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

7# Chrome DevTools Agent Skill

9Browser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.

11## Quick Start

13**CRITICAL**: Always check pwd before running scripts.

15### Installation

17#### Step 1: Install System Dependencies (Linux/WSL only)

19On Linux/WSL, Chrome requires system libraries. Install them first:

21```bash

22pwd # Should show current working directory

23cd .claude/skills/chrome-devtools/scripts

24./install-deps.sh # Auto-detects OS and installs required libs

25```

27Supports: Ubuntu, Debian, Fedora, RHEL, CentOS, Arch, Manjaro

29**macOS/Windows**: Skip this step (dependencies bundled with Chrome)

31#### Step 2: Install Node Dependencies

33```bash

34npm install # Installs puppeteer, debug, yargs

35```

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

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

41**macOS:**

42```bash

43brew install imagemagick

44```

46**Ubuntu/Debian/WSL:**

47```bash

48sudo apt-get install imagemagick

49```

51**Verify:**

52```bash

53magick -version # or: convert -version

54```

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

58### Test

59```bash

60node navigate.js --url https://example.com

61# Output: {"success": true, "url": "https://example.com", "title": "Example Domain"}

62```

64## Available Scripts

66All scripts are in .claude/skills/chrome-devtools/scripts/

68**CRITICAL**: Always check pwd before running scripts.

70### Script Usage

71- ./scripts/README.md

73### Core Automation

74- navigate.js - Navigate to URLs

75- screenshot.js - Capture screenshots (full page or element)

76- click.js - Click elements

77- fill.js - Fill form fields

78- evaluate.js - Execute JavaScript in page context

80### Analysis & Monitoring

81- snapshot.js - Extract interactive elements with metadata

82- console.js - Monitor console messages/errors

83- network.js - Track HTTP requests/responses

84- performance.js - Measure Core Web Vitals + record traces

86## Usage Patterns

88### Single Command

89```bash

90pwd # Should show current working directory

91cd .claude/skills/chrome-devtools/scripts

92node screenshot.js --url https://example.com --output ./docs/screenshots/page.png

93```

94**Important**: Always save screenshots to ./docs/screenshots directory.

96### Automatic Image Compression

97Screenshots are **automatically compressed** if they exceed 5MB to ensure compatibility with Gemini API and Claude Code (which have 5MB limits). This uses ImageMagick internally:

99```bash

100# Default: auto-compress if >5MB

101node screenshot.js --url https://example.com --output page.png

102

103# Custom size threshold (e.g., 3MB)

104node screenshot.js --url https://example.com --output page.png --max-size 3

105

106# Disable compression

107node screenshot.js --url https://example.com --output page.png --no-compress

108```

109

110**Compression behavior:**

111- PNG: Resizes to 90% + quality 85 (or 75% + quality 70 if still too large)

112- JPEG: Quality 80 + progressive encoding (or quality 60 if still too large)

113- Other formats: Converted to JPEG with compression

114- Requires ImageMagick installed (see imagemagick skill)

115

116**Output includes compression info:**

117```json

118{

119 "success": true,

120 "output": "/path/to/page.png",

121 "compressed": true,

122 "originalSize": 8388608,

123 "size": 3145728,

124 "compressionRatio": "62.50%",

125 "url": "https://example.com"

126}

127```

128

129### Chain Commands (reuse browser)

130```bash

131# Keep browser open with --close false

132node navigate.js --url https://example.com/login --close false

133node fill.js --selector "#email" --value "user@example.com" --close false

134node fill.js --selector "#password" --value "secret" --close false

135node click.js --selector "button[type=submit]"

136```

137

138### Parse JSON Output

139```bash

140# Extract specific fields with jq

141node performance.js --url https://example.com | jq '.vitals.LCP'

142

143# Save to file

144node network.js --url https://example.com --output /tmp/requests.json

145```

146

147## Execution Protocol

148

149### Working Directory Verification

150

151BEFORE executing any script:

1521. Check current working directory with pwd

1532. Verify in .claude/skills/chrome-devtools/scripts/ directory

1543. If wrong directory, cd to correct location

1554. Use absolute paths for all output files

156

157Example:

158```bash

159pwd # Should show: .../chrome-devtools/scripts

160# If wrong:

161cd .claude/skills/chrome-devtools/scripts

162```

163

164### Output Validation

165

166AFTER screenshot/capture operations:

1671. Verify file created with ls -lh <output-path>

1682. Read screenshot using Read tool to confirm content

1693. Check JSON output for success:true

1704. Report file size and compression status

171

172Example:

173```bash

174node screenshot.js --url https://example.com --output ./docs/screenshots/page.png

175ls -lh ./docs/screenshots/page.png # Verify file exists

176# Then use Read tool to visually inspect

177```

178

1795. Restart working directory to the project root.

180

181### Error Recovery

182

183If script fails:

1841. Check error message for selector issues

1852. Use snapshot.js to discover correct selectors

1863. Try XPath selector if CSS selector fails

1874. Verify element is visible and interactive

188

189Example:

190```bash

191# CSS selector fails

192node click.js --url https://example.com --selector ".btn-submit"

193# Error: waiting for selector ".btn-submit" failed

194

195# Discover correct selector

196node snapshot.js --url https://example.com | jq '.elements[] | select(.tagName=="BUTTON")'

197

198# Try XPath

199node click.js --url https://example.com --selector "//button[contains(text(),'Submit')]"

200```

201

202### Common Mistakes

203

204❌ Wrong working directory → output files go to wrong location

205❌ Skipping output validation → silent failures

206❌ Using complex CSS selectors without testing → selector errors

207❌ Not checking element visibility → timeout errors

208

209✅ Always verify pwd before running scripts

210✅ Always validate output after screenshots

211✅ Use snapshot.js to discover selectors

212✅ Test selectors with simple commands first

213

214## Common Workflows

215

216### Web Scraping

217```bash

218node evaluate.js --url https://example.com --script "

219 Array.from(document.querySelectorAll('.item')).map(el => ({

220 title: el.querySelector('h2')?.textContent,

221 link: el.querySelector('a')?.href

222 }))

223" | jq '.result'

224```

225

226### Performance Testing

227```bash

228PERF=$(node performance.js --url https://example.com)

229LCP=$(echo $PERF | jq '.vitals.LCP')

230if (( $(echo "$LCP < 2500" | bc -l) )); then

231 echo "✓ LCP passed: ${LCP}ms"

232else

233 echo "✗ LCP failed: ${LCP}ms"

234fi

235```

236

237### Form Automation

238```bash

239node fill.js --url https://example.com --selector "#search" --value "query" --close false

240node click.js --selector "button[type=submit]"

241```

242

243### Error Monitoring

244```bash

245node console.js --url https://example.com --types error,warn --duration 5000 | jq '.messageCount'

246```

247

248## Script Options

249

250All scripts support:

251- --headless false - Show browser window

252- --close false - Keep browser open for chaining

253- --timeout 30000 - Set timeout (milliseconds)

254- --wait-until networkidle2 - Wait strategy

255

256See ./scripts/README.md for complete options.

257

258## Output Format

259

260All scripts output JSON to stdout:

261```json

262{

263 "success": true,

264 "url": "https://example.com",

265 ... // script-specific data

266}

267```

268

269Errors go to stderr:

270```json

271{

272 "success": false,

273 "error": "Error message"

274}

275```

276

277## Finding Elements

278

279Use snapshot.js to discover selectors:

280```bash

281node snapshot.js --url https://example.com | jq '.elements[] | {tagName, text, selector}'

282```

283

284## Troubleshooting

285

286### Common Errors

287

288**"Cannot find package 'puppeteer'"**

289- Run: npm install in the scripts directory

290

291**"error while loading shared libraries: libnss3.so"** (Linux/WSL)

292- Missing system dependencies

293- Fix: Run ./install-deps.sh in scripts directory

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

295

296**"Failed to launch the browser process"**

297- Check system dependencies installed (Linux/WSL)

298- Verify Chrome downloaded: ls ~/.cache/puppeteer

299- Try: npm rebuild then npm install

300

301**Chrome not found**

302- Puppeteer auto-downloads Chrome during npm install

303- If failed, manually trigger: npx puppeteer browsers install chrome

304

305### Script Issues

306

307**Element not found**

308- Get snapshot first to find correct selector: node snapshot.js --url <url>

309

310**Script hangs**

311- Increase timeout: --timeout 60000

312- Change wait strategy: --wait-until load or --wait-until domcontentloaded

313

314**Blank screenshot**

315- Wait for page load: --wait-until networkidle2

316- Increase timeout: --timeout 30000

317

318**Permission denied on scripts**

319- Make executable: chmod +x *.sh

320

321**Screenshot too large (>5MB)**

322- Install ImageMagick for automatic compression

323- Manually set lower threshold: --max-size 3

324- Use JPEG format instead of PNG: --format jpeg --quality 80

325- Capture specific element instead of full page: --selector .main-content

326

327**Compression not working**

328- Verify ImageMagick installed: magick -version or convert -version

329- Check file was actually compressed in output JSON: "compressed": true

330- For very large pages, use --selector to capture only needed area

331

332## Reference Documentation

333

334Detailed guides available in ./references/:

335- [CDP Domains Reference](./references/cdp-domains.md) - 47 Chrome DevTools Protocol domains

336- [Puppeteer Quick Reference](./references/puppeteer-reference.md) - Complete Puppeteer API patterns

337- [Performance Analysis Guide](./references/performance-guide.md) - Core Web Vitals optimization

338

339## Advanced Usage

340

341### Custom Scripts

342Create custom scripts using shared library:

343```javascript

344import { getBrowser, getPage, closeBrowser, outputJSON } from './lib/browser.js';

345// Your automation logic

346```

347

348### Direct CDP Access

349```javascript

350const client = await page.createCDPSession();

351await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });

352```

353

354See reference documentation for advanced patterns and complete API coverage.

355

356## External Resources

357

358- [Puppeteer Documentation](https://pptr.dev/)

359- [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)

360- [Scripts README](./scripts/README.md)

361

In the file

SKILL.md1,317 words

Files24

LicenceApache-2.0

Why you can read it

Nothing in a skill executes. The client loads the text and the model follows it, so a skill can be audited the way a runbook is — by reading it.

What it costs in context

Skills are not billed by the call. They are paid for in context: every token the instructions occupy is a token your code, your diff and your conversation cannot use. Here is what this one takes and when it takes it.

≈80

always loaded

The name and description, so the model knows the skill exists and when to reach for it.

43,170

on trigger

The instruction body and 23 supporting files, read only when the skill fires.

21.6%

of a 200k window

Ten skills this size would take about 216% of the window before you open a file.

050k100k150k200k context window

43.3k tokens, estimated from the bundle at four bytes to the token, held for the rest of the session once it triggers. Heavy. Teams tend to install this one per project rather than globally, and load it only when the job comes up.

Servers bill, skills cost

A server charges by the month. A skill charges once per session, in context, and then keeps charging it for as long as the session lives.

Before and after

The same question, put to the same model twice: once as it comes, and once with these instructions loaded.

No worked example has been published for this skill yet.

Adoption

Installsnone yet

Ratingno reviews yet

The procedure it runs

The procedure has not been published here. It is in the skill’s own SKILL.md, which its author has not sent to the marketplace yet.

Prose, not code

These steps are written for a model to follow, not executed by a runtime. It can still be told to skip one, and it will say so when it does.

Servers it uses

None. This skill calls no MCP servers at all.

Everything it needs is in the instructions, so it works in a project with nothing connected — the model reads the file and changes how it works with what it can already reach.

It writes no files and reaches no network. All it changes is how the model reasons and writes.

What it asks for

Writes filesno

Network accessno

Read from the allowed-tools line of this skill’s own SKILL.md. A skill grants no permissions of its own — it can only ask for tools your client already has.

What it will not do

Every skill is narrow, and the useful ones say where they stop. These are the jobs this one is the wrong tool for.

What this skill is not for has not been published here. Nothing is implied by that: it is a section the author has not filled in.

If this is not it

32 other skills in Web, Search & Scraping

What is in the bundle

24 files, 173.0 kB on disk. Mostly text — the instructions the model reads — with 16 scripts in it that your client would run only if the instructions tell it to.

SKILL.md10.4 kB
references/cdp-domains.md17.8 kB
references/performance-guide.md21.6 kB
references/puppeteer-reference.md19.1 kB
scripts/PERSISTENT-BROWSER.md3.1 kB
scripts/README.md5.3 kB
scripts/click.js2.2 kB
scripts/close-persistent.js1.0 kB
scripts/console.js1.7 kB
scripts/evaluate.js1.1 kB
scripts/fill.js1.9 kB
scripts/install-deps.sh4.4 kB
scripts/install.sh2.1 kB
scripts/launch-persistent.js2.1 kB
scripts/navigate.js1.0 kB
scripts/network.js2.7 kB
scripts/package-lock.json43.2 kB
scripts/package.json0.3 kB
scripts/performance.js3.9 kB
scripts/screenshot.js6.3 kB
scripts/snapshot.js3.5 kB
scripts/__tests__/selector.test.js6.5 kB
scripts/lib/browser.js3.3 kB
scripts/lib/selector.js8.5 kB

What is not in it

A skill installs nothing and depends on nothing: it is a folder your client reads. This one carries 16 scripts beside the text, so the bundle is 24 files you can review in full before installing. The Apache-2.0 licence covers the templates and examples as well as the instructions.

Install

Installing copies the bundle into your project. Nothing runs at install time — the files sit on disk until the model reads them.

# Chrome DevTools · 43.3k tokens when loaded
npx mcprush@latest skill add mrgoonie/chrome-devtools

Writes to .claude/skills/chrome-devtools/ in the current project. Add --global to put it in your home directory instead, for every project.

Which clients pick it up on their own

A skill is a folder of text. A client with a skills folder reads it without being told; everywhere else the same text works, it is just handed to the model rather than found.

Claude Code.claude/skills/

Claude Desktop

ChatGPT

Cursor.cursor/skills/

VS Code.github/skills/

Codex CLI.agents/skills/

Gemini CLI.gemini/skills/

Grok.grok/skills/

Zed.agents/skills/

Windsurf.windsurf/skills/

Agent SDK.claude/skills/

HTTP / API

This release

Versionnot versioned

Publishedno release date on file

PriceFree

Referencemrgoonie/chrome-devtools

Versions

Its author publishes no version number, so there is nothing here to pin to: what you install is the folder as it stands today. Instructions change more often than APIs do — a skill can be rewritten entirely without anything it depends on moving.

No earlier releases have been published to the marketplace.

Pinning

Nothing to pin to: this skill carries no version number of its own. What you install is what the folder holds on the day you install it.

Reviews

—no reviews yet · no installs yet

Nobody has reviewed this skill yet. The rating is the mean of the reviews written here, so there is none until somebody writes the first.

Who can post

Only accounts that have had the skill installed for fourteen days, so a review is written after living with it rather than after reading it. Publishers may reply once.

Who wrote it

mrgoonie

Publishes on mcprush.

0 servers listed4 skills listednot claimed

Profile

Publisher

Servers0