在 WebStorm 中调试已编译的 ES6 nodejs 应用程序

Question

我想调试从 babel 编译的 ES6 文件运行的节点应用程序。我在 src 文件夹中有我的 ES6 源代码，在 build 文件夹中有等效的 babel ES5。

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

我的目标： 直接在我的 ES6 源代码中放置断点。

我已经生成了正确的源映射，并且我做了一个运行 ES5 主文件的节点调试配置，项目根目录设置为工作目录。我在ES5编译文件中设置断点就可以break，它会自动显示我的ES6源码

但是我想直接在 ES6 源代码中放置断点。

这可能吗？

-

> 2015-10-11 编辑 <

当我使用绝对 sourceRoot!

时，源映射现在可以很好地与一起使用

但是调试仍然失败：跨过一条线有时会把我带到意想不到的地方。似乎当该行以某种方式暗示非内部（非本机）require 时，调试器将在所需内容的末尾中断。这太烦人了！

我在 linux 上使用 Webstorm 10.0.4 并将 babel 和 sourcemaps 升级到最新版本。

有没有人也遇到这个问题？

Answer 1

Jetbrains' ticket system 中存在与此相关的问题。我认为这个问题已经解决了。另见对应的GitHubissue in the Babel repo.

有一个 example setup on Jetbrains' blog，基本上是设置 babel 标志，比如我们 --source-maps。

Answer 2

是的，可以使用 WebStorm 在 ES6 代码中放置断点。为了使断点起作用，您需要生成源映射。我使用 gulp-babel 和 gulp-sourcemaps 通过以下 gulp 任务编译 es6：

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'))

请注意 sourcemaps.write 的额外 includeContent 和 sourceRoot 选项非常重要。默认情况下 gulp-sourcemaps 添加一个错误的 sourceRoot: source 到每个 js.map 文件。这些额外的选项解决了这个问题。

Answer 3

@mockaroodev 解决方案仅在源代码中具有平面层次结构时才有效。如果您在不同的子路径中有源代码，建议 sourceRoot 选项使用指向源文件根目录的绝对路径（从域根目录）。

已更新 gulp babel 任务：

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 4

从 WebStorm 2016.2 EAP 开始，您不需要任何源映射，甚至不需要文件观察器。只需将您的 "node" 可执行文件配置为 babel-node，您就可以根据自己的喜好进行调试，甚至是包含 async/await.

的脚本

Answer 5

在节点配置部分的 "Node parameters" 中添加 --inspect 标志为我解决了这个问题。（除了将 babel-node 设置为节点解释器之外。

在 WebStorm 中调试已编译的 ES6 nodejs 应用程序

Debug compiled ES6 nodejs app in WebStorm

node.js

debugging

webstorm

ecmascript-6

source-maps