Can it debug specific framework errors?

Yes, it is designed to identify and categorize React hydration issues, Next.js runtime errors, and other common framework-specific exceptions.

How does this skill reduce token usage?

By replacing manual multi-step console inspection prompts with a streamlined, automated workflow, it reduces the context window requirement by up to 60%.

Does this require any specific browser configuration?

Yes, it requires starting Claude Code with the --chrome flag and having the Chrome browser running with the Claude extension enabled.

Where are the debug reports saved?

If critical errors or a high volume of warnings are found, reports are automatically saved to the .claude/logs/ directory for historical reference.

Web Console Debugger

Name: Web Console Debugger
Author: rayzru

byrayzru

セキュリティとテスト

Automatically captures and analyzes browser console errors to streamline web application debugging and error resolution.

概要

The Web Console Debugger is a specialized Claude Code skill designed to optimize the debugging process for web applications. By leveraging Chrome DevTools MCP and Playwright, it automates the navigation, error capture, and classification of JavaScript runtime exceptions, network failures, and framework-specific issues like React hydration errors. It replaces manual console inspection with structured reporting and actionable fix recommendations, significantly reducing token consumption and developer effort during local development and pre-commit checks.

主な機能

Structured markdown reporting with specific code fix recommendations
Detailed stack trace extraction and impact analysis for critical issues
Automated navigation and error capture via Chrome DevTools MCP
Intelligent categorization of runtime, syntax, network, and framework errors
0 GitHub stars
Token-efficient debugging workflow with automatic log saving for critical findings

ユースケース

Performing pre-commit sanity checks to ensure zero console errors on key application routes
Diagnosing hidden network failures and CORS issues during local development
Verifying UI stability and script execution after implementing new features

概要

主な機能

Structured markdown reporting with specific code fix recommendations
Detailed stack trace extraction and impact analysis for critical issues
Automated navigation and error capture via Chrome DevTools MCP
Intelligent categorization of runtime, syntax, network, and framework errors
0 GitHub stars
Token-efficient debugging workflow with automatic log saving for critical findings

ユースケース

Performing pre-commit sanity checks to ensure zero console errors on key application routes
Diagnosing hidden network failures and CORS issues during local development
Verifying UI stability and script execution after implementing new features