Full-Stack Engine

Debugging Sails.js applications with Chrome's DevTools

One way to debug a Node js Application (e.g., Sail.js) is using the debug capabilities of Node.js (version 6.3.0+) and the integration with Chrome DevTools (as they both share the same V8 Javascript Engine). Thus, you can debug your application running alongside with other development tools like webpack-dev-server, angular-cli server, loggers, and others.

You can take a look at the complete configuration of the Angular + Sails starter, for debugging a Sails app.

The following steps describe how to set up the package.json scripts to start debugging with a single command from the console,

  1. Open a terminal and go to sails directory.
  2. First, we need to run node with "--inspect" flag to inspect the code inside chrome's DevTools. So we need to run,

node --inspect app.js

To get sails up and running.
However, we might be missing webpack dev-server or any other middleware process.

  1. Modify package.json's scripts adding the following lines,
"start:debug" : "npm-run-all --parallel open:client debug",
...
"debug": "node --inspect app.js"

The complete scripts sections looks like this,

"start": "npm-run-all --parallel open:client dev",
    "start:debug" : "npm-run-all --parallel open:client debug",
    "open:client" : "ng serve --open",
    "build": "npm run build:prod",
    "build:dev": "ng build --deploy-url=dist",
    "build:prod": "ng build --prod --deploy-url=dist",
    "build:aot": "ng build --aot --deploy-url=dist",
    "clean": "rimraf assets/dist",
    "prod": "sails lift --prod",
    "dev": "sails lift --dev",
    "debug": "node --inspect app.js"

This way, we can just run "npm run start:debug" and run Sails normally as we usually do but featuring debugging.
You should see something like the following,

debug-sails

It prompts you to open the long URL chrome-devtools://... in the browser but doesn't. Instead open "about:inspect" in Chrome

1-x4VXx50dLdD_HbqE6hpIRw

Click on Open dedicated DevTools for Node to open a new DevTools window,

debug-sails2--1-

Here you can access all the code from the project and set breakpoints, step-in, step-out, inspect variables, javascript profiler, heap allocation timeline and all you can do when debugging Javascript client code in chrome.

That's it!. Now you can debug Sails.js in Devtools!.

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.