skills.rest
PhucMPham
PhucMPhamCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automate browser tasks with Puppeteer scripts for testing and data extraction.

Updated Dec 25, 2025
Search Tags:#performance#debugging#puppeteer#web-scraping#browser-automation#JSON-outputs
One-click install
npx skills add https://github.com/PhucMPham/threejs-christmas-tree --skill chrome-devtools-phucmpham
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/PhucMPham/threejs-christmas-tree/tree/main/.claude/skills/chrome-devtools
Command: npx skills add https://github.com/PhucMPham/threejs-christmas-tree --skill chrome-devtools-phucmpham

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, debug, sharp, yargs, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates browser interactions, accelerates QA, debugging, and data gathering by scripting Chrome through the Puppeteer CLI. It reduces repetitive manual testing and debugging toil.

Core Features & Use Cases

  • Persistent sessions: Reuse browser contexts across runs for faster, repeatable workflows.
  • Unified automation suite: Navigate, click, type, capture screenshots, monitor network, and gather performance metrics via a collection of CLI scripts.
  • Data & QA workflows: Ideal for automated testing, web scraping, performance checks, and debugging.

Quick Start

Run a couple of example commands to get started: node .claude/skills/chrome-devtools/scripts/navigate.js --url https://example.com node .claude/skills/chrome-devtools/scripts/screenshot.js --output ./example.png --url https://example.com

Frequently Asked Questions about chrome-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate browser tasks like navigation, screenshots, and form filling with Puppeteer?▼

Puppeteer automates browser interactions by scripting Chrome through CLI commands. Use scripts like navigate.js to visit pages, screenshot.js to capture visuals, and form automation scripts to submit data—all executable via Node.js without manual intervention.

Can I use Puppeteer for web scraping and extracting data from JavaScript-heavy websites?▼

Yes, Puppeteer extracts data from dynamic pages by executing JavaScript and parsing the rendered DOM. Use CSS and XPath selectors or ARIA snapshots to locate elements, then output results as JSON for downstream processing.

What's the best way to monitor performance and network traffic while automating browser tests?▼

Browser automation with Puppeteer captures performance metrics and network events during page navigation. Collect timing data, resource waterfall, and traffic logs in JSON format to analyze bottlenecks and validate load behavior.

Can I maintain persistent browser sessions across multiple automation runs?▼

Persistent sessions via WebSocket allow browser contexts to be reused across runs, eliminating repeated startup overhead. This accelerates iterative testing, debugging, and data-gathering workflows.

Does browser automation work for debugging JavaScript issues and inspecting DOM state?▼

Yes, Puppeteer enables JavaScript debugging and DOM inspection by connecting to Chrome DevTools. Analyze element snapshots, evaluate expressions, and trace execution to diagnose frontend bugs without manual inspection.

What are the limitations when using Puppeteer for large-scale web scraping or heavy automation?▼

Puppeteer requires Node.js 18+ and persistent memory for each browser context. At scale, resource consumption grows with concurrent sessions; plan for WebSocket overhead, selector robustness across DOM variations, and headless Chrome lifecycle management.

Related Skills

Explore More Software Engineering Skills→
levanminhduclevanminhduc

chrome-devtools

Automate browser tasks and debugging workflows with Puppeteer CLI scripts.

Community
Advanced
GrassHopper42GrassHopper42

hackernews-frontpage

Scrape the Hacker News front page and extract top stories into JSON.

Community
Basic
limaonlimaon

browser

Automate Chrome browser tasks via the Chrome DevTools Protocol.

Community
Advanced
reez455Greez455G

browser-testing-with-devtools

Automate real-time browser testing and UI verification via Chrome DevTools.

Community
Advanced