How to debug a node.js backend written in es6 / es7?
I want to debug es7 source code directly. I found the only working way to debug the already implemented es5 code, but this is very inconvenient. I tried babel-node --inspect my_es7_file.js
it but it doesn't work. Also babel-node-debug
doesn't work either. There is my example code that 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 with 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.
source to share
To do this, you need Babel to generate source maps (flag --source-maps
). For example, if locally installed babel-cli
:
npm install --save-dev babel-cli
And you've created a build script in yours package.json
, perhaps taking all the 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 built it with npm run build
:
npm run build
... and then you can debug it via
node --inspect --debug-brk dest / test.js
(Assuming Node v6.3.0 or higher, with a built-in inspector. Before that, you would need to use node-inspector
or similar.)
This will give you the chrome embed url to launch the debugger and will stop at the first line (this is the part --debug-brk
) so you don't need to hav debugger;
in your code.
Again: a bit of a key --source-maps
, integrate it into your build script (gulp, grunt, npm yourself, whatever), however you want.
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 with "with ES6" I assume you want to translate ES2015 + to ES5):
{
"presets": ["es2015"]
}
Addition:
$ npm run build > btemp@0.0.0 build / home / example > babel src -d dest --source-maps src / test-es6.js -> dest / test-es6.js
Resulting content dest/test-es6.js
:
"use strict";
var x = function x(n) {
return n * 2;
};
console.log(x(2)); // 4
Duration:
$ 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 this url: 
This uses Node v7.7.2, but anything from v6.3.0 and up should work.
It looks like sometimes it doesn't automatically open the file src
for you (this was the case for me when I ran above, I just tried it again, a few times and it doesn't). When it doesn't, you can see this:
Pay attention to the "Source Map" notice. If so, just expand the file tree on the left, navigate to src
and select the file. Then you can debug ES2015 source code. I don't know why it sometimes fails to open the file for you automatically.
source to share
I found a way to do this using node version 6.3.1 and babel-node-debug. Before that I used node version 7.10.0. Also, there is no need to add debugger;
to the source code. It is possible to add breakpoints directly in chrome dev tools, after startingbabel-node-debug my_es6_script.js
I think 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.
source to share