Node.js Beginner Debugging

I’ve recently started working more with Node.js, and with my inexperience comes a lot of broken apps and code that simply doesn’t work. It can be pretty frustrating, but from learning where my mistakes most commonly arise, I can hopefully stop myself from erring in the same way.

I won’t go so far as to call this first method “debugging.” In the context of console.log, I know this terminology is controversial. For me, though, the console is a great place to start to find my own errors.

Not only could I be incorrect through a typo or missing bracket, but I could also have misconstrued some of my own logic, so I use the console to double check.

So for example, if I’m not receiving the output I’m expecting, I try a console.log on my variables to ensure I’m receiving the intended information.

A note about this next part: it applies to Chrome browsers only. I’m sorry to those using Firefox, Safari, or *gasp* Internet Explorer.

Here are the getting started debugging tips from the Node.js docs. Always read the docs!

The debugger tool is called just that. Add the word “debugger” to your code in VSCode or your IDE of choice, and you can now check and test your code line-by-line in the browser.

To start the debugging process — assuming you are just running your app file — you would run “node inspect app.js” from the command line. Doing this, you have now activated the Inspector Protocol, part of Chrome’s V8 engine, which most people will interact with through Chrome DevTools.

“V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others.”

Here are some docs getting into the nitty gritty of V8 and all it does.

Once you have placed inspect in your command line prompt, you can move to the browser.

Visiting chrome://inspect, you will see the target is the particular file where you have placed the debugger.

From here, you can click “inspect,” which will open your developer tools. You may have used the DevTools in the past, so you’ll recognize the layout. It includes all of the normal bits you’d expect to find, minus the elements tab since you are not debugging any HTML.

In the DevTools, you can now run your code, pausing from line to line, seeing where you are in the call stack and how your functions are working.

You have access to tons of information in one spot now. Your functions and variables, as well as your local and global scope and any closures are accessible here. You can further test this information to ensure things are working as you think by checking it out in the console.

These tools are an excellent way to start debugging before diving deeper into error messages and turning to Stack Overflow.