11. Debugging in VS Code

Sprinkling console.log() statements throughout your code to find a bug is highly inefficient. It litters your files, forces constant rebuilds, and doesn't let you inspect call hierarchies. VS Code features a spectacular **Integrated Debugger** that allows you to freeze execution, inspect variables, and step through scripts line-by-line.

Core UI Debugging anatomy

Open the Run & Debug view by pressing Ctrl + Shift + D (Cmd + Shift + D on macOS). The sidebar splits into four extremely useful panels:

1. Variables: Displays all active variables (Local, Global, and Closure) and their values in memory at the exact millisecond execution was frozen. You can even edit variable values live in memory to test bug fixes!
2. Watch: Add specific variables or expressions (e.g. `user.isActive === true`) you want to monitor constantly as you step through code.
3. Call Stack: Displays the complete active stack of function executions, helping you trace exactly which file and function triggered the current route.
4. Breakpoints: Managed list of all active breakpoints in your project.

Breakpoints & Conditional Breakpoints

A **Breakpoint** tells the debugger to freeze execution when it hits a specific line of code:

• Add Breakpoint: Click the narrow margin directly to the left of your line numbers. A red dot appears, signifying an active breakpoint!
• Conditional Breakpoints (Advanced): What if you are inside a loop that cycles 1,000 times, and you only want to freeze execution when `userId === 99`?
  • Right-click the red breakpoint dot.
  • Select **Edit Breakpoint**.
  • Type your conditional expression: userId === 99.
  • VS Code will bypass all other loop cycles, freezing execution strictly when your condition evaluates to true, saving you from clicking "Continue" 99 times!

Configuring `launch.json`

To tell the debugger how to launch your application, compile your code, or hook into a running process, you configure a **`launch.json`** file:

1. Click the **Create a launch.json file** link inside the Run & Debug sidebar.
2. Select your workspace language environment (e.g. Node.js).
3. VS Code will create a `.vscode/launch.json` file. Below is an example setup to launch a Node.js web server:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Server Node",
            "program": "${workspaceFolder}/server.js",
            "skipFiles": ["<node_internals>/**"],
            "env": {
                "PORT": "8080",
                "NODE_ENV": "development"
            }
        }
    ]
}

Stepping Controls Toolbar

When execution is frozen, a floating toolbar appears at the top of your screen:

• Continue (F5): Resumes execution until the next active breakpoint is encountered.
• Step Over (F10): Executes the current line of code and steps to the next line in the active file, without entering nested functions.
• Step Into (F11): Jumps your cursor inside the function declaration invoked on the current line.
• Step Out (Shift + F11): Completes the current function execution and jumps back up to the caller line.
• Restart (Ctrl + Shift + F5): Relaunches the debugger and starts your program over.