ck:chrome-devtools

Automates browser interactions and diagnostics for Chrome-based web applications using Puppeteer and JSON outputs.

Updated May 10, 2026
One-click install
npx skills add https://github.com/dthuy62/kollet-app --skill ck-chrome-devtools-dthuy62
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:chrome-devtools
Source: https://github.com/dthuy62/kollet-app/tree/main/.opencode/skills/chrome-devtools
Command: npx skills add https://github.com/dthuy62/kollet-app --skill ck-chrome-devtools-dthuy62

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill removes the repetitive manual work of navigating web apps, inspecting behavior, and collecting browser diagnostics by turning those actions into reliable automated workflows.

Core Features & Use Cases

  • Browser Automation: Open pages, click elements, fill forms, capture screenshots, and run scripted page actions.
  • Debugging and Analysis: Collect console logs, inspect network traffic, measure performance, and debug WebSocket activity.
  • Authenticated Workflows: Reuse browser sessions, inject cookies or tokens, and support default profiles for testing logged-in experiences.
  • Use Case: A developer can reproduce a login flow, verify a UI state, capture evidence, and gather performance or network data without manually repeating each step.

Quick Start

Use the chrome-devtools skill to open the target page, perform the requested browser action, and return the result as JSON.

Frequently Asked Questions about ck:chrome-devtools

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

FAQPage Schema
How do I automate browser interaction and capture screenshots with Puppeteer?

To automate browser interaction, you can script Puppeteer to open pages, click elements, fill forms, capture screenshots, and run scripted page actions. This approach turns repetitive web app navigation into reliable automated workflows.

Can I reuse authenticated browser sessions for testing logged-in experiences?

Yes, you can reuse authenticated browser sessions by injecting cookies or tokens and supporting default profiles. This allows you to test logged-in experiences and reproduce login flows without manually repeating each authentication step.

What's the best way to inspect network traffic and debug WebSocket activity in Chrome?

The best way to inspect network traffic and debug WebSocket activity is using automated Chrome DevTools workflows. You can collect console logs, inspect network requests, and monitor WebSocket connections while returning deterministic JSON outputs.

Does this browser automation approach require persistent browser sessions for performance tracing?

Yes, performance tracing and network inspection require persistent browser sessions and selector validation. This ensures deterministic execution when measuring performance metrics and collecting diagnostic data from Chrome-based web applications.

How do I capture console logs and measure performance during web application debugging?

You can capture console logs and measure performance by automating Chrome DevTools diagnostics. The process collects browser diagnostics, inspects behavior, and returns results as JSON outputs for deterministic execution and analysis.