WebStorm使用Babel远程调试NodeJS

Question

I'm running my node application with:

"./node_modules/nodemon/bin/nodemon.js --ignore ./build/* ./bin/www --exec babel-node --debug=7001",

When I connect with a WebStorm remote configuration it seems to work, but the placing breakpoint results in either them being ignored, or the code actually stop at different lines.

This is probably due to Babel transpiling. How can I do that, given my code is transpiled at runtime?

My .babelrc file:

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"]
}

Answer 1

Here is the revelent documentation : https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/

If you'd like to debug your code using WebStorm or Chrome, make sure the tools you're using generates source maps . For example, when using Babel only, you need to add "sourceMaps": "both" option to your .babelrc file or pass it as a command-line argument. If you're using Babel as a part of a more complex build process, you might need a addition configuration for generating source maps, eg use gulp-sourcemaps with Gulp or add devtool: "source-map" option when using Webpack.

Source maps allow you to put breakpoints in the original source files in the IDE and be sure that they are hit then compiled code is executed in the browser.