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.