skills.rest
hungtrandigital
hungtrandigitalCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automate browser tasks with Puppeteer CLI scripts for navigation, screenshots, and performance tracing.

Updated Dec 12, 2025
Search Tags:#debugging#browser automation#UI testing#web scraping#Chrome DevTools#performance testing#Puppeteer
One-click install
npx skills add https://github.com/hungtrandigital/ResidentOne --skill chrome-devtools-hungtrandigital
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/hungtrandigital/ResidentOne/tree/main/0-agents/agents/skills/chrome-devtools
Command: npx skills add https://github.com/hungtrandigital/ResidentOne --skill chrome-devtools-hungtrandigital

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Manual browser interactions for testing, scraping, or performance analysis are repetitive and time-consuming. This Skill provides a suite of executable Puppeteer CLI scripts to automate browser tasks, debug web applications, and gather performance metrics efficiently, saving hours of manual effort.

Core Features & Use Cases

  • Comprehensive Browser Automation: Navigate, click, fill forms, take screenshots, and execute custom JavaScript in a headless or headed browser for seamless interaction.
  • Performance & Network Analysis: Monitor Core Web Vitals, track network requests, and capture console messages for deep debugging and optimization.
  • Automatic Image Compression: Screenshots are automatically compressed using ImageMagick to ensure they meet API size limits, preventing upload failures.
  • Use Case: Automate a login process, take a full-page screenshot of the dashboard, and then measure its Largest Contentful Paint (LCP) score.

Quick Start

Navigate to 'https://example.com' and take a full-page screenshot, saving it to './docs/screenshots/example.png'.

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 form filling?▼

Browser automation uses Puppeteer to programmatically control a headless Chrome instance, enabling you to navigate pages, fill forms, click elements, and execute JavaScript without manual interaction. This Skill provides CLI scripts that handle navigation, form submission, and screenshot capture end-to-end.

Can I measure web performance metrics like Core Web Vitals?▼

Performance testing with this Skill captures Core Web Vitals, network request traces, and console messages from live page loads. The Puppeteer scripts monitor Largest Contentful Paint (LCP) and other metrics, delivering JSON output for analysis and optimization.

What's the best way to automate web scraping across multiple pages?▼

Web scraping via Puppeteer CLI scripts automates page navigation, DOM element extraction using CSS/XPath selectors, and data collection with built-in security validation. The Skill handles multi-page workflows and outputs structured JSON for downstream processing.

How do I take full-page screenshots and optimize them for upload?▼

This Skill captures full-page screenshots in headless Chrome and automatically compresses them using ImageMagick, ensuring files meet size limits for API uploads. Screenshots are saved to configurable paths with compression applied transparently.

Does this work for UI testing and debugging web applications?▼

UI testing and debugging use Puppeteer to execute custom JavaScript, monitor network activity, and capture console output from the browser. The Skill validates selectors with security checks and provides robust error handling for test automation workflows.

What command-line arguments and dependencies do I need to configure?▼

This Skill uses yargs for CLI argument parsing, Puppeteer for browser control, and debug for logging. All dependencies are managed internally; configuration is passed via command-line flags, with JSON output validation and error handling built in.

Related Skills

Explore More Software Engineering Skills→
IoT-VNIoT-VN

chrome-devtools

Automate browser interactions and data extraction using Puppeteer CLI scripts.

Community
Advanced
ClyptAIClyptAI

benchmark

Measure real-browser performance by collecting navigation and resource metrics for target URLs.

Official
Advanced
levanminhduclevanminhduc

chrome-devtools

Automate browser tasks and debugging workflows with Puppeteer CLI scripts.

Community
Advanced
az9713az9713
2

setup-browser-cookies

Import Chromium browser cookies into a headless CDP session.

Community
Intermediate