Mar 3, 2023
- Clone this repository
git clone [email protected]:Jkker/vscode-nodejs-debugging.git # or git clone https://github.com/Jkker/vscode-nodejs-debugging.git
- Install Dependencies
cd vscode-nodejs-debugging npm i
Let’s run our program and see what happens! We can use the
startscript we defined in our
npm run startor manually type
Oops, we got an issue. Luckily, we can locate it by hover on the error path and open it using
ctrl + click.
This brings us directly to line 8 where this error occurs.
Let’s take another look at the most important part of our error message:
Cannot read properties of undefined (reading 'title')
This means that we are accessing the property
titleon something that’s
In this case, it’s
posts[posts.length - 1]or
posts.at(-1)to access the last element.
Run the program again and see if you can help me fix the second error!
⚠️ Spoil Alert
app.listen()to throw this error.
To fix this, we can move
??here is the Nullish coalescing operator. It returns its right-hand side when its left-hand side is
Once we got those errors fixed, we can finally start our server successfully on port 3000.
We can verify that our app is up and running using curl. However, looks like our
GET /postsroute isn’t doing that well: our
userIdfilter doesn’t work. It returns an empty array, though we obviously have some posts from user 1 in our json.
Since we don’t have an error message, it might be hard to find out where this bug occurs. This is one of the reasons why we need a debugger.
- You can open the VSCode Debugger by clicking on the Debug icon in the left sidebar, or by pressing
Ctrl+Shift+Don Windows or
Run and Debug
- VS Code will try to automatically detect your debug environment, but if this fails, you will have to choose it manually. In this case, we should select
- This will run the currently active file in your editor, so make sure that the entry point of your program (e.g.
index.js) is active, instead of something like
- Optionally, you can click on the gear icon open the
launch.jsonconfiguration. This is where you can set environmental variables, command line arguments, working directory, etc. Details can be found here: Launch.json attributes.
Our app is now running normally as if we ran it from our terminal. To find out what happens when we visits
/posts, we should add a breakpoint on line
18to allow us to inspect the state of our program. Right click on the red dot that appears when you hover on the left-side of the line number to bring up the menu.
Now, restart our program by clicking on the restart button on the floating toolbar.
Once we’ve sent a request to
posts?userId=1(via a browser or
curl), our debugger pauses our program before it runs line 18. On the left variables panel, we can see that userId is
undefinedbecause of this.
Step Over ⤵️(the 2nd button) on the floating toolbar to move on to the next line of code.
While our code is running, we can add another breakpoint at line 25 to take a closer look at how the filtering goes. Then, click
Continue▶️(the first button) to let our debugger move on to the next breakpoint if there’s any.
Once we hit line 25, click
Step Into ⬇️so we can dive into the callback function of
Let’s add those variables that we are interested into the
Watchpanel. You can also hover your mouse on them in your code to see their values.
They look different, right? Let’s verify this with the Debug Console.
Everything we run in the debug console are evaluated under the current scope of our running program. In this case, I use the
typeofoperator to check these variable’s types. You can also type an expression here or in the
userId == post.userId.
To fix this, we can either change the strict equality operator
==or do a type conversion.
Voilà! Restart the debugger and test it out. Our program should be running as expected now.