[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70F74MM6EVCW57APRB24FQ5":3,"skill-same:01M70F74MM6EVCW57APRB24FQ5":155},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":13,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M70F74MM6EVCW57APRB24FQ5","chrome-devtools",null,"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.","fel-tte\u002Frobot-forex","fel-tte","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F275266538?v=4","01M70F5WV8YHX7PTPN2Y85WVS7","01M70F5WVXP339EAPWD1MCKVMS",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"devtools","chrome","chrome devtools","for","web scraping","form","screenshots","network","analyzing","scripts","cli","puppeteer","browser","monitoring","analysis","debugging","traffic","browser automation","performance","scraping","2026-11-10 10:12:30",false,"---\nname: chrome-devtools\ndescription: 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.\nlicense: Apache-2.0\n---\n\n# Chrome DevTools Agent Skill\n\nBrowser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.\n\n## Quick Start\n\n**CRITICAL**: Always check `pwd` before running scripts.\n\n### Installation\n\n#### Step 1: Install System Dependencies (Linux\u002FWSL only)\n\nOn Linux\u002FWSL, Chrome requires system libraries. Install them first:\n\n```bash\npwd  # Should show current working directory\ncd .claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\n.\u002Finstall-deps.sh  # Auto-detects OS and installs required libs\n```\n\nSupports: Ubuntu, Debian, Fedora, RHEL, CentOS, Arch, Manjaro\n\n**macOS\u002FWindows**: Skip this step (dependencies bundled with Chrome)\n\n#### Step 2: Install Node Dependencies\n\n```bash\nnpm install  # Installs puppeteer, debug, yargs\n```\n\n#### Step 3: Install ImageMagick (Optional, Recommended)\n\nImageMagick enables automatic screenshot compression to keep files under 5MB:\n\n**macOS:**\n```bash\nbrew install imagemagick\n```\n\n**Ubuntu\u002FDebian\u002FWSL:**\n```bash\nsudo apt-get install imagemagick\n```\n\n**Verify:**\n```bash\nmagick -version  # or: convert -version\n```\n\nWithout ImageMagick, screenshots >5MB will not be compressed (may fail to load in Gemini\u002FClaude).\n\n### Test\n```bash\nnode navigate.js --url https:\u002F\u002Fexample.com\n# Output: {\"success\": true, \"url\": \"https:\u002F\u002Fexample.com\", \"title\": \"Example Domain\"}\n```\n\n## Available Scripts\n\nAll scripts are in `.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F`\n\n**CRITICAL**: Always check `pwd` before running scripts.\n\n### Script Usage\n- `.\u002Fscripts\u002FREADME.md`\n\n### Core Automation\n- `navigate.js` - Navigate to URLs\n- `screenshot.js` - Capture screenshots (full page or element)\n- `click.js` - Click elements\n- `fill.js` - Fill form fields\n- `evaluate.js` - Execute JavaScript in page context\n\n### Analysis & Monitoring\n- `snapshot.js` - Extract interactive elements with metadata\n- `console.js` - Monitor console messages\u002Ferrors\n- `network.js` - Track HTTP requests\u002Fresponses\n- `performance.js` - Measure Core Web Vitals + record traces\n\n## Usage Patterns\n\n### Single Command\n```bash\npwd  # Should show current working directory\ncd .claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\nnode screenshot.js --url https:\u002F\u002Fexample.com --output .\u002Fdocs\u002Fscreenshots\u002Fpage.png\n```\n**Important**: Always save screenshots to `.\u002Fdocs\u002Fscreenshots` directory.\n\n### Automatic Image Compression\nScreenshots are **automatically compressed** if they exceed 5MB to ensure compatibility with Gemini API and Claude Code (which have 5MB limits). This uses ImageMagick internally:\n\n```bash\n# Default: auto-compress if >5MB\nnode screenshot.js --url https:\u002F\u002Fexample.com --output page.png\n\n# Custom size threshold (e.g., 3MB)\nnode screenshot.js --url https:\u002F\u002Fexample.com --output page.png --max-size 3\n\n# Disable compression\nnode screenshot.js --url https:\u002F\u002Fexample.com --output page.png --no-compress\n```\n\n**Compression behavior:**\n- PNG: Resizes to 90% + quality 85 (or 75% + quality 70 if still too large)\n- JPEG: Quality 80 + progressive encoding (or quality 60 if still too large)\n- Other formats: Converted to JPEG with compression\n- Requires ImageMagick installed (see imagemagick skill)\n\n**Output includes compression info:**\n```json\n{\n  \"success\": true,\n  \"output\": \"\u002Fpath\u002Fto\u002Fpage.png\",\n  \"compressed\": true,\n  \"originalSize\": 8388608,\n  \"size\": 3145728,\n  \"compressionRatio\": \"62.50%\",\n  \"url\": \"https:\u002F\u002Fexample.com\"\n}\n```\n\n### Chain Commands (reuse browser)\n```bash\n# Keep browser open with --close false\nnode navigate.js --url https:\u002F\u002Fexample.com\u002Flogin --close false\nnode fill.js --selector \"#email\" --value \"user@example.com\" --close false\nnode fill.js --selector \"#password\" --value \"secret\" --close false\nnode click.js --selector \"button[type=submit]\"\n```\n\n### Parse JSON Output\n```bash\n# Extract specific fields with jq\nnode performance.js --url https:\u002F\u002Fexample.com | jq '.vitals.LCP'\n\n# Save to file\nnode network.js --url https:\u002F\u002Fexample.com --output \u002Ftmp\u002Frequests.json\n```\n\n## Execution Protocol\n\n### Working Directory Verification\n\nBEFORE executing any script:\n1. Check current working directory with `pwd`\n2. Verify in `.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F` directory\n3. If wrong directory, `cd` to correct location\n4. Use absolute paths for all output files\n\nExample:\n```bash\npwd  # Should show: ...\u002Fchrome-devtools\u002Fscripts\n# If wrong:\ncd .claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\n```\n\n### Output Validation\n\nAFTER screenshot\u002Fcapture operations:\n1. Verify file created with `ls -lh \u003Coutput-path>`\n2. Read screenshot using Read tool to confirm content\n3. Check JSON output for success:true\n4. Report file size and compression status\n\nExample:\n```bash\nnode screenshot.js --url https:\u002F\u002Fexample.com --output .\u002Fdocs\u002Fscreenshots\u002Fpage.png\nls -lh .\u002Fdocs\u002Fscreenshots\u002Fpage.png  # Verify file exists\n# Then use Read tool to visually inspect\n```\n\n5. Restart working directory to the project root.\n\n### Error Recovery\n\nIf script fails:\n1. Check error message for selector issues\n2. Use snapshot.js to discover correct selectors\n3. Try XPath selector if CSS selector fails\n4. Verify element is visible and interactive\n\nExample:\n```bash\n# CSS selector fails\nnode click.js --url https:\u002F\u002Fexample.com --selector \".btn-submit\"\n# Error: waiting for selector \".btn-submit\" failed\n\n# Discover correct selector\nnode snapshot.js --url https:\u002F\u002Fexample.com | jq '.elements[] | select(.tagName==\"BUTTON\")'\n\n# Try XPath\nnode click.js --url https:\u002F\u002Fexample.com --selector \"\u002F\u002Fbutton[contains(text(),'Submit')]\"\n```\n\n### Common Mistakes\n\n❌ Wrong working directory → output files go to wrong location\n❌ Skipping output validation → silent failures\n❌ Using complex CSS selectors without testing → selector errors\n❌ Not checking element visibility → timeout errors\n\n✅ Always verify `pwd` before running scripts\n✅ Always validate output after screenshots\n✅ Use snapshot.js to discover selectors\n✅ Test selectors with simple commands first\n\n## Common Workflows\n\n### Web Scraping\n```bash\nnode evaluate.js --url https:\u002F\u002Fexample.com --script \"\n  Array.from(document.querySelectorAll('.item')).map(el => ({\n    title: el.querySelector('h2')?.textContent,\n    link: el.querySelector('a')?.href\n  }))\n\" | jq '.result'\n```\n\n### Performance Testing\n```bash\nPERF=$(node performance.js --url https:\u002F\u002Fexample.com)\nLCP=$(echo $PERF | jq '.vitals.LCP')\nif (( $(echo \"$LCP \u003C 2500\" | bc -l) )); then\n  echo \"✓ LCP passed: ${LCP}ms\"\nelse\n  echo \"✗ LCP failed: ${LCP}ms\"\nfi\n```\n\n### Form Automation\n```bash\nnode fill.js --url https:\u002F\u002Fexample.com --selector \"#search\" --value \"query\" --close false\nnode click.js --selector \"button[type=submit]\"\n```\n\n### Error Monitoring\n```bash\nnode console.js --url https:\u002F\u002Fexample.com --types error,warn --duration 5000 | jq '.messageCount'\n```\n\n## Script Options\n\nAll scripts support:\n- `--headless false` - Show browser window\n- `--close false` - Keep browser open for chaining\n- `--timeout 30000` - Set timeout (milliseconds)\n- `--wait-until networkidle2` - Wait strategy\n\nSee `.\u002Fscripts\u002FREADME.md` for complete options.\n\n## Output Format\n\nAll scripts output JSON to stdout:\n```json\n{\n  \"success\": true,\n  \"url\": \"https:\u002F\u002Fexample.com\",\n  ... \u002F\u002F script-specific data\n}\n```\n\nErrors go to stderr:\n```json\n{\n  \"success\": false,\n  \"error\": \"Error message\"\n}\n```\n\n## Finding Elements\n\nUse `snapshot.js` to discover selectors:\n```bash\nnode snapshot.js --url https:\u002F\u002Fexample.com | jq '.elements[] | {tagName, text, selector}'\n```\n\n## Troubleshooting\n\n### Common Errors\n\n**\"Cannot find package 'puppeteer'\"**\n- Run: `npm install` in the scripts directory\n\n**\"error while loading shared libraries: libnss3.so\"** (Linux\u002FWSL)\n- Missing system dependencies\n- Fix: Run `.\u002Finstall-deps.sh` in scripts directory\n- 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`\n\n**\"Failed to launch the browser process\"**\n- Check system dependencies installed (Linux\u002FWSL)\n- Verify Chrome downloaded: `ls ~\u002F.cache\u002Fpuppeteer`\n- Try: `npm rebuild` then `npm install`\n\n**Chrome not found**\n- Puppeteer auto-downloads Chrome during `npm install`\n- If failed, manually trigger: `npx puppeteer browsers install chrome`\n\n### Script Issues\n\n**Element not found**\n- Get snapshot first to find correct selector: `node snapshot.js --url \u003Curl>`\n\n**Script hangs**\n- Increase timeout: `--timeout 60000`\n- Change wait strategy: `--wait-until load` or `--wait-until domcontentloaded`\n\n**Blank screenshot**\n- Wait for page load: `--wait-until networkidle2`\n- Increase timeout: `--timeout 30000`\n\n**Permission denied on scripts**\n- Make executable: `chmod +x *.sh`\n\n**Screenshot too large (>5MB)**\n- Install ImageMagick for automatic compression\n- Manually set lower threshold: `--max-size 3`\n- Use JPEG format instead of PNG: `--format jpeg --quality 80`\n- Capture specific element instead of full page: `--selector .main-content`\n\n**Compression not working**\n- Verify ImageMagick installed: `magick -version` or `convert -version`\n- Check file was actually compressed in output JSON: `\"compressed\": true`\n- For very large pages, use `--selector` to capture only needed area\n\n## Reference Documentation\n\nDetailed guides available in `.\u002Freferences\u002F`:\n- [CDP Domains Reference](.\u002Freferences\u002Fcdp-domains.md) - 47 Chrome DevTools Protocol domains\n- [Puppeteer Quick Reference](.\u002Freferences\u002Fpuppeteer-reference.md) - Complete Puppeteer API patterns\n- [Performance Analysis Guide](.\u002Freferences\u002Fperformance-guide.md) - Core Web Vitals optimization\n\n## Advanced Usage\n\n### Custom Scripts\nCreate custom scripts using shared library:\n```javascript\nimport { getBrowser, getPage, closeBrowser, outputJSON } from '.\u002Flib\u002Fbrowser.js';\n\u002F\u002F Your automation logic\n```\n\n### Direct CDP Access\n```javascript\nconst client = await page.createCDPSession();\nawait client.send('Emulation.setCPUThrottlingRate', { rate: 4 });\n```\n\nSee reference documentation for advanced patterns and complete API coverage.\n\n## External Resources\n\n- [Puppeteer Documentation](https:\u002F\u002Fpptr.dev\u002F)\n- [Chrome DevTools Protocol](https:\u002F\u002Fchromedevtools.github.io\u002Fdevtools-protocol\u002F)\n- [Scripts README](.\u002Fscripts\u002FREADME.md)\n","# Chrome DevTools Agent Skill\n\nBrowser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.\n\n## Quick Start\n\n**CRITICAL**: Always check `pwd` before running scripts.\n\n### Installation\n\n#### Step 1: Install System Dependencies (Linux\u002FWSL only)\n\nOn Linux\u002FWSL, Chrome requires system libraries. Install them first:\n\n```bash\npwd  # Should show current working directory\ncd .claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\n.\u002Finstall-deps.sh  # Auto-detects OS and installs required libs\n```\n\nSupports: Ubuntu, Debian, Fedora, RHEL, CentOS, Arch, Manjaro\n\n**macOS\u002FWindows**: Skip this step (dependencies bundled with Chrome)\n\n#### Step 2: Install Node Dependencies\n\n```bash\nnpm install  # Installs puppeteer, debug, yargs\n```\n\n#### Step 3: Install ImageMagick (Optional, Recommended)\n\nImageMagick enables automatic screenshot compression to keep files under 5MB:\n\n**macOS:**\n```bash\nbrew install imagemagick\n```\n\n**Ubuntu\u002FDebian\u002FWSL:**\n```bash\nsudo apt-get install imagemagick\n```\n\n**Verify:**\n```bash\nmagick -version  # or: convert -version\n```\n\nWithout ImageMagick, screenshots >5MB will not be compressed (may fail to load in Gemini\u002FClaude).\n\n### Test\n```bash\nnode navigate.js --url https:\u002F\u002Fexample.com\n# Output: {\"success\": true, \"url\": \"https:\u002F\u002Fexample.com\", \"title\": \"Example Domain\"}\n```\n\n## Available Scripts\n\nAll scripts are in `.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F`\n\n**CRITICAL**: Always check `pwd` before running scripts.\n\n### Script Usage\n- `.\u002Fscripts\u002FREADME.md`\n\n### Core Automation\n- `navigate.js` - Navigate to URLs\n- `screenshot.js` - Capture screenshots (full page or element)\n- `click.js` - Click elements\n- `fill.js` - Fill form fields\n- `evaluate.js` - Execute JavaScript in page context\n\n### Analysis & Monitoring\n- `snapshot.js` - Extract interactive elements with metadata\n- `console.js` - Monitor console messages\u002Ferrors\n- `network.js` - Track HTTP requests\u002Fresponses\n- `performance.js` - Measure Core Web Vitals + record traces\n\n## Usage Patterns\n\n### Single Command\n```bash\npwd  # Should show current working directory\ncd .claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\nnode screenshot.js --url https:\u002F\u002Fexample.com --output .\u002Fdocs\u002Fscreenshots\u002Fpage.png\n```\n**Important**: Always save screenshots to `.\u002Fdocs\u002Fscreenshots` directory.\n\n### Automatic Image Compression\nScreenshots are **automatically compressed** if they exceed 5MB to ensure compatibility with Gemini API and Claude Code (which have 5MB limits). This uses ImageMagick internally:\n\n```bash\n# Default: auto-compress if >5MB\nnode screenshot.js --url https:\u002F\u002Fexample.com --output page.png\n\n# Custom size threshold (e.g., 3MB)\nnode screenshot.js --url https:\u002F\u002Fexample.com --output page.png --max-size 3\n\n# Disable compression\nnode screenshot.js --url https:\u002F\u002Fexample.com --output page.png --no-compress\n```\n\n**Compression behavior:**\n- PNG: Resizes to 90% + quality 85 (or 75% + quality 70 if still too large)\n- JPEG: Quality 80 + progressive encoding (or quality 60 if still too large)\n- Other formats: Converted to JPEG with compression\n- Requires ImageMagick installed (see imagemagick skill)\n\n**Output includes compression info:**\n```json\n{\n  \"success\": true,\n  \"output\": \"\u002Fpath\u002Fto\u002Fpage.png\",\n  \"compressed\": true,\n  \"originalSize\": 8388608,\n  \"size\": 3145728,\n  \"compressionRatio\": \"62.50%\",\n  \"url\": \"https:\u002F\u002Fexample.com\"\n}\n```\n\n### Chain Commands (reuse browser)\n```bash\n# Keep browser open with --close false\nnode navigate.js --url https:\u002F\u002Fexample.com\u002Flogin --close false\nnode fill.js --selector \"#email\" --value \"user@example.com\" --close false\nnode fill.js --selector \"#password\" --value \"secret\" --close false\nnode click.js --selector \"button[type=submit]\"\n```\n\n### Parse JSON Output\n```bash\n# Extract specific fields with jq\nnode performance.js --url https:\u002F\u002Fexample.com | jq '.vitals.LCP'\n\n# Save to file\nnode network.js --url https:\u002F\u002Fexample.com --output \u002Ftmp\u002Frequests.json\n```\n\n## Execution Protocol\n\n### Working Directory Verification\n\nBEFORE executing any script:\n1. Check current working directory with `pwd`\n2. Verify in `.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F` directory\n3. If wrong directory, `cd` to correct location\n4. Use absolute paths for all output files\n\nExample:\n```bash\npwd  # Should show: ...\u002Fchrome-devtools\u002Fscripts\n# If wrong:\ncd .claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\n```\n\n### Output Validation\n\nAFTER screenshot\u002Fcapture operations:\n1. Verify file created with `ls -lh \u003Coutput-path>`\n2. Read screenshot using Read tool to confirm content\n3. Check JSON output for success:true\n4. Report file size and compression status\n\nExample:\n```bash\nnode screenshot.js --url https:\u002F\u002Fexample.com --output .\u002Fdocs\u002Fscreenshots\u002Fpage.png\nls -lh .\u002Fdocs\u002Fscreenshots\u002Fpage.png  # Verify file exists\n# Then use Read tool to visually inspect\n```\n\n5. Restart working directory to the project root.\n\n### Error Recovery\n\nIf script fails:\n1. Check error message for selector issues\n2. Use snapshot.js to discover correct selectors\n3. Try XPath selector if CSS selector fails\n4. Verify element is visible and interactive\n\nExample:\n```bash\n# CSS selector fails\nnode click.js --url https:\u002F\u002Fexample.com --selector \".btn-submit\"\n# Error: waiting for selector \".btn-submit\" failed\n\n# Discover correct selector\nnode snapshot.js --url https:\u002F\u002Fexample.com | jq '.elements[] | select(.tagName==\"BUTTON\")'\n\n# Try XPath\nnode click.js --url https:\u002F\u002Fexample.com --selector \"\u002F\u002Fbutton[contains(text(),'Submit')]\"\n```\n\n### Common Mistakes\n\n❌ Wrong working directory → output files go to wrong location\n❌ Skipping output validation → silent failures\n❌ Using complex CSS selectors without testing → selector errors\n❌ Not checking element visibility → timeout errors\n\n✅ Always verify `pwd` before running scripts\n✅ Always validate output after screenshots\n✅ Use snapshot.js to discover selectors\n✅ Test selectors with simple commands first\n\n## Common Workflows\n\n### Web Scraping\n```bash\nnode evaluate.js --url https:\u002F\u002Fexample.com --script \"\n  Array.from(document.querySelectorAll('.item')).map(el => ({\n    title: el.querySelector('h2')?.textContent,\n    link: el.querySelector('a')?.href\n  }))\n\" | jq '.result'\n```\n\n### Performance Testing\n```bash\nPERF=$(node performance.js --url https:\u002F\u002Fexample.com)\nLCP=$(echo $PERF | jq '.vitals.LCP')\nif (( $(echo \"$LCP \u003C 2500\" | bc -l) )); then\n  echo \"✓ LCP passed: ${LCP}ms\"\nelse\n  echo \"✗ LCP failed: ${LCP}ms\"\nfi\n```\n\n### Form Automation\n```bash\nnode fill.js --url https:\u002F\u002Fexample.com --selector \"#search\" --value \"query\" --close false\nnode click.js --selector \"button[type=submit]\"\n```\n\n### Error Monitoring\n```bash\nnode console.js --url https:\u002F\u002Fexample.com --types error,warn --duration 5000 | jq '.messageCount'\n```\n\n## Script Options\n\nAll scripts support:\n- `--headless false` - Show browser window\n- `--close false` - Keep browser open for chaining\n- `--timeout 30000` - Set timeout (milliseconds)\n- `--wait-until networkidle2` - Wait strategy\n\nSee `.\u002Fscripts\u002FREADME.md` for complete options.\n\n## Output Format\n\nAll scripts output JSON to stdout:\n```json\n{\n  \"success\": true,\n  \"url\": \"https:\u002F\u002Fexample.com\",\n  ... \u002F\u002F script-specific data\n}\n```\n\nErrors go to stderr:\n```json\n{\n  \"success\": false,\n  \"error\": \"Error message\"\n}\n```\n\n## Finding Elements\n\nUse `snapshot.js` to discover selectors:\n```bash\nnode snapshot.js --url https:\u002F\u002Fexample.com | jq '.elements[] | {tagName, text, selector}'\n```\n\n## Troubleshooting\n\n### Common Errors\n\n**\"Cannot find package 'puppeteer'\"**\n- Run: `npm install` in the scripts directory\n\n**\"error while loading shared libraries: libnss3.so\"** (Linux\u002FWSL)\n- Missing system dependencies\n- Fix: Run `.\u002Finstall-deps.sh` in scripts directory\n- 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`\n\n**\"Failed to launch the browser process\"**\n- Check system dependencies installed (Linux\u002FWSL)\n- Verify Chrome downloaded: `ls ~\u002F.cache\u002Fpuppeteer`\n- Try: `npm rebuild` then `npm install`\n\n**Chrome not found**\n- Puppeteer auto-downloads Chrome during `npm install`\n- If failed, manually trigger: `npx puppeteer browsers install chrome`\n\n### Script Issues\n\n**Element not found**\n- Get snapshot first to find correct selector: `node snapshot.js --url \u003Curl>`\n\n**Script hangs**\n- Increase timeout: `--timeout 60000`\n- Change wait strategy: `--wait-until load` or `--wait-until domcontentloaded`\n\n**Blank screenshot**\n- Wait for page load: `--wait-until networkidle2`\n- Increase timeout: `--timeout 30000`\n\n**Permission denied on scripts**\n- Make executable: `chmod +x *.sh`\n\n**Screenshot too large (>5MB)**\n- Install ImageMagick for automatic compression\n- Manually set lower threshold: `--max-size 3`\n- Use JPEG format instead of PNG: `--format jpeg --quality 80`\n- Capture specific element instead of full page: `--selector .main-content`\n\n**Compression not working**\n- Verify ImageMagick installed: `magick -version` or `convert -version`\n- Check file was actually compressed in output JSON: `\"compressed\": true`\n- For very large pages, use `--selector` to capture only needed area\n\n## Reference Documentation\n\nDetailed guides available in `.\u002Freferences\u002F`:\n- [CDP Domains Reference](.\u002Freferences\u002Fcdp-domains.md) - 47 Chrome DevTools Protocol domains\n- [Puppeteer Quick Reference](.\u002Freferences\u002Fpuppeteer-reference.md) - Complete Puppeteer API patterns\n- [Performance Analysis Guide](.\u002Freferences\u002Fperformance-guide.md) - Core Web Vitals optimization\n\n## Advanced Usage\n\n### Custom Scripts\nCreate custom scripts using shared library:\n```javascript\nimport { getBrowser, getPage, closeBrowser, outputJSON } from '.\u002Flib\u002Fbrowser.js';\n\u002F\u002F Your automation logic\n```\n\n### Direct CDP Access\n```javascript\nconst client = await page.createCDPSession();\nawait client.send('Emulation.setCPUThrottlingRate', { rate: 4 });\n```\n\nSee reference documentation for advanced patterns and complete API coverage.\n\n## External Resources\n\n- [Puppeteer Documentation](https:\u002F\u002Fpptr.dev\u002F)\n- [Chrome DevTools Protocol](https:\u002F\u002Fchromedevtools.github.io\u002Fdevtools-protocol\u002F)\n- [Scripts README](.\u002Fscripts\u002FREADME.md)\n",{"name":5,"license":14,"description":7},"main","89292510b4aefaa8284c5fa2d9a26b89246841e7","claude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex","https:\u002F\u002Fgithub.com\u002Ffel-tte","2026-04-16 19:54:41",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add fel-tte\u002Frobot-forex --skill chrome-devtools",{"tool":63,"command":64},"bunx","bunx skills add fel-tte\u002Frobot-forex --skill chrome-devtools",{"tool":66,"command":67},"pnpm","pnpm dlx skills add fel-tte\u002Frobot-forex --skill chrome-devtools","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002FSKILL.md",true,[71,77,81,85,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151],{"path":72,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002Fcdp-domains.md","REFERENCE","参考文档",17812,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Freferences\u002Fcdp-domains.md",{"path":78,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":79,"sourceHtmlUrl":80},"references\u002Fperformance-guide.md",21550,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Freferences\u002Fperformance-guide.md",{"path":82,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Fpuppeteer-reference.md",19065,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Freferences\u002Fpuppeteer-reference.md",{"path":86,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":89,"sourceHtmlUrl":90},"scripts\u002F__tests__\u002Fselector.test.js","SCRIPT","脚本",6525,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F__tests__\u002Fselector.test.js",{"path":92,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":93,"sourceHtmlUrl":94},"scripts\u002F.gitignore",12,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F.gitignore",{"path":96,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":97,"sourceHtmlUrl":98},"scripts\u002Fclick.js",2239,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fclick.js",{"path":100,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":101,"sourceHtmlUrl":102},"scripts\u002Fconsole.js",1746,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fconsole.js",{"path":104,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":105,"sourceHtmlUrl":106},"scripts\u002Fevaluate.js",1088,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fevaluate.js",{"path":108,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":109,"sourceHtmlUrl":110},"scripts\u002Ffill.js",1904,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Ffill.js",{"path":112,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":113,"sourceHtmlUrl":114},"scripts\u002Finstall-deps.sh",4371,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Finstall-deps.sh",{"path":116,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":117,"sourceHtmlUrl":118},"scripts\u002Finstall.sh",2137,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Finstall.sh",{"path":120,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":121,"sourceHtmlUrl":122},"scripts\u002Flib\u002Fbrowser.js",2465,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Flib\u002Fbrowser.js",{"path":124,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":125,"sourceHtmlUrl":126},"scripts\u002Flib\u002Fselector.js",5422,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Flib\u002Fselector.js",{"path":128,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":129,"sourceHtmlUrl":130},"scripts\u002Fnavigate.js",994,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fnavigate.js",{"path":132,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":133,"sourceHtmlUrl":134},"scripts\u002Fnetwork.js",2727,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fnetwork.js",{"path":136,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":137,"sourceHtmlUrl":138},"scripts\u002Fpackage.json",321,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fpackage.json",{"path":140,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":141,"sourceHtmlUrl":142},"scripts\u002Fperformance.js",3875,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fperformance.js",{"path":144,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":145,"sourceHtmlUrl":146},"scripts\u002FREADME.md",5318,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002FREADME.md",{"path":148,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":149,"sourceHtmlUrl":150},"scripts\u002Fscreenshot.js",6000,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fscreenshot.js",{"path":152,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":153,"sourceHtmlUrl":154},"scripts\u002Fsnapshot.js",3518,"https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fsnapshot.js",[156,183,216,241,265,289],{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":160,"licenseFileUrl":6,"sourceHtmlUrl":161,"categories":162,"keywords":163,"publishedAt":46},"01M70FBGBXX5Q8M79VKGJKY8T3","web-frameworks","Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined\u002Ffilled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.","MIT","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",[],[164,165,166,167,168,169,170,44,171,172,173,174,175,176,177,178,179,180,181,182],"frameworks","web frameworks","web","shared","app","projects","monorepo","up","implementing","remote","when","caching","components","Server Components","react","router","libraries","strategies","server",{"skillNo":184,"name":185,"nameZh":6,"description":186,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":160,"licenseFileUrl":187,"sourceHtmlUrl":188,"categories":189,"keywords":198,"publishedAt":46},"01M70FBBK4VRTABS90VQP66FRJ","ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fui-styling\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fui-styling\u002FSKILL.md",[190,193],{"categoryNo":191,"categoryName":192,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":194,"categoryName":195,"taxonomyType":196,"taxonomyTypeDesc":197},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[199,200,201,202,203,204,205,172,206,207,208,209,174,176,210,211,212,213,214,215],"ui styling","styling","ui","css","Tailwind","mode","canvas","design","themes","utility","design systems","across","create","forms","patterns","responsive","shadcn",{"skillNo":217,"name":218,"nameZh":6,"description":219,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":160,"licenseFileUrl":6,"sourceHtmlUrl":220,"categories":221,"keywords":222,"publishedAt":46},"01M70FB7JD59AWZMQ5ET94QBRR","threejs","Build immersive 3D web experiences with Three.js - WebGL\u002FWebGPU library for scenes, cameras, geometries, materials, lights, animations, loaders, post-processing, shaders (including node-based TSL), compute, physics, VR\u002FXR, and advanced rendering. Use when creating 3D visualizations, games, interactive graphics, data viz, product configurators, architectural walkthroughs, or WebGL\u002FWebGPU applications. Covers OrbitControls, GLTF\u002FFBX loading, PBR materials, shadow mapping, post-processing effects (bloom, SSAO, SSR), custom shaders, instancing, LOD, animation systems, and WebXR.","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fthreejs\u002FSKILL.md",[],[218,223,224,225,226,227,228,229,230,231,232,174,233,234,235,236,237,238,239,240],"bloom","Animation","3D","processing","physics","advanced","loading","data viz","webgpu","effects","animation systems","product","shaders","node","ssr","post-processing","rendering","data",{"skillNo":242,"name":243,"nameZh":6,"description":244,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":245,"sourceHtmlUrl":246,"categories":247,"keywords":249,"publishedAt":46},"01M70FB3NXD0D2ZSD3SHGADHFP","skill-creator","Guide for creating effective skills, adding skill references, skill scripts or optimizing existing skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, frameworks, libraries or plugins usage, or API and tool integrations.","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fskill-creator\u002FSKILL.md",[248],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[250,251,252,253,29,164,254,255,256,257,174,258,259,260,261,262,211,180,263,264],"skill creator","creator","usage","integrations","tool","knowledge","Existing","workflows","api","specialized","capabilities","users","with","references","update",{"skillNo":266,"name":267,"nameZh":6,"description":268,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":160,"licenseFileUrl":6,"sourceHtmlUrl":269,"categories":270,"keywords":271,"publishedAt":46},"01M70FAWZ6AE2S5HGHKJGRP8Q0","sequential-thinking","Apply structured, reflective problem-solving for complex tasks requiring multi-step analysis, revision capability, and hypothesis verification. Use for complex problem decomposition, adaptive planning, analysis needing course correction, problems with unclear scope, multi-step solutions, and hypothesis-driven work.","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fsequential-thinking\u002FSKILL.md",[],[272,273,274,275,276,277,278,279,29,280,281,40,282,262,283,284,285,286,287,288],"thinking","sequential thinking","adaptive","course","problem","problem-solving","planning","scope","use","apply","tasks","multi","verification","work","solutions","decomposition","revision",{"skillNo":290,"name":291,"nameZh":6,"description":292,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":160,"licenseFileUrl":6,"sourceHtmlUrl":293,"categories":294,"keywords":298,"publishedAt":46},"01M70FAVJHZ9X00J4C1VEX7TTB","research","Use when you need to research, analyze, and plan technical solutions that are scalable, secure, and maintainable.","https:\u002F\u002Fgithub.com\u002Ffel-tte\u002Frobot-forex\u002Fblob\u002Fmain\u002Fclaude-super-kit\u002F.claude\u002Fskills\u002Fresearch\u002FSKILL.md",[295],{"categoryNo":296,"categoryName":297,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000021","资料检索与研究",[291,299,280,174,300,301,302,286,303,304],"technical","you","analyze","plan","secure","Scalable"]