chrome-debug

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.