John StewartTime to talk about debugging a bit. This post will be quick and be mainly focused on how I do things when it comes to debugging Node apps in Visual Studio Code.
Visual Studio Code Launch Configuration
VS Code has a nice debugger in the left column. Click on the debugger then you will see an option cog you can click that will ask what kind of configuration you want.
Once you select Node.js, it will bring up a configuration that has a couple properties.
The one we directly care about the last property, program. Here it states that it will launch a program called index.js within our current workspace. So let's write some Node and see what this does.
const avengers = ['Iron Man', 'Captain America', 'Thor', 'Captain Marvel'];
for (let i = 0; i < avengers.length; i++) {
const theHero = avengers[i];
console.log(theHero);
}
Here is some code we can use as our basis for index.js. After you save that code to the index.js file in your workspace. You can drop a breakpoint on line 5 by clicking in the rail left of the line number.
Then if you go back to your debugger and click the play button it will run the program and pause the program execution on that line.
In the left hand side you can see the variable with it's value in the current scope, theHero: "Iron Man". There is a bunch of other scopes you can drill into and inspect the variables and that specific execution time.
This is a basic example but shows how nice and valuable a good debugger is. There are a variety of built in useful options that you can explore within VS Code. Check out the Node.js Debugging Config Common Scenarios section on the VS Code docs for more info.
Visual Studio Code Attach Configuration
The most common way that I use VS Code debugger is by attaching the debugger to a currently running Node process and setting breakpoints within that process. I use this often when debugging some Node Express apps.
Below is a basic express app that I'll use as the base for the examples here. Replace the code in the index.js file and don't forget to install express via npm.
const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;
app.get('/', (req, res) => {
const data = {
hello: 'world'
};
res.json(data);
});
app.listen(PORT, () => console.log(`Up and running ${PORT}`));
Next, open up .vscode/launch.json. You will then see the big blue Add Configuration button. Once you click that you will be prompted with a bunch of configurations to pick from. In this case we are picking the first Node.js Attach option.
That config will then be added to your array of configs for you to use in the debugger.
Next, run node with the --inspect flag.
Then you will see Node start up the script telling you the Node debugger is listening on port 9229 plus a Chrome dev tools URL then your app output. That port is the same port as the one your attach configuration is looking for.
Next, go to your index.js script and drop a breakpoint within the app.get call before the response is sent.
Open up your VS Code debugger and press play and you should see some controls come up at the top of VS Code. Now we need to navigate to that route to trigger that code and the debugger, open up Chrome and hit localhost:5000. This should kick you back to the VS Code debugger where you can view the variables and information in scope of the request.
That's it!
Summary
console.log is the tried and true but I think spending an hour or more trying to understand the VS Code debugger or any debug tools around will make solving problems a little bit easier. So I recommend you check out some of the information below!
If you liked this article then please show some ❤️. If you didn’t then lets talk about it 😃.
Originally posted on my blog at johnstewart.io.
