VS Code Debugging: Master the Built-in Debugger

// Instead of:
console.log('User:', user);
console.log('Data:', data);
console.log('Result:', result);

// Just set a breakpoint and inspect!
// Click in the gutter, press F9
// Hover over variables to see values
// Use Debug Console to evaluate expressions

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.js"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 9229
    }
  ]
}

Variables:    Shows local, global variables
Watch:        Monitor expressions
Call Stack:   Current execution path
Breakpoints:  List of all breakpoints
Debug Console: Evaluate expressions

// 1. Regular breakpoint (F9)
// Stops execution when hit

function processData(data) {
  const result = data.map(item => { // ← Set breakpoint here
    return transform(item);
  });
  return result;
}

// 2. Conditional breakpoint
// Right-click → Edit Breakpoint → Add condition
// Break only when: data.length > 100

// 3. Logpoint
// Right-click → Add Logpoint
// Prints message without stopping
// console.log('Data:', data);

// 4. Hit count breakpoint
// Break after N times
// Right-click → Edit Breakpoint → Set hit count

// 5. Triggered breakpoint
// Only active when another breakpoint is hit
// Right-click → Edit Breakpoint → Set trigger

// Break when condition is true
data.length === 0
user.age < 18
response.status !== 200

// Break on specific value
item.id === 123

// Complex conditions
data.length > 100 && data.every(item => item.valid)

// Logpoint with expressions
`Processing item ${item.id}: ${item.name}`

// Call functions in conditions
isValidUser(user)  // Break if returns true

F5   - Start debugging
F9   - Toggle breakpoint
F10  - Step over (next line)
F11  - Step into (function)
Shift+F11 - Step out (return to caller)
Shift+F5 - Stop debugging

// Continue execution
F5 or Continue button

// Restart
Cmd+Shift+F5 (Mac)
Ctrl+Shift+F5 (Windows)

// Hover over variable
const user = { name: 'John', age: 30 };
// Hover to see value

// Add to Watch
// Type expression in Watch panel
user.name
data.length
calculateTotal(items)

// Scope variables
// Automatically shows:
// - Local variables
// - Closure variables
// - Global variables

// Variable inspection
// Click on object to expand
// See properties and values
// Modify values inline

// Evaluate expressions in Debug Console
// Variables are in scope

> user.name
'John'

> data.filter(item => item.active)
[...items]

> calculateTotal(cart)
123.45

// Call functions
> processData(rawData)
[...processed]

// Modify variables
> counter = 100
100

> items.push(newItem)
5

// Test code snippets
> items.map(i => i.price * 1.1)
[...prices]

// View call stack in panel
// Shows execution path
// Click frames to navigate

// Example stack:
processData (index.js:25)
transform (utils.js:10)
validate (helpers.js:5)

// Jump to any frame
// Inspect variables at that level
// Understand how you got here

{
  "type": "node",
  "request": "launch",
  "name": "Debug Node.js",
  "program": "${workspaceFolder}/src/index.js",
  "cwd": "${workspaceFolder}",
  "runtimeExecutable": "node",
  "runtimeArgs": ["--nolazy"],
  "env": {
    "NODE_ENV": "development",
    "DEBUG": "*"
  },
  "console": "integratedTerminal",
  "stopOnEntry": false,
  "skipFiles": ["<node_internals>/**"]
}

{
  "name": "Next.js: debug server-side",
  "type": "node-terminal",
  "request": "launch",
  "command": "npm run dev"
}

{
  "name": "Next.js: debug client-side",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

{
  "name": "Python: Current File",
  "type": "debugpy",
  "request": "launch",
  "program": "${file}",
  "console": "integratedTerminal",
  "justMyCode": true
}

{
  "name": "Launch Package",
  "type": "go",
  "request": "launch",
  "mode": "auto",
  "program": "${workspaceFolder}",
  "env": {},
  "args": []
}

{
  "name": "Debug Jest Tests",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": ["test", "--", "--runInBand"],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

{
  "name": "Debug Vitest",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/node_modules/.bin/vitest",
  "args": ["run", "--reporter=verbose"],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

# Install Remote-SSH extension
# Configure SSH hosts

# .ssh/config
Host server
  HostName example.com
  User ubuntu
  IdentityFile ~/.ssh/key.pem

# Open remote folder
# Code → Open Folder → Select SSH host
# Debug works just like local

{
  "name": "Docker Node.js",
  "type": "node",
  "request": "attach",
  "port": 9229,
  "address": "localhost",
  "localRoot": "${workspaceFolder}",
  "remoteRoot": "/app"
}

// docker-compose.yml
services:
  app:
    build: .
    ports:
      - "9229:9229"
    command: node --inspect=0.0.0.0:9229 index.js

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:///*": "${webRoot}/*"
  }
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Server",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "name": "Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    }
  ],
  "compounds": [
    {
      "name": "Server+Client",
      "configurations": ["Server", "Client"]
    }
  ]
}

F5            - Start/Continue
F9            - Toggle breakpoint
F10           - Step over
F11           - Step into
Shift+F11     - Step out
Shift+F5      - Stop

Cmd+Shift+P   - Show all commands
Cmd+Shift+D   - Show debug
Cmd+K Cmd+X   - Cut line
Cmd+Enter     - Insert line below

// Add debug configuration
// Click "Add Configuration" in launch.json

// Auto-attach to process
// Debug → Attach to Process
// Select Node.js process

// JavaScript Debug Terminal
// Terminal menu → Create JavaScript Debug Terminal
// Runs code with debugger attached

// Ensure source maps work
{
  "type": "node",
  "request": "launch",
  "sourceMaps": true,
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "webRoot": "${workspaceFolder}",
  "resolveSourceMapLocations": [
    "${workspaceFolder}/**",
    "!**/node_modules/**"
  ]
}

{
  "skipFiles": [
    "<node_internals>/**",
    "node_modules/**",
    "${workspaceFolder}/lib/**"
  ]
}

{
  "name": "Debug User Registration Flow",
  "type": "node",
  "request": "launch"
}

{
  "env": {
    "NODE_ENV": "test",
    "LOG_LEVEL": "debug"
  },
  "envFile": "${workspaceFolder}/.env"
}

{
  "preLaunchTask": "npm: build",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"]
}