chrome-devtools

Name: chrome-devtools
Availability: InStock
Author: KettleOfKetchup

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

Ready to run

npx skills add https://github.com/kettleofketchup/DraftForge --skill chrome-devtools-kettleofketchup

💬 Prompt for ChatGPT / Claude Chat▼

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.