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

0•

Security & Testing

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.

Key Features

01Structured markdown reporting with specific code fix recommendations

02Detailed stack trace extraction and impact analysis for critical issues

03Automated navigation and error capture via Chrome DevTools MCP

04Intelligent categorization of runtime, syntax, network, and framework errors

050 GitHub stars

06Token-efficient debugging workflow with automatic log saving for critical findings

Use Cases

01Performing pre-commit sanity checks to ensure zero console errors on key application routes

02Diagnosing hidden network failures and CORS issues during local development

03Verifying UI stability and script execution after implementing new features

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rayzru/info-web debug-console

For use in Claude.ai and ChatGPT

Download Skill