node.js - intellij - Depurar la aplicación nodejs ES6 compilada en WebStorm

webstorm debug node

Question

Quiero depurar una aplicación de nodo que se ejecuta desde archivos ES6 compilados de babel . Tengo mi fuente ES6 en una carpeta src y el babel ES5 equivalente en una carpeta de build .

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

Mi objetivo: colocar puntos de interrupción directamente en mi fuente ES6.

He generado los mapas de origen adecuados y he realizado una configuración de depuración de nodo que ejecuta el archivo principal ES5 con la raíz del proyecto configurada como directorio de trabajo. Puedo interrumpir cuando establezco puntos de interrupción en los archivos compilados de ES5, y muestra automáticamente mi fuente de ES6.

Sin embargo, me gustaría colocar puntos de interrupción directamente en la fuente ES6 .

¿Es eso posible?

-

> 2015-10-11 editar <

La asignación de fuentes ahora funciona muy bien con la configuración de @mockaroodev cuando utilizo una absoluta sourceRoot .

Sin embargo, la depuración todavía está rota: pasar por encima de una línea a veces me lleva a lugares inesperados. Parece que cuando la línea implica un require no interno (no nativo) de alguna manera, el depurador se interrumpirá al final del contenido requerido. Lo que es terriblemente molesto!

Estoy usando Webstorm 10.0.4 en Linux y actualicé babel y sourcemaps a las últimas versiones.

¿Alguien también cumple con este problema?

Answer 1

A partir de WebStorm 2016.2 EAP, no necesita ningún mapeo de origen, ni siquiera observadores de archivos. Simplemente configure su "nodo" ejecutable para que sea babel-node, y puede depurar hasta el contenido de su corazón, incluso los scripts que contienen async/await .

Answer 2

Hubo un problema relacionado con esto en el sistema de boletos de Jetbrains . Creo que este problema está resuelto. También vea el tema correspondiente de GitHub en el repositorio de Babel.

Hay una configuración de ejemplo en el blog de Jetbrains , básicamente configurando --source-maps babel como nosotros --source-maps .

Answer 3

La solución @mockaroodev solo funcionará si tiene una jerarquía plana en la fuente. Si tiene fuentes en diferentes subpaths, se recomienda una ruta de acceso absoluta (desde la raíz del dominio) que apunta a la raíz del archivo fuente para la opción sourceRoot .

Tarea actualizada de 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

Sí, es posible poner puntos de interrupción en su código ES6 utilizando WebStorm. Para que los puntos de interrupción funcionen, necesita generar mapas de origen. Utilizo gulp-babel y gulp-sourcemaps para compilar es6 con la siguiente tarea:

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

Tenga en cuenta que las opciones extra includeContent y sourceRoot para sourcemaps.write son críticas. Por defecto, gulp-sourcemaps agrega una fuente errónea sourceRoot: source a cada archivo js.map. Estas opciones adicionales corrigen este problema.

Answer 5

al agregar el indicador --inspect en los "parámetros del nodo" en la sección de configuración del nodo, resolví el problema por mí. (adicionalmente a la configuración de babel-node como intérprete de nodo.