skills.rest
hidonguyen
hidonguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:chrome-devtools

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

Updated Apr 2, 2026
Search Tags:#screenshots#puppeteer#performance-testing#web-scraping#browser-automation#network-monitoring#aria-snapshot
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-chrome-devtools-hidonguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:chrome-devtools
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/chrome-devtools
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-chrome-devtools-hidonguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Web engineers, QA, and performance analysts spend manual time reproducing browser interactions, collecting screenshots, console logs, network traces, and accessibility information across sessions. This Skill centralizes Puppeteer-based CLI scripts, persistent browser sessions, and structured JSON outputs so debugging, scraping, and performance analysis become repeatable and automatable.

Core Features & Use Cases

  • Persistent Sessions: Launch or reconnect to a running Chrome instance and reuse session state across scripts via a WebSocket endpoint.
  • Scripted Automation: CLI scripts for navigation, screenshots, clicks, form fills, evaluations, ARIA snapshots, network tracing, console capture, and WebSocket debugging.
  • Performance & Accessibility: Built-in performance measurement, tracing, Core Web Vitals capture, and ARIA-based element discovery for audits and automated testing.
  • Auth & Cookies: Multiple authentication methods including cookie import, cookie injection, and using real Chrome profiles for SSO/OAuth flows.
  • Use Case: Automate an authenticated performance test that captures a screenshot, network trace, console errors, and an ARIA snapshot for a failing user flow.

Quick Start

Start by running the navigate script to open a persistent browser session and capture a screenshot, console logs, and an ARIA snapshot for a target URL.

Frequently Asked Questions about ck:chrome-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture screenshots and network traces with Puppeteer?▼

You can capture screenshots and network traces with Puppeteer by running CLI-driven scripts that launch a browser session, navigate to a target URL, and emit structured JSON outputs containing the requested artifacts.

Can I reuse a persistent browser session for multiple Puppeteer automation scripts?▼

Yes, you can reuse a persistent browser session across multiple Puppeteer automation scripts by reconnecting to a running Chrome instance via a WebSocket endpoint, preserving session state for subsequent tasks.

How do I automate authenticated performance testing and measure Core Web Vitals?▼

Automate authenticated performance testing by importing cookies or using real Chrome profiles for SSO/OAuth flows, then run built-in measurement scripts to capture Core Web Vitals and performance traces.

What is the best way to capture ARIA snapshots for accessibility audits during web scraping?▼

The best way to capture ARIA snapshots for accessibility audits is to use Puppeteer browser automation scripts that discover elements based on ARIA data and output the accessibility tree as structured JSON.

Does this browser automation approach support both headed and headless runs?▼

Yes, the browser automation scripts support both headed and headless runs, allowing you to visually debug interactions or run background tasks while applying artifact compression to the captured outputs.

How do I debug failing user flows by capturing console logs and network traces?▼

Debug failing user flows by executing CLI scripts that navigate the flow, automatically capturing console logs, network traces, and screenshots to provide a structured JSON report for analysis.

Related Skills

Explore More Software Engineering Skills→
vuminhieuvuminhieu

chrome-devtools

Orchestrate Puppeteer scripts with persistent sessions for browser automation and testing.

Community
Advanced
jangtrinhjangtrinh

ck:chrome-devtools

Automate Puppeteer browser testing with screenshots, ARIA snapshots, and diagnostics.

Community
Advanced
NammDevNammDev
2

chrome-devtools

Automate browser tasks and data collection with Puppeteer CLI scripts.

Community
Advanced
auxi-wardrobeauxi-wardrobe
1

ck:chrome-devtools

Automate browser tasks with Puppeteer CLI scripts for screenshots and web scraping.

Official
Advanced