Debugging Node.js with Google Chrome

Jacopo Daeli
May 25, 2017 · 3 min read

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.

Why console.log is not the best option?

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

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.

Setting up Chrome for Node.js debugging

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
Image for post
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.

Image for post
Inspect with Chrome DevTools.

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

Image for post
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.

Chrome DevTools in action

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.

Image for post
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.

Image for post
JavaScript values hot-swapping (1).
Image for post
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.

Node.js Collection

Community-curated content for the millions of Node.js

Jacopo Daeli

Written by

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

Node.js Collection

Community-curated content for the millions of Node.js users.

Jacopo Daeli

Written by

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

Node.js Collection

Community-curated content for the millions of Node.js users.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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