One-click install
npx skills add https://github.com/quanhavn/workflow-skills --skill chrome-devtools-quanhavn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/quanhavn/workflow-skills/tree/main/chrome-devtools
Command: npx skills add https://github.com/quanhavn/workflow-skills --skill chrome-devtools-quanhavn

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables browser automation, debugging, and performance analysis using Puppeteer CLI scripts, reducing manual repetitive tasks and empowering automated workflows for testing, data collection, and monitoring.

Core Features & Use Cases

  • Browser automation via executable Puppeteer scripts for navigation, screenshots, network tracing, and element interaction.
  • Performance and network analysis: capture vitals, trace data, and log console/network activity to diagnose page behavior.
  • Workflow chaining and automation: compose sequential commands (navigate, fill, click, snapshot) to accelerate QA and data collection.

Quick Start

Use the chrome-devtools skill to quickly automate common browser tasks. For example, navigate to a URL, take a screenshot, and report the page title using the available scripts in the scripts directory under .claude/skills/chrome-devtools/scripts.

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 screenshots and network tracing with Puppeteer?

Puppeteer browser automation enables executable scripts for navigation, screenshots, network tracing, and element interaction. You compose sequential CLI commands to navigate URLs, capture snapshots, and log network activity, accelerating repeatable QA and data collection workflows.

What is browser automation for performance monitoring and how does it capture page vitals?

Browser automation for performance monitoring captures page vitals and traces network data using Puppeteer scripts. It logs console and network activity during navigation to diagnose page behavior and provide insights into web application loading and runtime performance.

Do I need Node.js and ImageMagick to run Puppeteer scripts for web testing?

Node.js and Puppeteer are required dependencies to run the web testing scripts, while ImageMagick is optional for image compression of screenshots. The scripts are organized in a dedicated directory and rely on the Node.js runtime to execute browser automation commands.

Can I chain sequential Puppeteer commands for automated QA workflows?

Yes, you can chain sequential Puppeteer commands to build automated QA workflows. The solution supports composing sequential actions like navigate, fill, click, and snapshot, allowing developers to automate complex browser interactions and data collection tasks repeatably.

What is the best way to debug web application page behavior using network analysis?

Network analysis via Puppeteer scripts is the best way to debug page behavior, capturing trace data and logging console/network activity. This approach provides repeatable browser tasks that diagnose loading issues and monitor performance across web applications.