Verified:GitHub

chrome-devtools

Automate browser control and web-page analysis with Puppeteer CLI scripts.

Updated Sep 16, 2025

Search Tags:#debugging #puppeteer #web-scraping #chrome-devtools #browser-automation #performance-analysis #network-monitoring

Ready to run

npx skills add https://github.com/kienhaminh/speed-reader --skill chrome-devtools-kienhaminh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/kienhaminh/speed-reader/tree/main/.claude/skills/chrome-devtools
Command: npx skills add https://github.com/kienhaminh/speed-reader --skill chrome-devtools-kienhaminh

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, debugging, and performance analysis using Puppeteer CLI scripts. It enables you to perform browser automation, take screenshots, monitor network traffic, and analyze performance metrics, all from CLI scripts, reducing manual testing and debugging time.

Core Features & Use Cases

Browser automation: Navigate pages, interact with elements, and capture screenshots using Puppeteer scripts.
Performance & debugging: Collect console logs, network activity, and performance traces to diagnose issues and optimize pages.
Use Case: Quickly validate a page by navigating to a URL, taking a screenshot, and exporting a performance report in one workflow.

Quick Start

Use the chrome-devtools skill to automate a browser task by running the provided scripts in .claude/skills/chrome-devtools/scripts, for example navigate to a page and capture a screenshot.

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

Puppeteer automates browser control through CLI scripts that navigate pages, interact with elements, and capture screenshots. Use the chrome-devtools Skill's provided scripts in .claude/skills/chrome-devtools/scripts to run browser automation workflows without manual testing.

Can I monitor network traffic and performance metrics from the command line?▼

Yes, Puppeteer collects console logs, network activity, and performance traces via CLI scripts. The chrome-devtools Skill exports these diagnostics as JSON output, enabling performance analysis and issue diagnosis without browser DevTools UI.

What environments and dependencies does Puppeteer browser automation require?▼

Browser automation with Puppeteer requires Node.js 18+, debug, and yargs dependencies. The chrome-devtools Skill supports Linux, macOS, and Windows, running scripts within the Chrome DevTools Protocol ecosystem for headless and headful modes.

How do I validate a webpage by taking screenshots and generating performance reports in one workflow?▼

Use chrome-devtools scripts to navigate to a URL, capture screenshots, and export performance metrics in a single CLI command. This combines browser navigation, element interaction, and diagnostic collection into one end-to-end validation workflow.

Can I use Puppeteer for web scraping and DOM analysis?▼

Puppeteer supports web scraping and DOM snapshots through headless browser execution. The chrome-devtools Skill enables in-page JavaScript evaluation and DOM inspection via CLI scripts, suitable for data extraction and page structure analysis.