如何在WebStorm中Debug Node + ES6代码

在使用ES6写后端代码时我遇到一个问题就是如何debug我的ES6代码。�由于现在Node对ES6的所有特性支持的还不全，所以在真正的生产环境中，ES6代码会通过Babel被转成ES5然后执行。

但是在开发环境中我还是希望debug的是我的ES6代码而不是转换后的ES5代码，我们可以通过babel-node来实现我们想要的。

在WebStorm中我们有两种方式debug我们的代码：本地debug和远程debug。

本地debug

1. 打开Run/Debug Configurations窗口

2. 添加一个新的Node.js配制

3. 配制Debug设置

上面的配制里主要有这么几条：

Node interpreter

从名字上看就知道需要选择Debug时Node的解释器，这里我们选择了我自己project下的./node_modules/.bin/babel-node

Node parameters

这里可以传入一些在运行babel-node时的一些参数，因为我使用了ES6和一些ES7的性，所以我传入了--presets es2015,stage-0

Working directory

程序运行入口的目录

JavaScript file

程序运行入口

Apply后这条配制就已经可用了，在WebStorm中选择这条配制，点击debug，程序开始运行并开启了debug。

查看console可以看到最终babel-node是以如下命令启动的：

/Users/ylhong/Workspace/myhome-service/project/node_modules/.bin/babel-node --debug-brk=63063 --expose-debug-as=v8debug --presets es2015,stage-0 /Users/ylhong/Workspace/myhome-service/project/src/index.js