How to debug node.js backend written in es6/es7?

Question

I want to debug es7 source code directly. I found the only one working way to debug already transpired es5 code, but it is very inconvenient. I tried babel-node --inspect my_es7_file.js, but it doesn't work. Also babel-node-debug doesn't work too. There is my code example which I want to debug:

import path from 'path';

const run = async filename => {
    console.log('filename', filename);

    await new Promise(resolve => setTimeout(resolve, 100));

    debugger;

    await new Promise(resolve => setTimeout(resolve, 100));

    const newPath = path.resolve(__dirname, filename);

    console.log('newPath', newPath);

    return newPath;
}

run('hello.js').then(process.exit);

this code works well when I run it using babel-node

UPD I don't like Webstorm and VS Code. I want to write code in Atom and debug it in chrome dev tools.

Answer 1

To do this, you need to have Babel produce source maps (the --source-maps flag). So for instance, if you have babel-cli installed locally:

npm install --save-dev babel-cli

And you set up a build script in your package.json, perhaps taking all scripts in src and compiling them to dest:

{
  "name": "blah",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d dest --source-maps"
  },
  "author": "",
  "license": "blah",
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "~6.24.1"
  }
}

Then if you have, say, src/test.js, you'd build it with npm run build:

npm run build

...and then you can debug it via

node --inspect --debug-brk dest/test.js

(That's assuming Node v6.3.0 or higher, which has inspector built in. Prior, you'd need to use node-inspector or similar.)

That will give you a URL to paste into Chrome to fire up the debugger, and will stop on the first line (that's the --debug-brk part) so you don't have to hav debugger; in your code.

Again: The key bit is --source-maps, integrate it into your build script (gulp, grunt, npm itself, whatever) however you want.

---

Re your comment:

it doesn't work with es6 even with source-maps

Yes, it does:

src/test-es6.js:

const x = n => n * 2;
console.log(x(2)); // 4

Using the package.json above, and this .babelrc (since by "with ES6" I take it you want to transpile ES2015+ to ES5):

{
  "presets": ["es2015"]
}

Build:

$ npm run build

> btemp@0.0.0 build /home/example
> babel src -d dest --source-maps

src/test-es6.js -> dest/test-es6.js

Contents of the resulting dest/test-es6.js:

"use strict";

var x = function x(n) {
  return n * 2;
};
console.log(x(2)); // 4

Running:

$ node --inspect --debug-brk dest/test-es6.js
Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
To start debugging, open the following URL in Chrome:
    chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/8dd843bf-16d5-477f-bacf-f72e2dfd6bbc

Going to that URL:

This is using Node v7.7.2, but anything from v6.3.0 and up should work.

It would appear that sometimes, it doesn't automatically open the src file for you (it did for me when I ran the above; I just tried again, several times, and it didnt'). When it doesn't, you may see this:

Note the "Source Map detected" notice. If so, just expand the file tree on the left, navigate to src, and pick the file. You can then debug the ES2015 source. I don't know why it sometimes fails to open the file for you automatically.

Answer 2

I found the way to do that using node 6.3.1 version and babel-node-debug. Before it, I used node 7.10.0 version. Also, there is no need to add debugger; into the source code. There is ability to add breakpoints directly in chrome dev tools, after running babel-node-debug my_es6_script.js

I guess this is the only solution for this moment.

Again to debug es6/es7 node.js code, you need to use node 6.3.1 and babel-node-debug.