skills.rest
einverne
einverneCOMMUNITY
Explore all skills by this author →
Website𝕏@einverneGitHub

chrome-devtools

Automates Puppeteer CLI browser actions including navigation, clicking, filling forms, screenshots, DOM inspection, and network monitoring.

119|23|Updated May 4, 2015
Search Tags:#debugging#browser automation#web scraping#devtools#puppeteer#chrome#performance testing
One-click install
npx skills add https://github.com/einverne/dotfiles --skill chrome-devtools-einverne
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/einverne/dotfiles/tree/main/claude/skills/chrome-devtools
Command: npx skills add https://github.com/einverne/dotfiles --skill chrome-devtools-einverne

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Automating browser interactions, debugging web applications, and analyzing performance often requires complex setups or manual intervention, slowing down development and testing workflows. This skill provides a suite of executable Puppeteer CLI scripts to streamline these tasks, offering powerful browser control and data extraction capabilities.

Core Features & Use Cases

  • Browser Automation: Navigate, click elements, fill forms, and execute custom JavaScript for web scraping, end-to-end testing, and repetitive workflow automation.
  • Visual & Content Capture: Capture full-page screenshots and extract interactive elements with metadata for analysis, reporting, or visual regression testing.
  • Performance & Network Monitoring: Measure Core Web Vitals (LCP, FID, CLS), record performance traces, and track HTTP requests/responses to identify bottlenecks and optimize user experience.
  • Console & JavaScript Debugging: Monitor console messages and errors in real-time, and execute JavaScript in the page context for dynamic debugging and data manipulation.
  • Use Case: Automate filling out a complex online application form, capture performance metrics for a web page after a new deployment, or scrape product prices from a dynamic e-commerce site.

Quick Start

Use the chrome-devtools skill to navigate to 'https://example.com' and take a full-page screenshot, saving it as 'example_page.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 interactions and web scraping with Puppeteer?▼

Browser automation with Puppeteer lets you navigate pages, click elements, fill forms, and extract data programmatically. This skill provides CLI scripts that control Chrome headlessly, execute JavaScript in the page context, and output results as JSON for integration into workflows.

Can I capture screenshots and measure web performance metrics automatically?▼

Yes. The skill captures full-page screenshots and records Core Web Vitals (LCP, FID, CLS) and performance traces in a single command. Network requests and response times are also tracked, enabling automated performance bottleneck detection after deployments.

What's the best way to debug console errors and monitor network traffic in a headless browser?▼

Monitor console messages and errors in real-time while the browser runs headlessly, and simultaneously track HTTP requests and responses. This approach isolates application issues without manual inspection, ideal for end-to-end testing and CI/CD pipelines.

Do I need Node.js and specific dependencies to use browser automation scripts?▼

Yes. The skill requires Node.js >= 18, Puppeteer, and CLI tools (debug, yargs). Setup scripts handle system and tooling configuration across Linux, macOS, and Windows, ensuring the environment is ready before automation runs.

Can I automate complex form submission and visual regression testing across multiple pages?▼

Yes. Chain multiple commands to navigate, interact with forms, capture screenshots, and execute custom JavaScript. Output is JSON-formatted, enabling comparison of visual and content changes over time for regression detection.

What are the limitations when scraping dynamic e-commerce sites or data-heavy applications?▼

The skill handles dynamic JavaScript-rendered content and waits for elements to load, but performance depends on page complexity, timeout settings, and network latency. Large-scale scraping may require tuning --timeout and --wait-until flags to balance speed and reliability.

Related Skills

Explore More Software Engineering Skills→
brixtonphambrixtonpham

chrome-devtools

Automate browser tasks and UI testing via Puppeteer CLI scripts.

Community
Intermediate
babdulhakim2babdulhakim2

sanctions-check

Screen entities against OFAC SDN, UN, EU, and other sanctions lists.

Community
Intermediate
nrupalanrupala

agent-browser

Automate browser navigation, form interaction, and data extraction via CLI commands.

Community
Advanced
plurigridplurigrid
60

playwright

Automate browser tasks using the Playwright MCP server.

Official
Intermediate