Learn About Debugging Node.js Apps

Debugging is at the center of every software developer's armory when it comes to detecting any kind of abnormalities in an application. And thanks to some great IDE's (Integrated Development Environments) these days, this job gets even simpler and more developer friendly.

For example, any developer working on Microsoft stack would know how well Visual Studio has done in this regard over the past decade or so with each update rolling out something new that goes a long way in assisting developers and making their lives a tad easier at work.

But what about the relatively new kid on the block, Visual Studio Code? Although Visual Studio does offer support now for developing rich client-side apps leveraging some popular frameworks/libraries (Angular, React), VSCode still seems to be the preferable IDE for designing javascript apps given its lightweight nature and obviously being very nice on your system's resources at the same time. 

In this blog, we are going to look into a couple of ways to go about debugging Node.js apps. 

1. Debugging in VSCode
2. Debugging via Google Chrome

Just to get a bit of  perspective, given below in the screenshot is a simple Node.js app that we shall be debugging. (code snippet provided)

const books = require("./books")
var book = {
    title: "Debugging Node.js apps",
    description: "How to debug node.js apps"
}
console.log("Writing File...");
books.WriteFile(book);
console.log("Writing File completed...");
console.log("---------------------------------");
console.log("Reading file started...");
var obj = books.ReadFile();
console.log(`One book found : - Title : ${obj.title}, Description : ${obj.description}`);
console.log("Reading file completed...");

In this application, we are performing a simple file read/write I/O operation. The nature of the application doesn't really matter here as we are simply going to dive deep in the debug operation. The two functions here, namely ReadFile() and WriteFile(), are defined in a separate books.js file as shown below (code snippet provided),

const fs = require("fs");
const WriteFile = (book) => {
    debugger;
    fs.writeFileSync("books.json", JSON.stringify(book));
}
const ReadFile = () => {
    var book = fs.readFileSync("books.json");
    return JSON.parse(book);
}
module.exports = {
    WriteFile,
    ReadFile
}

 

Let's get started and have a look at the first approach to debugging 

Debugging in VSCode 

• Open the terminal in VSCode. Press Ctrl + '`' (backtick - located just below the Esc button)
  
  
• Type the following command - node inspect app.js (app.js is the file that we are debugging) 
  
  
  
  
• You will see the following text come up on your terminal screen. The green highlight on the word 'exports' indicates that currently the debugger is placed at that line of code. (if that doesn't cut the deal for you, the '>' pointer at the extreme left of that line can make you relate somewhat!!)
  
  
• The 'debug>' indicates that currently, the debugger process is running in the terminal.
  
  
• Type 'n' and press enter to move to the next piece of code.
  
  
• In case your code has a long execution path and you directly want to jump to the code where you feel you need to debug, you can attach a debugger statement before that.
  
  
  
  
• In case you directly want to continue to the statement where you have placed the breakpoint, type 'c' and press Enter. 
  
  
  
  
• Similarly for step-into and step out functionality, you can type 's' and 'o' commands respectively 
  
  
• Now, let's say we need to check what's there inside the book object that gets passed to the WriteFile() function.
  
  To achieve this, we can enable the repl mode of the debugger. repl stands for Read Evaluate Print Loop which broadly performs these four functions internally. When you enable repl mode and type in any genuine object that you want to evaluate like in this case, the book object, it will read the object, evaluate it in a form of a JSON object and finally print it on the screen till the developer simply does a ctrl+ C to exit the repl mode.
  
  
  
  

• To exit the debug operation, simply type Ctrl + C and hit enter.

Debugging via Chrome

Google Chrome also provides you an option to leverage its debugger for node.js apps. Let's have a look at the same,

• Open the terminal (Ctrl + `) 
• Type the following command - node --inspect-brk app.js
  
  
  
  
• Now open Google Chrome and type chrome://inspect to launch the DevTools window.
  
  
  
  
• Click on "Open dedicated DevTools for Node" .
  
  
• A window will get displayed with the app.js file opened and a debugger attached to it. You can now simply use F10 or F11 keys to perform the vanilla debugging as done in other IDE's. In the console window below, you can inspect any specific object by typing it in the window.
  
  

There we go!

We have looked at a couple of ways to debug node.js apps and of course, there are a lot more ways to achieve the same. Feel free to share your versions and I'll be happy to see them below.

Until next time, Happy Coding!