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?