skills.rest
kettleofketchup
kettleofketchupCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

chrome-devtools

Orchestrate Puppeteer CLI scripts for browser automation and JSON output.

13|Updated Apr 2, 2025
Search Tags:#screenshots#puppeteer#web-scraping#browser-automation#performance-analysis#network-monitoring
One-click install
npx skills add https://github.com/kettleofketchup/DraftForge --skill chrome-devtools-kettleofketchup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/kettleofketchup/DraftForge/tree/main/.claude/skills/chrome-devtools
Command: npx skills add https://github.com/kettleofketchup/DraftForge --skill chrome-devtools-kettleofketchup

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates browser tasks by orchestrating Puppeteer CLI scripts to perform navigation, capture screenshots, analyze performance, monitor network traffic, and support web scraping.

Core Features & Use Cases

  • Automated Browser Automation: Run Puppeteer CLI scripts to navigate pages, take screenshots, and collect metrics.
  • Performance & Debugging: Analyze network activity, measure Core Web Vitals, and generate page snapshots for QA.
  • Use Case: Integrate with your CI pipeline to automatically verify a page’s title, screenshot a page, and report performance metrics after each build.

Quick Start

Install dependencies in the scripts directory with npm install, then run a sample command such as node navigate.js --url https://example.com to observe a JSON output.

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 screenshots with Puppeteer?▼

You can automate browser screenshots by running Puppeteer CLI scripts that navigate to a specified URL and capture page snapshots. This skill orchestrates Puppeteer to perform navigation and take screenshots, returning structured JSON output.

Can I measure Core Web Vitals and monitor network traffic in automated tests?▼

Yes, you can measure Core Web Vitals and monitor network traffic using automated Puppeteer scripts. The skill analyzes network activity and collects performance metrics, making it suitable for QA automation and performance profiling.

Does this Puppeteer CLI skill require Node.js to run?▼

Yes, this Puppeteer CLI skill requires Node.js to run. You need to install dependencies like puppeteer, debug, and yargs in the scripts directory using npm install before executing the automation scripts.

What is the best way to integrate web scraping into a CI pipeline?▼

The best way to integrate web scraping into a CI pipeline is using Puppeteer CLI scripts that output JSON. This skill supports data extraction and automated browser tasks, allowing pipelines to verify pages and report metrics after builds.

How do I get JSON output from Puppeteer browser automation scripts?▼

You get JSON output from Puppeteer browser automation scripts by executing the provided CLI scripts with a target URL. The skill orchestrates navigation, performance analysis, and network monitoring, returning outputs in JSON format for easy integration.

Related Skills

Explore More Software Engineering Skills→
brixtonphambrixtonpham

chrome-devtools

Automate browser tasks and UI testing via Puppeteer CLI scripts.

Community
Intermediate
dige04dige04

chrome-devtools

Automates Puppeteer-based browser tasks and outputs JSON for analysis.

Community
Advanced
AradotsoAradotso
4

browser-devtools-mcp-vscode

Integrate a Browser DevTools MCP server into VS Code via Playwright for automated browser testing.

Official
Advanced
ytqhytqh

chrome-devtools

Orchestrate Puppeteer CLI scripts to automate browser tasks and extract data.

Community
Advanced