skills.rest
danielctc
danielctcCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automate browser tasks and performance analysis with Puppeteer CLI scripts.

Updated Jan 13, 2026
Search Tags:#debugging#screenshots#puppeteer#browser-automation#performance-analysis#network-monitoring
One-click install
npx skills add https://github.com/danielctc/ReactSpacesMonoRepo --skill chrome-devtools-danielctc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/danielctc/ReactSpacesMonoRepo/tree/main/.claude/skills/chrome-devtools
Command: npx skills add https://github.com/danielctc/ReactSpacesMonoRepo --skill chrome-devtools-danielctc

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill provides browser automation, debugging, and performance analysis using Puppeteer CLI scripts to streamline repetitive web tasks and tests.

Core Features & Use Cases

  • Automated browser workflows: Navigate pages, take screenshots, monitor network traffic, and perform data extraction.
  • Performance analysis: Collect timings and metrics to diagnose rendering and load issues.
  • Use Case: Automate routine QA checks across multiple micro-frontends or automate scrapes where interactions are required.

Quick Start

Install dependencies and run example scripts from the .claude/skills/chrome-devtools/scripts directory. Example: node .claude/skills/chrome-devtools/scripts/navigate.js --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 navigation and take screenshots with Puppeteer?▼

Automate browser navigation and screenshots by running Node scripts from the .claude/skills/chrome-devtools/scripts directory. Pass the target URL via the --url flag, such as node navigate.js --url https://example.com, to capture page states automatically.

What's the best way to monitor network traffic during automated web tasks?▼

Monitor network traffic by executing the Puppeteer CLI scripts provided for browser automation. These scripts log network requests and responses during page navigation, allowing you to inspect traffic patterns and diagnose load issues across web dashboards.

Do I need to install Puppeteer and Sharp to use these browser automation scripts?▼

Yes, you need to install Puppeteer and Sharp dependencies. Puppeteer handles the core browser automation and network monitoring, while Sharp provides optional image compression for the screenshots captured during your automated workflows.

Can I use this for automating QA checks across multiple micro-frontends?▼

Yes, you can automate routine QA checks across multiple micro-frontends. The skill supports project- or user-scope execution, running Puppeteer scripts to navigate pages, monitor network traffic, and extract data from required interactions.

What are the limitations of using Puppeteer CLI scripts for data extraction?▼

Puppeteer CLI scripts require a Node environment and are limited to automating web tasks where interactions are required. Complex downstream image processing depends on Sharp, and all custom automation logic must be maintained within the scripts directory.

Related Skills

Explore More Software Engineering Skills→
hongbietcodehongbietcode
3

chrome-devtools

Drive Chrome via Puppeteer for browser automation and debugging.

Community
Intermediate
kiwamizamuraikiwamizamurai
7

networking

Analyze PCAP captures for data exfiltration and protocol misuse.

Community
Intermediate
trungdo9trungdo9
3

chrome-devtools

Automate browser tasks and interactions using Puppeteer with JSON output.

Community
Advanced
kettleofketchupkettleofketchup
13

chrome-devtools

Orchestrate Puppeteer CLI scripts for browser automation and JSON output.

Community
Intermediate