chrome-devtools

Automate browser tasks and debugging workflows with Puppeteer CLI scripts.

Updated Apr 20, 2026

Search Tags:#performance #debugging #screenshots #puppeteer #chrome-devtools #browser-automation

Ready to run

npx skills add https://github.com/Anders-planck/opencode-config --skill chrome-devtools-anders-planck

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/Anders-planck/opencode-config/tree/main/skills/chrome-devtools
Command: npx skills add https://github.com/Anders-planck/opencode-config --skill chrome-devtools-anders-planck

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Automates browser tasks, debugging workflows, and performance analysis that would otherwise require manual, error-prone steps.

Core Features & Use Cases

Browser automation and navigation: run Puppeteer CLI scripts to open pages, interact with elements, and capture screenshots.
Performance & debugging: collect performance metrics, monitor network traffic, log console output, and diagnose issues.
Deterministic JSON outputs: scripts produce structured JSON for easy integration into pipelines and dashboards.
Example workflows include automated regression checks, cross-page screenshot generation, and metrics extraction for monitoring.

Quick Start

Run a URL through the Puppeteer-based agent to open a page, perform actions, and emit structured JSON results.

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

Automate browser tasks by running Puppeteer CLI scripts to open pages, interact with elements, and capture screenshots. The scripts emit structured JSON outputs for easy integration into automated regression checks and cross-page screenshot generation pipelines.

What is the best way to collect performance metrics and monitor network traffic during browser automation?▼

Collect performance metrics and monitor network traffic using built-in Puppeteer scripts that log console output and diagnose issues. These scripts apply deterministic safety checks to produce structured JSON results suitable for monitoring dashboards and metrics extraction.

Does this browser automation approach work for cross-page screenshot generation and regression checks?▼

Yes, cross-page screenshot generation and automated regression checks are core workflows. The Puppeteer scripts navigate pages, perform actions, and emit structured JSON results, satisfying requirements for repeatable browser automation across multiple projects.

Can I use Puppeteer CLI scripts to fill forms and interact with elements automatically?▼

Yes, you can fill forms and interact with elements automatically using the included Puppeteer scripts. The suite provides built-in safety checks for navigation, form filling, and element interaction, outputting deterministic JSON for pipeline integration.

Why do I need structured JSON outputs from browser automation and debugging workflows?▼

Structured JSON outputs from browser automation and debugging workflows are needed for easy integration into pipelines and dashboards. They provide deterministic results for performance metrics, network traffic analysis, and console logs, enabling automated monitoring and regression checks.

What are the limitations of using Puppeteer for browser automation and performance analysis?▼

Limitations include dependencies on Node.js packages like puppeteer, debug, and yargs, requiring an environment that supports these libraries. While effective for performance analysis and network monitoring, complex workflows may require custom script modifications beyond the included suite.