CODEWITHSUNDEEP
node.jsdebuggingwebstormecmascript-6source-maps
ngasull
ngasull

Reputation: 4216

Debug compiled ES6 nodejs app in WebStorm

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?

Upvotes: 17

Views: 6125

Answers (5)

Shelan Perera
Shelan Perera

Reputation: 1753

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.

Upvotes: 0

Dan Dascalescu
Dan Dascalescu

Reputation: 151916

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.

Run/Debug configuration for ES2016

Upvotes: 5

Kunal Kapadia
Kunal Kapadia

Reputation: 3333

@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'));
});

Upvotes: 2

mockaroodev
mockaroodev

Reputation: 2071

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.

Upvotes: 1

eljefedelrodeodeljefe
eljefedelrodeodeljefe

Reputation: 6791

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.

Upvotes: 1

Related Questions