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.

Practice

1. What is the main purpose of setting a breakpoint in VS Code when debugging a Node.js application?

easy

A. To speed up the execution of the program

B. To automatically fix syntax errors in the code

C. To convert JavaScript code into machine code

D. To pause the program at a specific line to inspect variables and program flow

Solution

1. Step 1: Understand what a breakpoint does

   A breakpoint pauses the program execution at a chosen line so you can check what is happening.

2. Step 2: Identify the purpose in debugging

   Pausing lets you inspect variables and see how the program flows step-by-step.

3. Final Answer:

   To pause the program at a specific line to inspect variables and program flow -> Option D

4. Quick Check:

   Breakpoint = Pause and inspect [OK]

Hint: Breakpoints pause code to check variables and flow [OK]

Common Mistakes:

• Thinking breakpoints fix errors automatically
• Believing breakpoints speed up code
• Confusing breakpoints with code compilation

2. Which of the following is the correct way to start debugging a Node.js app in VS Code using the launch.json file?

easy

A. { "type": "node", "request": "run", "program": "${workspaceFolder}/app.js" }

B. { "type": "node", "request": "launch", "program": "${workspaceFolder}/app.js" }

C. { "type": "node", "request": "compile", "program": "app.js" }

D. { "type": "python", "request": "launch", "program": "app.js" }

Solution

1. Step 1: Check the correct debug type for Node.js

   The type must be "node" to debug Node.js applications.

2. Step 2: Verify the request and program fields

   "request" should be "launch" to start debugging, and "program" points to the main file with workspace variable.

3. Final Answer:

   { "type": "node", "request": "launch", "program": "${workspaceFolder}/app.js" } -> Option B

4. Quick Check:

   Node debug launch with correct program path [OK]

Hint: Use type 'node' and request 'launch' in launch.json [OK]

Common Mistakes:

• Using wrong type like 'python' for Node.js
• Using 'compile' or 'run' instead of 'launch'
• Not using workspaceFolder variable for program path

3. Consider this Node.js code snippet debugged in VS Code with a breakpoint on line 3:

1 const x = 5;
2 const y = 10;
3 const sum = x + y;
4 console.log(sum);

When paused at the breakpoint on line 3, what will be the value of sum in the debugger?

medium

A. undefined

B. 15

C. 5

D. Error: sum is not defined

Solution

1. Step 1: Understand when the breakpoint pauses execution

   The breakpoint on line 3 pauses before executing that line, so sum is not yet assigned.

2. Step 2: Determine the value of sum at pause

   Since line 3 hasn't run, sum is declared but not assigned, so its value is undefined.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Breakpoint pauses before assignment, sum = undefined [OK]

Hint: Breakpoint pauses before line runs, variable not assigned yet [OK]

Common Mistakes:

• Assuming sum already has the calculated value
• Confusing declaration with assignment timing
• Expecting runtime error at breakpoint

4. You set a breakpoint in VS Code but the debugger never pauses when running your Node.js app. Which of these is the most likely cause?

medium

A. The Node.js version is too new

B. You forgot to save the file before running

C. The launch.json file is missing or misconfigured

D. Breakpoints only work in browser debugging

Solution

1. Step 1: Check debugger configuration

   If launch.json is missing or has errors, VS Code cannot attach the debugger properly.

2. Step 2: Understand breakpoint behavior

   Without correct config, breakpoints won't pause execution even if set.

3. Final Answer:

   The launch.json file is missing or misconfigured -> Option C

4. Quick Check:

   Debugger config missing = breakpoints ignored [OK]

Hint: Verify launch.json exists and is correct to enable breakpoints [OK]

Common Mistakes:

• Blaming Node.js version without checking config
• Assuming breakpoints need browser debugging
• Not saving files but that usually doesn't stop breakpoints

5. You want to debug a Node.js app that uses environment variables. How can you configure launch.json to pass an environment variable named API_KEY with value 12345 to your app during debugging?

hard

A. { "type": "node", "request": "launch", "program": "${workspaceFolder}/app.js", "env": { "API_KEY": "12345" } }

B. { "type": "node", "request": "launch", "program": "app.js", "args": ["API_KEY=12345"] }

C. { "type": "node", "request": "launch", "program": "app.js", "envFile": "API_KEY=12345" }

D. { "type": "node", "request": "launch", "program": "app.js", "env": "API_KEY=12345" }

Solution

1. Step 1: Use the correct property for environment variables

   The "env" property in launch.json accepts an object with key-value pairs for environment variables.

2. Step 2: Format the environment variable correctly

   Set "API_KEY" as key and "12345" as its string value inside the "env" object.

3. Final Answer:

   { "type": "node", "request": "launch", "program": "${workspaceFolder}/app.js", "env": { "API_KEY": "12345" } } -> Option A

4. Quick Check:

   Use "env" object with key-value pairs in launch.json [OK]

Hint: Set env variables as key-value pairs inside "env" in launch.json [OK]

Common Mistakes:

• Using args array instead of env object
• Passing env as a string instead of object
• Confusing envFile with direct env variable setting