console-debugging
Use when debugging JavaScript errors, checking console warnings, analyzing browser logs, finding runtime errors, investigating console output, or troubleshooting browser issues. Provides console message analysis.
80
Quality
77%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Advisory
Suggest reviewing before use
Optimize this skill with Tessl
npx tessl skill review --optimize ./plugins/product-design/skills/console-debugging/SKILL.mdConsole Debugging Skill
Systematic approach to analyzing browser console messages using Chrome DevTools MCP.
Console Message Categories
Error Messages (Highest Priority)
| Type | Example | Typical Cause |
|---|---|---|
| JavaScript Error | Uncaught TypeError: Cannot read property 'x' of undefined | Null reference |
| Network Error | Failed to load resource: net::ERR_CONNECTION_REFUSED | API unavailable |
| CORS Error | Access-Control-Allow-Origin | Backend configuration |
| CSP Error | Content Security Policy | Security restriction |
| Syntax Error | SyntaxError: Unexpected token | Invalid JavaScript |
| Reference Error | ReferenceError: x is not defined | Undefined variable |
Warning Messages (Medium Priority)
| Type | Example | Action |
|---|---|---|
| Deprecation | 'componentWillMount' is deprecated | Plan migration |
| Performance | Long task took 200ms | Optimize |
| Security | Insecure form submission | Fix HTTPS |
| Mixed Content | Mixed Content: loading HTTP on HTTPS | Update resource URLs |
Info/Log Messages (Context)
| Type | Purpose |
|---|---|
| Debug output | Developer console.log statements |
| Library info | Framework initialization messages |
| Analytics | Tracking events |
| State changes | Application state updates |
Analysis Workflow
1. Collect Console Messages
Use Chrome DevTools MCP to list all console messages:
Tool: mcp__chrome-devtools__list_console_messages
Parameters: { "level": "error" } // or "warning", "info", "debug"2. Filter by Severity
Start with errors, then warnings:
- Errors first - These break functionality
- Warnings second - These indicate problems
- Info last - These provide context
3. Group by Source
Categorize errors by their origin:
- Application code - Your own JavaScript
- Third-party libraries - External dependencies
- Browser/extension - Not your code
- Network - API/resource failures
4. Stack Trace Analysis
For JavaScript errors, analyze the stack trace:
Error: Cannot read property 'id' of undefined
at UserComponent.render (UserComponent.js:45)
at processChild (react-dom.js:1234)
at reconcileChildren (react-dom.js:5678)- First line: Error type and message
- Second line: Where error occurred (your code)
- Following lines: Call stack (often framework code)
5. Timing Correlation
Note when errors occur:
- On page load?
- After user action?
- After API response?
- Periodically (interval/timeout)?
Common JavaScript Errors Reference
TypeError
| Error | Cause | Fix |
|---|---|---|
Cannot read property 'x' of undefined | Accessing property on undefined | Add null check |
Cannot read property 'x' of null | Accessing property on null | Add null check |
x is not a function | Calling non-function as function | Check variable type |
Cannot set property 'x' of undefined | Setting property on undefined | Initialize object first |
ReferenceError
| Error | Cause | Fix |
|---|---|---|
x is not defined | Using undefined variable | Declare variable or check spelling |
Cannot access 'x' before initialization | Temporal dead zone (let/const) | Move declaration above usage |
SyntaxError
| Error | Cause | Fix |
|---|---|---|
Unexpected token | Invalid syntax | Check for missing brackets/quotes |
Unexpected identifier | Missing operator or keyword | Review line for typos |
NetworkError
| Error | Cause | Fix |
|---|---|---|
net::ERR_CONNECTION_REFUSED | Server not running | Start server or check URL |
net::ERR_NAME_NOT_RESOLVED | DNS failure | Check domain spelling |
net::ERR_CERT_AUTHORITY_INVALID | SSL certificate issue | Fix certificate or bypass in dev |
Error Prioritization Matrix
| Severity | Impact | Action Required |
|---|---|---|
| Critical | App crashes, data loss | Immediate fix |
| High | Feature broken | Fix before release |
| Medium | Degraded experience | Fix in next sprint |
| Low | Cosmetic issue | Track for later |
Debugging Report Template
## Console Debugging Report
**URL**: [page URL]
**Date**: [timestamp]
**Browser**: [browser version]
### Summary
- Total Errors: X
- Total Warnings: Y
- Critical Issues: Z
### Critical Errors
| Error | Location | Frequency | Impact |
|-------|----------|-----------|--------|
| [error message] | [file:line] | [count] | [description] |
### Stack Trace Analysis
#### Error 1: [title]
**Message**: [full error message]
**Stack Trace**:[stack trace]
**Root Cause**: [analysis]
**Suggested Fix**: [recommendation]
### Warnings to Address
| Warning | Source | Recommendation |
|---------|--------|----------------|
| [warning] | [source] | [action] |
### Next Steps
1. [prioritized action 1]
2. [prioritized action 2]Integration with Network Inspection
Console errors often correlate with network issues:
- Failed API call -> Console shows error about missing data
- CORS blocked -> Console shows CORS error + network 0 status
- JSON parse error -> Network returned invalid JSON
Use network-inspection skill alongside for comprehensive debugging.
Best Practices
- Reproduce consistently - Ensure error can be triggered reliably
- Document exact steps - Note what user action causes the error
- Capture timestamps - When did the error first appear?
- Check multiple browsers - Is it browser-specific?
- Review recent changes - What changed before error started?
- Repository
- jpoutrin/product-forge
- Commit
0ebe7ae
- Last updated
- Created
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.