메뉴
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.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/mrgoonie/xxxnaper --skill chrome-devtools명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| 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 |
Browser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.
On Linux/WSL, Chrome requires system libraries. Install them first:
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)
npm install # Installs puppeteer, debug, yargs
node navigate.js --url https://example.com
# Output: {"success": true, "url": "https://example.com", "title": "Example Domain"}
All scripts are in .claude/skills/chrome-devtools/scripts/
./scripts/README.mdnavigate.js - Navigate to URLsscreenshot.js - Capture screenshots (full page or element)click.js - Click elementsfill.js - Fill form fieldsevaluate.js - Execute JavaScript in page contextsnapshot.js - Extract interactive elements with metadataconsole.js - Monitor console messages/errorsnetwork.js - Track HTTP requests/responsesperformance.js - Measure Core Web Vitals + record tracescd .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.
# 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]"
# 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
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'
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
node fill.js --url https://example.com --selector "#search" --value "query" --close false
node click.js --selector "button[type=submit]"
node console.js --url https://example.com --types error,warn --duration 5000 | jq '.messageCount'
All scripts support:
--headless false - Show browser window--close false - Keep browser open for chaining--timeout 30000 - Set timeout (milliseconds)--wait-until networkidle2 - Wait strategySee ./scripts/README.md for complete options.
All scripts output JSON to stdout:
{
"success": true,
"url": "https://example.com",
... // script-specific data
}
Errors go to stderr:
{
"success": false,
"error": "Error message"
}
Use snapshot.js to discover selectors:
node snapshot.js --url https://example.com | jq '.elements[] | {tagName, text, selector}'
"Cannot find package 'puppeteer'"
npm install in the scripts directory"error while loading shared libraries: libnss3.so" (Linux/WSL)
./install-deps.sh in scripts directorysudo 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"
ls ~/.cache/puppeteernpm rebuild then npm installChrome not found
npm installnpx puppeteer browsers install chromeElement not found
node snapshot.js --url <url>Script hangs
--timeout 60000--wait-until load or --wait-until domcontentloadedBlank screenshot
--wait-until networkidle2--timeout 30000Permission denied on scripts
chmod +x *.shDetailed guides available in ./references/:
Create custom scripts using shared library:
import { getBrowser, getPage, closeBrowser, outputJSON } from './lib/browser.js';
// Your automation logic
const client = await page.createCDPSession();
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
See reference documentation for advanced patterns and complete API coverage.