Node.js Collection
Published in

Node.js Collection

Debugging Node.js with Google Chrome

Debugging is the task to identify and remove errors from software applications, and is more than just printing out values in your code. This post describes how to efficiently debug Node.js programs using the latest Google Chrome DevTools.

Using console.log to debug your code generally dives you into an infinite loop of “stopping your app, adding a console.log, and start your app again” operations. Besides slowing down the development of your app, it also makes your writing dirty and creates unnecessary code. Finally, trying to log out variables alongside with the noise of other potential logging operations, may make debugging difficult when attempting to find the values you are debugging.

Debugging tools provide you with a few important functionalities that console.log isn’t able to provide. In particular they let you pause the execution of your application at specific points in the code, and inspect and modify the values of the variables while the program is still running.

With Chrome 57+, the Node.js debugging feature is enabled as default and there is no need to manually enable it from the Experimental Feature panel anymore like in the older versions.

If you haven’t done it yet, update Google Chrome to the latest version and be sure you are using Node.js 6.4+.

To start debugging, run your Node.js application with the --inspect flag.

$ node --inspect <your_file>.js
Running a Node.js app in Debugging Mode.

Next, ignore the URL starting with “chrome-devtools://” that is displayed in your terminal, but open “about:inspect” in Google Chrome instead.

Inspect with Chrome DevTools.

Finally, click on “Open dedicated DevTools for Node” to start debugging your application’s code.

Developer Tools for Node.

Moreover, the official documentation on debugging Node.js App offers a detailed list all the other inspector tool and client alternatives.

To conclude this article, I want to give an overview of the Chrome DevTools in action for the following Express application.

Simple Express application.

Let’s run it with the --inspect flag and open the dedicated DevTools for Node as explained before.

At this point, you will have access to all the features you may be already familiar with: breakpoints, source map for transpiled code, heap snapshot inspection, allocation profiling, JavaScript values hot-swapping, etc.

Using Breakpoints to debug an Express application.

In particular, as you can see in the images below, you can insert breakpoints to stop the execution of your program, inspect and “hot-swapping” the values of the variables.

JavaScript values hot-swapping (1).
JavaScript values hot-swapping (2).

Another awesome thing in using Chrome as a debugging tool is that you can debug both your front-end and back-end JavaScript code with the same interface 🚀.

If you have any questions on this or updates, please reach out to me on Twitter at @JacopoDaeli.



The Node.js Medium collection has been retired

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jacopo Daeli

I’m a Computer Scientist, Software Engineer and Hacker, passionate about web technologies with a vocation for writing beautiful and clean code.