Docs
20.4-Debugging-Techniques
20.4 Debugging Techniques
Overview
Debugging is the systematic process of identifying, isolating, and fixing bugs in code. Mastering debugging techniques is essential for efficient software development and maintenance.
Learning Objectives
By the end of this section, you'll understand:
- •Browser DevTools debugging features
- •Node.js debugging techniques
- •Debugging strategies and methodologies
- •Using breakpoints effectively
- •Memory and performance debugging
- •Common debugging patterns
Debugging Workflow
┌────────────────────────────────────────────────────────────────┐
│ Debugging Workflow │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ 1. REPRODUCE │◄─── Can you consistently trigger the bug? │
│ └──────┬──────┘ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 2. ISOLATE │◄─── Where exactly does it occur? │
│ └──────┬──────┘ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 3. IDENTIFY │◄─── What is the root cause? │
│ └──────┬──────┘ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 4. FIX │◄─── Implement the solution │
│ └──────┬──────┘ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 5. VERIFY │◄─── Confirm bug is fixed │
│ └──────┬──────┘ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 6. PREVENT │◄─── Add tests, improve code │
│ └─────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Console Methods
┌────────────────────────────────────────────────────────────────┐
│ Console API Reference │
├────────────────────────────────────────────────────────────────┤
│ │
│ Basic Logging │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ console.log() → General logging │ │
│ │ console.info() → Informational │ │
│ │ console.warn() → Warnings (yellow) │ │
│ │ console.error() → Errors (red) │ │
│ │ console.debug() → Debug info (verbose) │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Formatting │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ console.table() → Display data as table │ │
│ │ console.dir() → Object inspection │ │
│ │ console.group() → Start collapsed group │ │
│ │ console.groupEnd()→ End group │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Performance │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ console.time() → Start timer │ │
│ │ console.timeEnd() → End timer & log │ │
│ │ console.count() → Count executions │ │
│ │ console.countReset() → Reset counter │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Stack & Assert │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ console.trace() → Show call stack │ │
│ │ console.assert() → Log if false │ │
│ │ console.clear() → Clear console │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Browser DevTools
┌────────────────────────────────────────────────────────────────┐
│ Chrome DevTools Panels │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┬──────────┬──────────┬──────────┬──────────┐ │
│ │ Elements │ Console │ Sources │ Network │ Perform- │ │
│ │ │ │ │ │ ance │ │
│ └──────────┴──────────┴──────────┴──────────┴──────────┘ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ ▼ ▼ ▼ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Inspect │ │ Execute │ │ Debug │ │ Monitor │ │ Profile │ │
│ │ DOM │ │ JS │ │ code │ │requests │ │ runtime │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ Key Shortcuts: │
│ F12 / Cmd+Opt+I → Open DevTools │
│ Cmd+Shift+C → Inspect element │
│ Cmd+P → Open file │
│ Cmd+Shift+P → Command palette │
│ │
└────────────────────────────────────────────────────────────────┘
Breakpoint Types
┌────────────────────────────────────────────────────────────────┐
│ Types of Breakpoints │
├────────────────────────────────────────────────────────────────┤
│ │
│ 1. Line Breakpoints │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Click line number in Sources panel │ │
│ │ Execution pauses at that line │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 2. Conditional Breakpoints │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Right-click → "Add conditional breakpoint" │ │
│ │ Pauses only when condition is true │ │
│ │ Example: i === 5 || user.id === targetId │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 3. Logpoints │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Right-click → "Add logpoint" │ │
│ │ Logs message without pausing │ │
│ │ Example: "User: {user.name}, Count: {count}" │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 4. DOM Breakpoints │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Right-click element → "Break on..." │ │
│ │ • Subtree modifications │ │
│ │ • Attribute modifications │ │
│ │ • Node removal │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 5. Event Listener Breakpoints │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Sources → Event Listener Breakpoints │ │
│ │ • Mouse: click, mouseover, etc. │ │
│ │ • Keyboard: keydown, keyup, etc. │ │
│ │ • XHR/Fetch │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 6. Exception Breakpoints │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Pause on: □ Caught exceptions │ │
│ │ ☑ Uncaught exceptions │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Debugging Controls
┌────────────────────────────────────────────────────────────────┐
│ Execution Controls │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ▶️ Resume ⏭️ Step Over ⏬ Step Into │ │
│ │ (F8) (F10) (F11) │ │
│ │ │ │
│ │ ⏫ Step Out ⏸️ Pause 🔄 Restart │ │
│ │ (Shift+F11) (F8) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ Resume (F8) → Continue until next breakpoint │
│ Step Over (F10) → Execute line, skip function internals │
│ Step Into (F11) → Enter function on current line │
│ Step Out → Exit current function │
│ │
│ Scope Inspection: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ • Local: Variables in current function │ │
│ │ • Closure: Variables from parent scopes │ │
│ │ • Global: Global object (window/global) │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Watch Expressions: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Add expressions to monitor during debugging │ │
│ │ Example: user.isAdmin, items.length, total > 100 │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Node.js Debugging
┌────────────────────────────────────────────────────────────────┐
│ Node.js Debugging Options │
├────────────────────────────────────────────────────────────────┤
│ │
│ 1. Built-in Debugger │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ node inspect script.js │ │
│ │ │ │
│ │ Commands: │ │
│ │ • cont, c → Continue │ │
│ │ • next, n → Step over │ │
│ │ • step, s → Step into │ │
│ │ • out, o → Step out │ │
│ │ • repl → Enter REPL mode │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 2. Chrome DevTools │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ node --inspect script.js → Start inspector │ │
│ │ node --inspect-brk script.js → Break at start │ │
│ │ │ │
│ │ Open: chrome://inspect │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 3. VS Code Debugger │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ launch.json: │ │
│ │ { │ │
│ │ "type": "node", │ │
│ │ "request": "launch", │ │
│ │ "name": "Debug", │ │
│ │ "program": "${file}" │ │
│ │ } │ │
│ │ │ │
│ │ Press F5 to start debugging │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Debugging Strategies
| Strategy | When to Use | Approach |
|---|---|---|
| Binary Search | Large codebase | Comment out half, narrow down |
| Rubber Duck | Logic errors | Explain code aloud step by step |
| Print Debugging | Quick checks | Add console.log at key points |
| Bisect | Regression bugs | Find the commit that broke it |
| Divide & Conquer | Complex flow | Isolate subsystems |
| Trace Backwards | From error | Start at error, work back |
Common Bug Types
┌────────────────────────────────────────────────────────────────┐
│ Common Bug Categories │
├────────────────────────────────────────────────────────────────┤
│ │
│ Logic Errors │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ • Off-by-one errors (< vs <=) │ │
│ │ • Wrong boolean logic (&&/|| confusion) │ │
│ │ • Incorrect comparisons (== vs ===) │ │
│ │ • Wrong variable used │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Async Errors │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ • Missing await │ │
│ │ • Race conditions │ │
│ │ • Unhandled promise rejections │ │
│ │ • Callback not called │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Reference Errors │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ • null/undefined access │ │
│ │ • Accessing before declaration │ │
│ │ • Typos in property names │ │
│ │ • Scope confusion │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Type Errors │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ • String instead of number │ │
│ │ • Array expected, got object │ │
│ │ • Function called on wrong type │ │
│ │ • Implicit type coercion │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Memory Debugging
┌────────────────────────────────────────────────────────────────┐
│ Memory Debugging │
├────────────────────────────────────────────────────────────────┤
│ │
│ Memory Tab (DevTools): │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ○ Heap snapshot → Capture memory state │ │
│ │ ○ Allocation timeline → Track allocations │ │
│ │ ○ Allocation sampling → Sample-based profiling │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Finding Memory Leaks: │
│ 1. Take heap snapshot (baseline) │
│ 2. Perform suspected leaking action │
│ 3. Take another snapshot │
│ 4. Compare snapshots │
│ 5. Look for: detached DOM, growing arrays, event listeners │
│ │
│ Common Memory Leak Causes: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ • Forgotten timers/intervals │ │
│ │ • Detached DOM nodes with references │ │
│ │ • Closures capturing variables │ │
│ │ • Event listeners not removed │ │
│ │ • Global variables accumulating │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
Key Debugging Tips
┌────────────────────────────────────────────────────────────────┐
│ Debugging Best Practices │
├────────────────────────────────────────────────────────────────┤
│ │
│ ✓ Reproduce first - Make the bug happen consistently │
│ ✓ Isolate - Create minimal reproduction case │
│ ✓ Check assumptions - Verify what you think is true │
│ ✓ Read error messages - They often tell you what's wrong │
│ ✓ Use version control - Bisect to find breaking changes │
│ ✓ Take breaks - Fresh eyes find bugs faster │
│ ✓ Write tests - Prevent regressions │
│ ✓ Document findings - Help future debugging │
│ │
│ Debug Mindset: │
│ • Be systematic, not random │
│ • Question everything │
│ • Trust the computer (it does what you tell it) │
│ • The bug is in YOUR code │
│ │
└────────────────────────────────────────────────────────────────┘
Navigation
- •Previous: 20.3 Mocking & Test Doubles
- •Next: 20.5 Code Quality & Coverage