Introductory Guide to Debug Node.js Apps with Built-in or VS Code Debugger

Written by sinedied | Published 2020/12/14
Tech Story Tags: nodejs | debugging | vscode | beginners | javascript | software-development | learning | debug-a-nodejs-application | web-monetization

TLDRvia the TL;DR App

If you ask me on which task I've spent most of my time as a software developer, it would probably be bug fixing. Working with JavaScript apps, I've used
console.log
when debugging surely more than I should have. Learning how to become efficient at finding bugs in programs is a very important skill that can save you a lot of time. Debuggers help you with that task by providing tools to analyze your programs and run control execution flow.
In this post, my friend Burke Holland will walk you through the steps that can help you find issues more efficiently in Node.js apps, with short videos that run for less than 5 minutes each.

What you'll learn here

  • Use the built-in Node.js debugger to run your code step by step
  • Configure VS Code to debug Node.js programs
  • Use the VS Code debugger to analyze the state and find issues
  • Read a stack trace to find the source of an exception
  • Advanced VS Code debugging features

Additional learning resources

Run your Node.js code step by step using the built-in debugger

The best tool is the one you always have at hand. While it's surely not the most user-friendly or fully-featured debugger out there, Node.js comes with a built-in debugger that works straight from the command line.
It's perfect to start learning how to run your code step by step, and can also be very handy in case you're trying to debug an issue through a remote SSH session.

Configure VS Code to debug Node.js apps

One excuse I've heard a lot from people not using a debugger is that it would take too much time to configure. Whether you prefer running your code from command line or directly from the UI, VS Code has your back and you can start debugging without the need to configure anything if you're in a pinch.
And when you have a few minutes to spare, you can create one or more debug configurations that can be shared with your coworkers, so there's no excuse anymore.

Analyze and fix bugs in your apps with the VS Code debugger

Once you're ready to go, let's try digging into a real issue and see how the different tools can be used to analyze the bug and fix it, using breakpoints effectively. And without adding a single
console.log
in the process.

Read a stack trace to find the source of an exception

Finding the root cause of a crash is not an easy task, especially if you're exploring a large codebase. Stack traces look messy at first, but they're really valuable when you're trying to understand what's going on and can even be used to rewind the program execution to the state before an exception happened.

Advanced debugging features in VS Code

Now we're getting serious. After walking through all the debugging basics, it's time to have a look at more advanced features of the VS Code debugger, such as conditional breakpoints, watchers and logpoints. And I love logpoints. With them, there's no more excuse to leak a
console.log
when deploying to production.

What's next

I hope that this short overview will convince you to launch your debugger more often to get used to it, and ultimately drop the
console.log
approach. Or not. But at least you have more tools in your hands to track and fix those nasty bugs.
If you would like to get more into details and practice your skills on a concrete example, you can also take a look at this interactive tutorial on debugging Node.js apps. You can also try doing the fixes by yourself on the source code used in the videos here.
Thanks for reading!

Written by sinedied | Fullstack Developer & Cloud Advocate @ Microsoft. Code artist, OSS maintainer, JavaScript tinkerer.
Published by HackerNoon on 2020/12/14