Debugging with VS Code in Node.js - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start debugging by setting a breakpoint in VS Code.

Node.js

console.log('Hello, world!'); // Set a [1] here to pause execution

Drag options to blanks, or click blank then click option'

Aconsole

Bdebugger

Cbreakpoint

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'debugger' keyword instead of setting a breakpoint in VS Code.

A breakpoint is a marker in VS Code where the program pauses during debugging.

2fill in blank

medium

Complete the launch configuration to debug a Node.js app in VS Code.

Node.js

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/[1]"
}

Drag options to blanks, or click blank then click option'

Apackage.json

Bindex.js

CREADME.md

Dlaunch.json

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'package.json' or 'launch.json' instead of the main JS file.

The program field points to the main JavaScript file to run, usually index.js.

3fill in blank

hard

Fix the error in the debug console command to inspect variable 'count'.

Node.js

Debug console command: [1] count

Drag options to blanks, or click blank then click option'

Aevaluate

Bconsole.log

Cinspect

Dprint

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'print' or 'console.log' which are not valid debug console commands.

In VS Code debug console, use evaluate or just type the variable name to see its value.

4fill in blank

hard

Fill both blanks to set a conditional breakpoint that pauses when 'x' is greater than 10.

Node.js

// Set conditional breakpoint: right-click on breakpoint and enter condition: x [1] [2]

Drag options to blanks, or click blank then click option'

A>

B10

C==

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '==' or '<' which do not match the condition 'greater than 10'.

Conditional breakpoints pause only when the condition is true, here when x > 10.

5fill in blank

hard

Fill both blanks to create a watch expression that shows the length of array 'items'.

Node.js

Watch expression: [1]..[2]

Drag options to blanks, or click blank then click option'

Aitems

Blength

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'size' which is not a property of JavaScript arrays.

The length of an array is accessed by items.length. The middle blank is empty to represent no extra token.

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