skills.rest
hotriluan
hotriluanCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automate browser tasks and debugging with Puppeteer CLI scripts.

3|2|Updated Dec 2, 2025
Search Tags:#debugging#browser automation#web scraping#Chrome DevTools#performance testing#Puppeteer#screenshot
One-click install
npx skills add https://github.com/hotriluan/ai-command-center --skill chrome-devtools-hotriluan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/hotriluan/ai-command-center/tree/main/chrome-devtools
Command: npx skills add https://github.com/hotriluan/ai-command-center --skill chrome-devtools-hotriluan

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Manually performing repetitive browser tasks, debugging complex web issues, or gathering detailed performance metrics is time-consuming and error-prone. This skill provides a suite of executable Puppeteer CLI scripts to automate browser interactions, capture precise data, and analyze web performance, freeing users from tedious manual browser operations.

Core Features & Use Cases

  • Browser Automation: Scripts for navigation, clicking elements, filling forms, executing custom JavaScript, and taking screenshots (with automatic compression).
  • Performance Analysis: Measures Core Web Vitals (LCP, FID, CLS) and records detailed traces for deep performance debugging.
  • Network & Console Monitoring: Tracks HTTP requests/responses and monitors console messages/errors for comprehensive debugging.
  • Element Snapshotting: Extracts interactive elements with metadata, aiding in dynamic selector discovery for robust automation.
  • Use Case: A QA engineer needs to automate a complex user flow on a web application, take screenshots at each step, and verify that no console errors occur. This skill allows them to chain commands (navigate, fill, click, screenshot, console.js) to simulate the user, capture visual evidence, and report any issues, drastically reducing manual testing effort and increasing test coverage.

Quick Start

Navigate to "https://www.google.com", take a full-page screenshot, and save it to ./docs/screenshots/google.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, form filling, and screenshots with Puppeteer?▼

Browser automation with Puppeteer involves chaining scripts to navigate pages, interact with elements via CSS/XPath selectors, fill forms, execute JavaScript, and capture screenshots. This Skill provides executable CLI scripts that handle page navigation, element clicking, form input, and full-page screenshot capture with automatic compression, eliminating manual browser operations.

Can I measure Core Web Vitals and capture performance traces for debugging?▼

Performance analysis captures Core Web Vitals metrics (LCP, FID, CLS) and generates detailed traces for deep debugging. This Skill records comprehensive performance data and network monitoring across browser sessions, helping identify bottlenecks and validate optimization efforts through JSON outputs.

What's the best way to extract interactive elements and generate ARIA snapshots for web scraping?▼

Element snapshotting extracts interactive components with metadata using CSS/XPath selectors and generates ARIA snapshots. This Skill provides stable element references and selector discovery, enabling robust web scraping and dynamic content extraction with security validation.

How do I monitor console errors and HTTP requests during automated browser sessions?▼

Network and console monitoring tracks HTTP requests, responses, console messages, and errors throughout automated workflows. This Skill captures comprehensive debugging data from persistent WebSocket-based browser sessions, surfacing issues that occur during form automation, navigation, and JavaScript execution.

Does this support persistent browser sessions across multiple commands?▼

Yes, persistent browser sessions operate via WebSocket endpoints, allowing chained commands across navigation, interaction, and data capture without restarting the browser. This enables complex multi-step user flows and reduces overhead for repetitive automation tasks.

Can I automate testing workflows that require visual verification and error reporting?▼

Testing workflows chain browser automation with screenshot capture and console monitoring to simulate user interactions, document visual state, and detect errors. This Skill supports QA scenarios requiring evidence collection, error detection, and comprehensive test coverage in a single automated run.

Related Skills

Explore More Software Engineering Skills→
IoT-VNIoT-VN

chrome-devtools

Automate browser interactions and data extraction using Puppeteer CLI scripts.

Community
Advanced
2460124601

qa-only

Produce report-only QA findings with screenshots, console logs, and reproducible steps.

Community
Advanced
hidonguyenhidonguyen

ck:chrome-devtools

Automate browser interactions and capture screenshots, console logs, network traces, and accessibility snapshots.

Community
Advanced
mtsatryanmtsatryan
1

e2e-test-specialist

Automate end-to-end testing workflows across browsers, APIs, and mobile platforms.

Community
Advanced