Agent skill

Chrome Devtools

by einverne in einverne/dotfiles

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

Apache-2.0Auto-check: notesData & Analytics

Install Chrome Devtools

skills CLI
$ npx skills add einverne/dotfiles --skill chrome-devtools -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install einverne/dotfiles chrome-devtools --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/einverne/dotfiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/claude/skills/chrome-devtools .claude/skills/chrome-devtools && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
chrome-devtools
GitHub stars
121
Used in
1 other repo
Token cost
~1.6k tokens
SKILL.md length
396 words
Files
20 (incl. scripts, references)
Skills in repo
39
Repo updated
First seen
Licence
Apache-2.0

At a glance

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

  • Works in 2 steps: Install System Dependencies (Linux/WSL… → Install Node Dependencies
  • Automating browsers
  • SKILL.md covers Quick Start, Available Scripts, Usage Patterns and Common Workflows, plus 7 more sections
  • Runs JavaScript and Shell scripts from its folder; calls node, npm and jq

What it does

Chrome Devtools is an agent skill from einverne/dotfiles. 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.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files, including scripts and reference files (for example `references/cdp-domains.md`, `references/performance-guide.md` and `references/puppeteer-reference.md`).

It sits in Data & Analytics, covering Browser testing, Browser automation and Web scraping. It works with Chrome DevTools, Puppeteer, JavaScript and Linux. The repository describes itself as: my personal dotfiles managed by dotbot, zinit. The licence is Apache-2.0.

When your agent uses it

  • Automating browsers
  • Taking screenshots
  • Analyzing performance
  • Monitoring network traffic

Example prompts

  • “/chrome-devtools”

Requirements

  • Node.js
  • A Bash shell

Workflow steps

2 steps, taken from the step headings in SKILL.md.

  1. Install System Dependencies (Linux/WSL only)
  2. Install Node Dependencies

What it can do on your machine

Read from SKILL.md and the folder at commit c6c0686. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 14 files in scripts/ (JavaScript and Shell, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • npm
    • jq
    • apt-get
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • pptr.dev
    • chromedevtools.github.io

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Chrome Devtools loads about 1.6k tokens when it runs, and up to ~16k if it reads all its reference files. Until then it costs about 64 tokens; SKILL.md has 396 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~64
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~16k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteRuns commands with sudoSKILL.md:167
    - Manual install: `sudo apt-get install -y libnss3 libnspr4 libasound2t64 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from einverne/dotfiles at commit c6c0686, republished under its Apache-2.0 licence (© einverne). 396 words, ~1,562 tokens.

Download SKILL.mdSave it as .claude/skills/chrome-devtools/SKILL.md (or your agent's skills folder). This skill also uses 19 other files; get the full folder from GitHub.
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

Chrome DevTools Agent Skill

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

Quick Start

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

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

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

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
bash
cd .claude/skills/chrome-devtools/scripts
node screenshot.js --url https://example.com --output ./docs/screenshots/page.png

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

Chain Commands (reuse browser)
bash
# Keep browser open with --close false
node navigate.js --url https://example.com/login --close false
node fill.js --selector "#email" --value "user@example.com" --close false
node fill.js --selector "#password" --value "secret" --close false
node click.js --selector "button[type=submit]"
Parse JSON Output
bash
# Extract specific fields with jq
node performance.js --url https://example.com | jq '.vitals.LCP'

# Save to file
node network.js --url https://example.com --output /tmp/requests.json

Common Workflows

Web Scraping
bash
node evaluate.js --url https://example.com --script "
  Array.from(document.querySelectorAll('.item')).map(el => ({
    title: el.querySelector('h2')?.textContent,
    link: el.querySelector('a')?.href
  }))
" | jq '.result'
Performance Testing
bash
PERF=$(node performance.js --url https://example.com)
LCP=$(echo $PERF | jq '.vitals.LCP')
if (( $(echo "$LCP < 2500" | bc -l) )); then
  echo "✓ LCP passed: ${LCP}ms"
else
  echo "✗ LCP failed: ${LCP}ms"
fi
Form Automation
bash
node fill.js --url https://example.com --selector "#search" --value "query" --close false
node click.js --selector "button[type=submit]"
Error Monitoring
bash
node console.js --url https://example.com --types error,warn --duration 5000 | jq '.messageCount'

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:

json
{
  "success": true,
  "url": "https://example.com",
  ... // script-specific data
}

Errors go to stderr:

json
{
  "success": false,
  "error": "Error message"
}

Finding Elements

Use snapshot.js to discover selectors:

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

Troubleshooting

Show full SKILL.md (200 more words)Show less
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

Reference Documentation

Detailed guides available in ./references/:

Advanced Usage

Custom Scripts

Create custom scripts using shared library:

javascript
import { getBrowser, getPage, closeBrowser, outputJSON } from './lib/browser.js';
// Your automation logic
Direct CDP Access
javascript
const client = await page.createCDPSession();
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });

See reference documentation for advanced patterns and complete API coverage.

External Resources

© einverne, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 19 other files (scripts, references) in claude/skills/chrome-devtools of einverne/dotfiles.

  • SKILL.md
  • references/cdp-domains.md
  • references/performance-guide.md
  • references/puppeteer-reference.md
  • scripts/.gitignore
  • scripts/README.md
  • scripts/click.js
  • scripts/console.js
  • scripts/evaluate.js
  • scripts/fill.js
  • scripts/install-deps.sh
  • scripts/install.sh
  • scripts/lib/browser.js
  • scripts/navigate.js
  • scripts/network.js
  • scripts/package-lock.json
  • scripts/package.json
  • scripts/performance.js
  • … and 2 more

Open the folder on GitHubat commit c6c0686

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in einverne/dotfiles, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Chrome Devtools next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Chrome Devtools compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Chrome Devtools this skilleinverne/dotfiles1211 repos~1.6kAutomated safety check: NotesApache-2.0
Agent Browseroxylabs/agent-skills875—~3kAutomated safety check: PassMIT
Anti Detect Browserantibrow/anti-detect-browser-skills914—~9.8kAutomated safety check: WarnMIT
Agent Browser Automationwithkynam/vibecode-pro-max-kit1.1k—~2.6kAutomated safety check: PassApache-2.0
Browserjulianromli/opencode-template144—~475Automated safety check: PassNone
Go Rod Masteraiskillstore/marketplace4304 repos~4.5kAutomated safety check: PassNone

Similar skills

  • Agent Browser

    oxylabs/agent-skills

    Connects to Oxylabs remote agent browsers over the Chrome DevTools Protocol (CDP) with Playwright or Puppeteer.

    875 GitHub stars~3k tokensUpdated 7 days ago
    Productivity & AutomationAuto-check passed
  • Anti Detect Browser

    antibrow/anti-detect-browser-skills

    Drive Chromium from standard Playwright APIs with a real-device fingerprint applied in the kernel, one persistent isolated profile per identity, and a per-profile proxy whose exit IP sets timezone…

    914 GitHub stars~9.8k tokensUpdated 1 mo ago
    Testing & QAAuto-check: warnings
  • Agent Browser Automation

    withkynam/vibecode-pro-max-kit

    Drives a browser through the agent-browser CLI, using compact snapshots with element refs to keep context small in long sessions, plus video recording and cloud browsers.

    1.1k GitHub stars~2.6k tokensUpdated 3 mo ago
    Productivity & AutomationAuto-check passed
  • Browser

    julianromli/opencode-template

    Minimal Chrome DevTools Protocol tools for browser automation and scraping.

    144 GitHub stars~475 tokensUpdated 8 mo ago
    Productivity & AutomationAuto-check passed
  • Go Rod Master

    aiskillstore/marketplace

    Comprehensive guide for browser automation and web scraping with go-rod (Chrome DevTools Protocol) including stealth anti-bot-detection patterns.

    430 GitHub starsUsed in 4 repos~4.5k tokens
    Productivity & AutomationAuto-check passed
  • Browser Tools

    981377660LMT/algorithm-study

    Interactive browser automation via Chrome DevTools Protocol.

    278 GitHub starsUsed in 1 repo~1.3k tokens
    Productivity & AutomationAuto-check passed

More from einverne/dotfiles

All 39 skills in this repo
  • DOCX

    einverne/dotfiles

    Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction.

    121 GitHub starsUsed in 34 repos~2.5k tokens
    Auto-check: notes
  • PDF

    einverne/dotfiles

    Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms.

    121 GitHub starsUsed in 46 repos~1.8k tokens
    Auto-check passed
  • Gemini Audio

    einverne/dotfiles

    Guide for implementing Google Gemini API audio capabilities - analyze audio with transcription, summarization, and understanding (up to 9.5 hours), plus generate speech with controllable TTS.

    121 GitHub starsUsed in 1 repo~2k tokens
    Auto-check: notes
  • Gemini Image Gen

    einverne/dotfiles

    Guide for implementing Google Gemini API image generation - create high-quality images from text prompts using gemini-2.5-flash-image model.

    121 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check: notes
  • Gemini Vision

    einverne/dotfiles

    Guide for implementing Google Gemini API image understanding - analyze images with captioning, classification, visual QA, object detection, segmentation, and multi-image comparison.

    121 GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check: notes
  • PPTX

    einverne/dotfiles

    Presentation creation, editing, and analysis. An agent skill from einverne/dotfiles.

    121 GitHub starsUsed in 37 repos~6.4k tokens
    Auto-check: notes

Questions about Chrome Devtools

What does Chrome Devtools do?

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Chrome Devtools is an agent skill from einverne/dotfiles. Browser automation, debugging, and performance analysis using Puppeteer CLI scripts.

When should I use Chrome Devtools?

Chrome Devtools fits situations like: automating browsers; taking screenshots; analyzing performance; monitoring network traffic.

How do I install Chrome Devtools in Claude Code?

Run `npx skills add einverne/dotfiles --skill chrome-devtools -a claude-code`. Or copy the skill folder (claude/skills/chrome-devtools in einverne/dotfiles) into .claude/skills/chrome-devtools in your project. Claude Code loads it when a task matches its description.

How do I install Chrome Devtools in Codex?

Run `npx skills add einverne/dotfiles --skill chrome-devtools -a codex`. Or copy the skill folder (claude/skills/chrome-devtools in einverne/dotfiles) into .agents/skills/chrome-devtools in your project. Codex loads it when a task matches its description.

Can I use Chrome Devtools in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add einverne/dotfiles --skill chrome-devtools -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chrome-devtools, .gemini/skills/chrome-devtools, .github/skills/chrome-devtools and .opencode/skills/chrome-devtools in your project.

What does Chrome Devtools need to run?

Going by SKILL.md and its folder, Chrome Devtools needs JavaScript and a shell for the scripts in its folder and the command-line tools its instructions call (node, npm, jq, apt-get and npx). Our summary lists: Node.js; A Bash shell.

Does Chrome Devtools access the network?

SKILL.md names 2 domains. As links in the text: pptr.dev and chromedevtools.github.io. This is read from the text; nothing was executed.

Is Chrome Devtools safe to install?

Our automated static check of SKILL.md found notes only (runs commands with sudo), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Chrome Devtools use?

Chrome Devtools is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Chrome Devtools use?

About 1.6k tokens (SKILL.md is roughly 6.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 15k tokens, read only when the agent opens those files.

What are the alternatives to Chrome Devtools?

Skills that share tags, products or a category with Chrome Devtools: Agent Browser (oxylabs/agent-skills, 875 stars), Anti Detect Browser (antibrow/anti-detect-browser-skills, 914 stars), Agent Browser Automation (withkynam/vibecode-pro-max-kit, 1.1k stars) and Browser (julianromli/opencode-template, 144 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chrome Devtools?

einverne (a GitHub user) maintains it in einverne/dotfiles, which has 121 GitHub stars. The repository holds 39 skills in this directory. The repository was last updated on September 9, 2026.

Source: einverne/dotfiles on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.