Console 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:

1. Errors first - These break functionality
2. Warnings second - These indicate problems
3. 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:

1. Failed API call -> Console shows error about missing data
2. CORS blocked -> Console shows CORS error + network 0 status
3. JSON parse error -> Network returned invalid JSON

Use network-inspection skill alongside for comprehensive debugging.

Best Practices

1. Reproduce consistently - Ensure error can be triggered reliably
2. Document exact steps - Note what user action causes the error
3. Capture timestamps - When did the error first appear?
4. Check multiple browsers - Is it browser-specific?
5. Review recent changes - What changed before error started?