Debugging

Debugging Skill

Guide for debugging with targeted log injection and runtime analysis.

When to Activate

Suggest /debug-tools:debug when users describe:

• "X is not working"
• "Getting error Y when doing Z"
• "Something broke after [change]"
• Silent failures or unexpected behavior

Log Format

console.log("[DEBUG] [file:line] description", { values })

• [DEBUG] - Prefix for grep and cleanup
• [file:line] - Location for navigation
• description - What this log checks
• { values } - Relevant data (no sensitive info)

Log Patterns

React/Next.js

// Lifecycle
console.log("[DEBUG] [Component.tsx:10] mount", { props })

// Effect
useEffect(() => {
  console.log("[DEBUG] [Component.tsx:15] effect run", { deps })
  return () => console.log("[DEBUG] [Component.tsx:17] cleanup")
}, [deps])

// State
console.log("[DEBUG] [Component.tsx:25] before setState", { current: state })

Node.js/Express

// Request
console.log("[DEBUG] [route.ts:10] request", { method: req.method, path: req.path })

// Error
console.log("[DEBUG] [service.ts:30] caught error", { name: err.name, message: err.message })

API Calls

console.log("[DEBUG] [api.ts:10] fetch start", { url, method })
console.log("[DEBUG] [api.ts:15] fetch done", { status: res.status, ok: res.ok })

Common Bug Patterns

Confidence Scoring

Cleanup

After debugging, all [DEBUG] logs are removed automatically.

Manual check:

grep -rn '\[DEBUG\]' . --include='*.ts' --include='*.tsx' --include='*.js' --include='*.jsx'

MCP Integration