调试在WebStorm中编译ES6 nodejs应用程序 [英] Debug compiled ES6 nodejs app in WebStorm

问题描述

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

 项目根
 | 
 |建立
 | > ES5编译文件
 | 
 | src 
 | > ES6源文件
  

我的目标： 断点直接在我的ES6源。

我已经生成了正确的源地图，我做了一个运行ES5主文件，项目根设置为工作目录的节点调试配置。当我在ES5编译的文件中设置断点时，我可以打破它，并自动显示我的ES6源代码。

但是，我想直接在ES6中放置断点来源。

这是否可以？

-

> 2015-10-11编辑<

源映射现在很好用

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?

解决方案

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.

这篇关于调试在WebStorm中编译ES6 nodejs应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！