skills.rest
kevinnguyen271090
kevinnguyen271090COMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automate browser tasks with Puppeteer CLI scripts for navigation, screenshots, and network monitoring.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill eliminates the manual drudgery of browser tasks, complex web scraping, and difficult performance debugging. It provides executable Puppeteer CLI scripts to automate browser interactions, analyze web performance, and monitor network traffic, saving developers significant time and effort.

Core Features & Use Cases

  • Comprehensive Browser Automation: Scripts for navigation, screenshots (with auto-compression), clicks, form filling, and executing custom JavaScript in the page context.
  • Advanced Analysis & Monitoring: Tools to snapshot interactive elements, monitor console messages/errors, track HTTP requests/responses, and measure Core Web Vitals with performance traces.
  • Robust Error Recovery & Troubleshooting: Provides guidance for identifying correct selectors, handling script failures, and troubleshooting common issues like missing dependencies or large screenshots.
  • Use Case: Automate testing a complex multi-step form. The Skill can navigate to the form, fill multiple fields, click submit, and then take a screenshot of the success page, all while monitoring network requests and console errors.

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

Browser automation with Puppeteer lets you script interactions like navigation, form filling, clicks, and screenshots programmatically via CLI. This Skill provides ready-to-use scripts that execute these tasks end-to-end, capture full-page screenshots with optional compression, and monitor network traffic and console output simultaneously.

Can I use Puppeteer to scrape web data and test performance at the same time?▼

Yes. This Skill combines web scraping, performance analysis, and QA testing in unified CLI workflows. It tracks HTTP requests, measures Core Web Vitals, captures console errors, and extracts page data using CSS and XPath selectors—all executable as chained browser actions in a single invocation.

What's the best way to debug browser issues and capture network traffic during automated tests?▼

Debug browser automation by monitoring network requests, console messages, and errors in real time. This Skill provides snapshot tools for interactive elements, request/response tracking, and error logging that integrate directly into CLI scripts, eliminating manual inspection overhead in QA pipelines.

Do I need to write custom JavaScript to interact with complex web pages?▼

No. This Skill handles CSS and XPath selector-based clicks, form fills, and navigation out of the box. For advanced interactions, you can inject and execute custom JavaScript in the page context, giving you flexibility without requiring deep browser automation expertise.

Can browser automation scripts handle large screenshots and performance traces efficiently?▼

Yes. This Skill automates screenshot capture with built-in compression to manage file size, and generates performance traces for Core Web Vitals analysis. Both features integrate into CLI execution, supporting scaled testing pipelines and automation workflows without manual optimization.

What are the limits of Puppeteer-based automation for complex multi-step workflows?▼

Puppeteer automation works well for scripted sequences—navigation, clicks, form submission, screenshot capture—but requires correct CSS/XPath selectors and proper error handling for reliability. This Skill includes troubleshooting guidance for selector issues and common failures like missing dependencies or timeout errors.

Related Skills

Explore More Software Engineering Skills→
levanminhduclevanminhduc

chrome-devtools

Automate browser tasks and debugging workflows with Puppeteer CLI scripts.

Community
Advanced
ReadyToGo-EducationReadyToGo-Education
15

instagram-dashboard

Scrape Instagram profile and posts to generate an offline HTML dashboard.

Official
Advanced
grojedagrojeda
25

playwright-cli

Automate browser interactions and run Playwright tests from the command line.

Community
Intermediate
SecurityRoninSecurityRonin
1

browser-automation

Automate browser tasks and testing across Playwright, Puppeteer, Selenium, and CDP workflows.

Official
Intermediate