skills.rest
pengelbrecht
pengelbrechtCOMMUNITY
Explore all skills by this author →
GitHub

chrome-debug

Control Chrome via CDP to debug web applications and capture screenshots.

1|Updated Nov 3, 2025
Search Tags:#debugging#javascript#devtools#web automation#chrome#screenshot#console monitoring
One-click install
npx skills add https://github.com/pengelbrecht/chrome-debug-skill --skill chrome-debug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-debug
Source: https://github.com/pengelbrecht/chrome-debug-skill/tree/main/.
Command: npx skills add https://github.com/pengelbrecht/chrome-debug-skill --skill chrome-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires aiohttp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Manual web debugging is a time-consuming and often frustrating process. This Skill automates the tedious aspects of browser interaction, console monitoring, and screenshot capture, allowing you to quickly diagnose issues and focus on solving problems, not finding them.

Core Features & Use Cases

  • Automated Browser Control: Launch Chrome (visible or headless), open tabs, and navigate to specific URLs, all without manual clicks.
  • Real-time Console Monitoring: Automatically stream live console messages (errors, warnings, logs) to instantly pinpoint issues as they occur.
  • Visual Debugging with Screenshots: Capture full-page or viewport screenshots to visually document bugs or track UI changes, saving you from manual screen grabs.
  • Dynamic JavaScript Evaluation: Execute JavaScript directly in the browser context to inspect page state, trigger actions, or debug functions, giving you immediate feedback.
  • Use Case: Imagine a user reports a critical bug on your web application. Instead of manually opening Chrome, navigating, opening DevTools, and trying to reproduce, Claude can automatically launch Chrome, go to the problematic page, monitor the console for errors, take a screenshot of the broken state, and even run JavaScript to inspect relevant variables. You get the diagnostic information instantly, without lifting a finger.

Quick Start

Debug why the page at 'https://example.com/broken-feature' isn't loading correctly. Take a full-page screenshot and check the console for any errors.

Frequently Asked Questions about chrome-debug

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

FAQPage Schema
How do I automate debugging of web applications without manually opening Chrome?▼

Chrome DevTools Protocol automation launches Chrome (visible or headless), navigates to URLs, monitors console output in real time, and captures screenshots—all programmatically. This Skill controls Chrome via CDP commands to diagnose issues instantly without manual browser interaction.

Can I monitor console errors and logs in real time while a web page runs?▼

Yes, real-time console monitoring streams live messages—errors, warnings, logs—directly as they occur in the browser. This lets you pinpoint issues immediately without checking DevTools manually or waiting for page load completion.

How do I capture full-page screenshots programmatically for automated testing or bug documentation?▼

Full-page screenshot capture via Chrome DevTools Protocol lets you document UI state, track changes, and validate layouts automatically. Screenshots are generated without manual screen grabs, integrating into CLI workflows and automated debugging pipelines.

Can I execute JavaScript in the browser context to inspect page state dynamically?▼

Yes, dynamic JavaScript evaluation executes code directly in the browser to inspect variables, trigger actions, and debug functions. This gives immediate feedback on page state without opening DevTools or running console commands manually.

What setup or dependencies do I need to run Chrome automation workflows?▼

This Skill uses single-file uv inline dependencies and zero-setup operation—aiohttp is the only dependency. No manual installation or environment configuration required; it runs CLI commands directly for start, stop, list, open, eval, screenshot, and console-tail operations.

Does web automation via Chrome DevTools Protocol work for headless and visible browser sessions?▼

Yes, Chrome DevTools Protocol supports both headless (invisible) and headful (visible) Chrome sessions. Choose headless for automated workflows and CI/CD pipelines, or headful for interactive debugging where you see browser behavior in real time.

Related Skills

Explore More Software Engineering Skills→
MuduiClawMuduiClaw
11

webapp-testing

Automate local web app testing via Playwright and Chrome CDP instances.

Community
Intermediate
ribatsheporibatshepo
1

debug-diagnostics

Parse errors into structured diagnostic reports with redacted secrets and history tracking.

Community
Advanced
AkbarDevopAkbarDevop

canary

Monitor live web applications for console errors and page failures post-deployment.

Community
Advanced
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced