Debugging with VS Code in Node.js - Visual Side-by-Side Comparison

Concept Flow - Debugging with VS Code

Start VS Code

↓

Open Node.js project

↓

Set breakpoints in code

↓

Run debugger

↓

Execution pauses at breakpoint

↓

Inspect variables & call stack

↓

Step over / into / out

↓

Fix bugs

↓

Continue or stop debugging

This flow shows how to start debugging in VS Code by setting breakpoints, running the debugger, inspecting state, stepping through code, and fixing bugs.

Execution Sample

Node.js

const x = 5;
const y = 10;
const sum = x + y;
console.log(sum);

This simple Node.js code adds two numbers and logs the result. We will debug it by pausing at the sum calculation.

Execution Table

Step	Action	Code Line	Breakpoint Hit	Variable State	Debugger Action
1	Start debugging	const x = 5;	No	x=undefined, y=undefined, sum=undefined	Debugger launches Node.js process
2	Execute line	const x = 5;	No	x=5, y=undefined, sum=undefined	Code runs, x assigned
3	Execute line	const y = 10;	No	x=5, y=10, sum=undefined	Code runs, y assigned
4	Pause at breakpoint	const sum = x + y;	Yes	x=5, y=10, sum=undefined	Execution pauses before sum calculation
5	Inspect variables	const sum = x + y;	Yes	x=5, y=10, sum=undefined	User views variable values in debugger
6	Step over	const sum = x + y;	Yes	x=5, y=10, sum=15	sum calculated, execution moves to next line
7	Execute line	console.log(sum);	No	x=5, y=10, sum=15	sum logged to console
8	Program ends		No	x=5, y=10, sum=15	Debugger stops as program finishes

💡 Program ends after logging sum, debugger session stops

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 6	Final
x	undefined	5	5	5	5
y	undefined	undefined	10	10	10
sum	undefined	undefined	undefined	15	15

Key Moments - 3 Insights

Why does the debugger pause before the sum is calculated?

Because a breakpoint is set on the line 'const sum = x + y;', the debugger stops before executing that line, letting you inspect variables before the calculation (see execution_table step 4).

What does 'Step over' do in the debugger?

'Step over' runs the current line and pauses at the next line without going inside any function calls. Here, it calculates sum and moves to the next line (see execution_table step 6).

Why are variables undefined at the start?

Before the code runs, variables have no value. They get assigned as the code executes line by line (see variable_tracker start column and steps 2-3).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'sum' at step 4 when the breakpoint hits?

A 5

B 15

C undefined

D 10

💡 Hint

Check the 'Variable State' column at step 4 in the execution_table.

At which step does the debugger calculate the value of 'sum'?

A Step 3

B Step 6

C Step 4

D Step 7

💡 Hint

Look for when 'sum' changes from undefined to 15 in the variable state.

If you remove the breakpoint, what will happen to the debugger flow?

A It will run the whole program without pausing

B It will pause at the last line

C It will pause at the first line

D It will show an error

💡 Hint

Think about what breakpoints do and check the 'Breakpoint Hit' column in the execution_table.

Concept Snapshot

Debugging with VS Code for Node.js:
- Open your project in VS Code
- Set breakpoints by clicking next to code lines
- Start debugger with Run > Start Debugging
- Execution pauses at breakpoints
- Inspect variables and call stack
- Use Step Over/Into/Out to navigate
- Fix bugs and continue or stop debugging

Full Transcript

This visual guide shows how to debug Node.js code using VS Code. First, you open your project and set breakpoints on lines where you want the program to pause. When you start debugging, the program runs until it hits a breakpoint, then pauses. You can inspect variables like x, y, and sum to see their current values. Using debugger controls like Step Over, you can run code line by line to watch how variables change. This helps find and fix bugs by seeing exactly what the program does at each step. Finally, you continue running or stop the debugger when done.