Debugging in VS Code

Reaching for console.log on every bug is a habit worth breaking. VS Code's built-in debugger lets you pause execution, inspect the full call stack, and step through logic without editing your code.

The launch configuration

Debugging is driven by .vscode/launch.json. This example attaches to a Node process and runs the current file.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug current file",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Breakpoints beyond the basics

Click the gutter for a standard breakpoint, but the conditional and logpoint variants are where the real time savings are.

Conditional breakpoint   Pauses only when an expression is true
Logpoint                 Logs a message without pausing (no code edits)
Hit count breakpoint     Pauses after N hits

A conditional breakpoint like user.id === 42 saves you from stepping through a loop a thousand times to reach the one iteration that matters.

Stepping and inspecting

Once paused, the debug toolbar controls flow, and the panels show state.

F5    Continue
F10   Step over
F11   Step into
Shift + F11   Step out

Use the Watch panel to track expressions and the Debug Console to evaluate code in the paused frame's scope.

Takeaways

• A launch.json config makes debugging repeatable across the team.
• Conditional breakpoints and logpoints beat scattering print statements.
• The Debug Console evaluates expressions in the current paused scope.

Commit your launch.json so teammates inherit working debug setups instead of reinventing them.