Debug a NodeJS App with Chrome Dev Tools

The more complex is your app, the more difficult is to find those weird issues that all developers (we) always face, and dumping logs to the console or to a logfile is by far the easiest way to debug (it is just as bad as echo-ing on PHP or alert-ing on plain old JavaScript). Thanks to the node community we have this really really, REALLY, nice tool called “node-inspector” that is basically a node app that runs on your server and connects to your application using node’s debug mode exposing the app code using our beloved Chrome Developer Tools. I know, it sounds too good to be real, but it IS real, and actually really easy to get up and running.

 

First, you need to have a NodeJS application you want to debug. After that, you’ll need to install one global module:

npm install -g node-inspector

 

If you were able to follow till this point then you are, basically, all set. No, I didn’t forget to give more instructions or cryptic commands, that is all you need :) .   Now, how do you connect this node-inspect to your app? It is really easy too. There is a couple of ways to do so, based on how your app is designed.

 

Option 1: Your application starts without problems.

If you want to debug an application and it is starts without a problem, then you can just do:

node --debug your-app.js

 

Next stepis to start node-inspector and attach it to NodeJS, on a different console (not necessary, but it makes the things easier), do the following:

node-inspector

 

Finally to start the debugging, open your browser and navigate yo tour server IP address or URL pointing to port 8080, if you are on your desktop (or laptop) it usually is something like http://localhost:8080.

 

Option 2: Your application dies at a very early stage OR it runs too fast to attach the debugger window.

If your app is dieing due to some bugs or it just runs and so fast that you can’t even start node-inspector, then you can use a different debug option that will pause the app as soon as it reaches the very first line of code

node --debug-brk your-app.js

 

And follow the steps to start the node-inspector from above. Once it is running and you are on your browser, you’ll see that the app code is there and it is already stopped on line 1. From there you can start debugging line by line, set breakpoints here and there… you know, the cool stuff that the developers (we) do.

 

Option 3: Special cases.

Last but not least, there are more complicated scenarios, like when you have a distributed app that runs splitting itself into workers thanks to the Cluster API, or maybe you cannot just stop the app and restart it, for this kind of scenarios you can also enable debug mode on your already running app by sending it a signal to start the debug process. The tricky part is to get your app (or worker) Process ID (PID), once you have it you can do the following (replace PID with your application’s Process ID):

kill -s USR1 PID

 

After doing so you can follow the same steps to start node-inspector.

Hope you find this as useful as I did. Remember, sharing is caring.

13 thoughts on “Debug a NodeJS App with Chrome Dev Tools

  1. Chris Toledo

    Maybe edit the first 5 and a half minutes out of the video? Ask yourself what you’re trying to communicate in those minutes.

    I don’t want to be mean, just maybe next video cut to the chase, I mean, if you feel like it, and that’s just like… my opinion man.

    Thanks for introducing me to node-inspector anyway

    Reply
    1. Erick Post author

      Thanks for your feedback Chris. I feel I should leave some pieces of the first 5 mins cause I show there the installation of the module; What I did was to add an annotation that jumps straight into minute 5 where the action begins. Also I’ll keep it on my mind for the next videos so I have maybe a script to avoid talking too much or without a point.

      Reply
        1. Erick Post author

          I am building also a couple of command line utilities for my company to easy our maintenance work on some APIs while we have some time to build an actual Admin UI. I found very useful optimist and prompt modules, they work very nice together.

          Reply
  2. Matt

    What was your setup?

    Looked like you had ubuntu VM but connected via localhost in the browser which looked like was on a windows OS?

    Reply
    1. Erick Post author

      You are right.

      In the video I am using a VirtualBox VM with Ubuntu Server 32 bits (my host is 32 bits also), and the Host is a Windows 7. I have setup the VM to redirect the required ports on the host to the VM so I can access it from the Browser on my Win box.

      Reply
  3. Pingback: debugging node.js with chrome | code for now

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">