Debugging with VS Code in Node.js - Hands-On Comparison

Debugging with VS Code

📖 Scenario: You are building a simple Node.js program that calculates the total price of items in a shopping cart. Sometimes the total is incorrect, so you want to learn how to debug your code using Visual Studio Code.

🎯 Goal: Learn how to set up a Node.js project and use VS Code's debugger to find and fix errors in your code step-by-step.

📋 What You'll Learn

Create a list of items with prices

Add a variable to hold the total price

Use a loop to sum the prices

Add a breakpoint and debug the code in VS Code

💡 Why This Matters

🌍 Real World

Debugging is a key skill for fixing errors in real software projects. Using VS Code's debugger helps you understand what your code is doing step-by-step.

💼 Career

Many software development jobs require debugging skills. Knowing how to use VS Code's debugger makes you more efficient and confident in finding and fixing bugs.

1

Create the items list

Create a constant array called items with these exact objects: { name: 'apple', price: 1.2 }, { name: 'banana', price: 0.8 }, and { name: 'orange', price: 1.5 }.

Node.js

# Your code here

Hint

Use const items = [ ... ] and include the exact objects inside the array.

2

Add a total variable

Add a variable called total and set it to 0 to hold the sum of prices.

Node.js

const items = [
  { name: 'apple', price: 1.2 },
  { name: 'banana', price: 0.8 },
  { name: 'orange', price: 1.5 }
];

// Your code here

Hint

Use let total = 0; to create the variable.

3

Sum the prices with a loop

Use a for loop with variable item to go through items and add item.price to total inside the loop.

Node.js

const items = [
  { name: 'apple', price: 1.2 },
  { name: 'banana', price: 0.8 },
  { name: 'orange', price: 1.5 }
];

let total = 0;

// Your code here

Hint

Use for (const item of items) { total += item.price; } to sum prices.

4

Add a breakpoint and debug

Add a debugger; statement inside the for loop after adding item.price to total. This will let you pause and inspect variables in VS Code's debugger.

Node.js

const items = [
  { name: 'apple', price: 1.2 },
  { name: 'banana', price: 0.8 },
  { name: 'orange', price: 1.5 }
];

let total = 0;

for (const item of items) {
  total += item.price;
  // Your code here
}

Hint

Insert debugger; inside the loop to pause execution in VS Code.

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