Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Debugging nodejs applications using node-inspector and Chrome Dev Tools

Lets face it, print­ing console.logs on your app server con­sole is not really an ideal strat­egy for debug­ging your nodejs appli­ca­tions. Would’nt it be nice if you could just use the chrome dev tools to debug your server­side nodejs code? Turns out that there is a way to do that.

And thats exactly what we will set out to achieve in this arti­cle. All the source code for this tuto­r­ial is com­bined with the node starter kit and can be found on github in this par­tic­u­lar commit

Here’s what you would be able to do by the time you reach the end.

Cre­ate a npm script that lets you run your server in debug mode
Open Chrome’s dev tools and be able to debug your nodejs appli­ca­tions the same way you debug your client slide javascript applications.

Basic Setup

First install node inspec­tor globally

sudo npm install -g node-inspector

At the moment, if you want to, you can sim­ply run the fol­low­ing command

node-debug app.js

And you will be able to access the url http://localhost:8080/debug?port=5858 and debug your appli­ca­tions. How­ever, we want to take this a lit­tle fur­ther and con­vert it into a con­fig­urable npm run script. Lets see how we can do that.

Advanced setup

The aim of this setup is to run your node server in debug mode as a grunt task what whose con­fig­u­ra­tion can be spec­i­fied in a file instead of doing it on the com­mand line.

grunt debug --file=app.js

As you can see, we cre­ated a com­mand line argu­ment called ‘file’ that takes a file name which, as you shall see later, is passed to the node-debug command.

The first thing to do is to install the ‘grunt-run’ pack­age in your project. The ‘run’ task lets you run any com­mand that can be run from the terminal.

npm install grunt-run --save-dev

The next thing to do is to con­fig­ure ‘run’ with a com­mand that we want to exe­cute. We can do that by spec­i­fy­ing a task. Lets call that task ‘node-inspector’ for con­sis­tency. We will keep all of our con­fig for the run com­mand in grunt\run.js and export it as a module

module.exports = {
  'node-inspector': {
    cmd: 'node-debug',
    args: []
  }
}

I have left the args array empty for the moment, but you can use any of the argu­ments men­tioned here.

The next step is to con­fig­ure it as a grunt task. Below you can see my grunt­file. It already con­tains a jshint task as a default grunt task. All I do is cre­ate load the run con­fig­u­ra­tion and prepend the file­name that is spec­i­fied in the user input to the args array.

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });

  // Read the config for the 'run' task that can run any command
  var runConfigs = require('./grunt/run.js');

  if(!runConfigs['node-inspector'].args){
    runConfigs['node-inspector'].args = [];
  }

  // Prepend the file name to the command line arguments array 
  // for the node-inspector task
  runConfigs['node-inspector'].args.unshift(grunt.option('file'));

  grunt.config( 'jshint', require('./grunt/jshint.js') );
  grunt.config( 'run', runConfigs );

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-run');

  grunt.registerTask('default', ['jshint']);
  grunt.registerTask('debug', ['run:node-inspector']);

};

If you are like me and like to keep all of your scripts runnable as npm scripts, add this line to your scripts object in package.json

scripts:{
    // other scripts
    // ...
    "debug": "grunt debug --file=app.js"
}

Ryan Sukale

Ryan is a UX engineer living in San Francisco, California.