Debugging Code You've Never SeenLesson 4.3

How to use a debugger to step through unfamiliar code

breakpoints, step over vs step into vs step out, watch expressions, call stack panel, conditional breakpoints, VS Code debugger setup

The Debugger Freezes Time

A debugger lets you pause execution at any line and inspect the entire program state at that moment. It's dramatically more powerful than logging because you see everything — not just what you thought to log.

VS Code Debugger: Basic Setup

// .vscode/launch.json — add this to your project
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug App",
      "program": "${workspaceFolder}/src/index.js",
      "env": { "NODE_ENV": "development" }
    }
  ]
}

The Three Navigation Controls

Step Over (F10) — run the current line, stay at the same function level. Use when you don't need to see inside a function call.
Step Into (F11) — follow the execution into the called function. Use when the bug might be inside that function.
Step Out (Shift+F11) — run to the end of the current function and return to the caller. Use when you've seen enough of the current function.

// Conditional breakpoint: pause only when condition is true
// Right-click a breakpoint in VS Code → Edit Breakpoint
// Enter condition: userId === '507f1f77bcf86cd799439011'
// Useful for bugs that only occur with specific data

Use watch expressions to monitor specific variables without logging — add them in the Watch panel and they update live as you step.