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 build folder.

Project root
|
| build
| > ES5 Compiled files
|
| src
| > ES6 Source files

My goal: Place breakpoints directly in my ES6 source.

I have generated proper source maps and I made a node debug configuration that runs the ES5 main file with project root set as working directory. I can break when I set breakpoints in ES5 compiled files, and it automatically shows my ES6 source.

However I'd like to place breakpoints directly in the ES6 source.

Is that even possible?

-

> 2015-10-11 edit <

Source mapping works now great with @mockaroodev's config when I use an absolute sourceRoot!

However the debugging is still broken: stepping over a line sometimes brings me at unexpected places. Seems that when the line implies a non-internal (not native) require in some way, the debugger will break at the end of the required content. Which is terribly annoying!

I'm using the Webstorm 10.0.4 on linux and upgraded both babel and sourcemaps to the lastest versions.

Does anybody also meet this issue?

Answer 1

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 2

@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 3

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 4

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 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.