Debug compiled ES6 nodejs app in WebStorm

Question

I want to debug a node app that runs from babel compiled ES6 files. I have my ES6 source in an src folder and the babel ES5 equivalent in a b

Answer 1

Yes, it is possible to put breakpoints in your ES6 code using WebStorm. In order for breakpoints to work you need to generate source maps. I use gulp-babel and gulp-sourcemaps to compile es6 with the following gulp task:

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var babel = require('gulp-babel');
var gutil = require('gulp-util');

gulp.src(['src/**/*.es6'])
    .pipe(sourcemaps.init())
    .pipe(babel())
    .on('error', gutil.log)
    .pipe(sourcemaps.write('.', {
        includeContent: false,
        sourceRoot: '../src'
    }))
    .pipe(gulp.dest('lib'))

Note that the extra includeContent and sourceRoot options to sourcemaps.write are critical. By default gulp-sourcemaps adds an erroneous sourceRoot: source to each js.map file. These extra options correct this problem.

Answer 2

There was an issue concerning this in Jetbrains' ticket system. I think this issue is resolved. Also see the corresponding GitHub issue in the Babel repo.

There is an example setup on Jetbrains' blog, basically setting up babel flags such us --source-maps.

Answer 3

As of WebStorm 2016.2 EAP, you don't need any source mapping, or even file watchers. Simply configure your "node" executable to be babel-node, and you can debug to your heart's content, even scripts containing async/await.

Answer 4

@mockaroodev solution will work only if you have a flat hierarchy in source. If you have sources in different subpaths, an absolute path (from the domain root) pointing to the source file root is recommended for sourceRoot option.

Updated gulp babel task:

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    babel = require('gulp-babel'),
    gutil = require('gulp-util'),
    path = require('path');

// Compile ES6 to ES5
gulp.task("babel", function () {
    return gulp.src('**/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel())
        .on('error', gutil.log)
        .pipe(sourcemaps.write('.', {
            includeContent: false,
            sourceRoot: function(file) {
                return path.relative(file.path, __dirname);
            }
        }))
        .pipe(gulp.dest('dist'));
});

Answer 5

adding --inspect flag in the "Node parameters" in the node configuration section solved the issue for me. (additionally to the setting babel-node as node interpreter.