Debugging Like a Pro

VS Code's built-in debugger replaces console.log with a much more powerful workflow.

Setting up launch.json

Press F5 or go to Run → Start Debugging. VS Code will suggest configurations:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Server",
      "program": "${workspaceFolder}/src/server.ts",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["ts-node"],
      "console": "integratedTerminal"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug Frontend",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Breakpoints

Click the red dot in the gutter (left of line numbers) to set a breakpoint. When execution hits that line, it pauses so you can inspect everything.

Conditional breakpoints — Right-click the gutter → "Add Conditional Breakpoint". Set user.role === 'admin' to only pause for admin users.

Logpoints — Like breakpoints that log instead of pausing. Right-click → "Add Logpoint". Write User logged in: {user.email} — no code changes needed.

While paused

- Variables panel — See all variables in scope

- Watch panel — Track specific expressions

- Call Stack — See the full chain of function calls

- Debug Console — Run any expression in the current context

Step controls

Once you learn the debugger, you'll never go back to console.log.