How do I generate a report using this skill?

The skill includes a built-in Debugging Report Template that summarizes errors, frequency, and suggested fixes into a structured Markdown format for documentation.

Does it support React or Vue stack traces?

Absolutely. It analyzes the call stack to help you differentiate between your application code and framework-level execution in libraries like React, Vue, and Angular.

Can it identify CORS and CSP errors?

Yes, it specifically categorizes network-related security errors like CORS and Content Security Policy violations to help you identify backend configuration issues.

How does this skill interact with my browser?

It utilizes the Chrome DevTools MCP to programmatically access and read console output from active browser sessions during the debugging process.

Console Debugging

Name: Console Debugging
Author: jpoutrin

byjpoutrin

•

分析と監視

Analyzes browser console messages and stack traces to identify and resolve JavaScript errors, network failures, and performance warnings.

The Console Debugging skill provides a systematic framework for interpreting frontend logs through the Chrome DevTools MCP. It enables developers to categorize messages by severity, analyze complex stack traces, and correlate browser errors with network activities. By automating the extraction and classification of console output, this skill streamlines the debugging process for modern web applications, helping teams resolve critical UI crashes and performance bottlenecks more efficiently using standardized reporting templates.

主な機能

01Categorization of errors, warnings, and info logs by severity

02Automated console message extraction via Chrome DevTools MCP

03Detailed stack trace analysis for root cause identification

04Correlation between console errors and network resource failures

05Standardized debugging report generation for team communication

065 GitHub stars

ユースケース

01Auditing third-party library warnings and deprecation notices during site upgrades

02Investigating intermittent production errors that only appear in the browser console

03Debugging complex state management issues in React, Vue, or Angular applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jpoutrin/product-forge console-debugging

For use in Claude.ai and ChatGPT

Download Skill