如何在 webStorm 中使用 babel-node 调试 ES6代码

如何使用 webStorm 调试 babel-node 启动的服务端源代码

详情可查看 git 示例项目 https://github.com/tangdaohai/es6-babel-node-debug
任何问题,能够在这里或者 https://github.com/tangdaohai... 进行讨论。

配置启动选项示意图

参数说明 & 配置后启动报错相关说明

* Node interpreter: ./node_modules/babel-cli/bin/babel-node.js
 
 这个参数是说使用什么启动程序，默认的是 `node`, 这里咱们将它设置为`babel-node`,
 能够是项目中`局部`的 babel 也能够是`全局`的babel-node,可使用 `which babel-node`
 查看 babel-node 全局路径。

 注意若是是 `windows` 出现`CreateProcess failed with error 193 (no message available)`
 应该将其设置为 `./node_modules/bin/babel-node.cmd`,注意`npm >= 3`版本。
 
 * Node parameters: --expose_debug_as=v8debug -- //不要忽略后面的两个 --
 
 这个是对于node 的启动参数.
 
 若是出现 `v8debug is not defined` 请不要忽略 `--expose_debug_as=v8debug`。
 
 若是出现 `code.trim is not a function` 请不要忽略后面的 `--`
 
 * Working directory: 项目的路径
 
 * JavaScript file: 入口文件
 
 * Application parameters: 这个是项目中的参数, 使用`process.argv`获取。
 
 * Environment variables: 环境变量相关, 好比: `NODE_ENV=development`。

 注意这个是`key`, `value`的设置方式, 一一对应。

若是变量一栏里面一直出现collecting data, 能够将webStorm 升级到最新, 或者使用 node 4.x 版本

启动与调试

点击那个虫子…… 启动 debug 模式。

在源码打上断点，访问一下服务, 断点停住了, 能够进行调试了

下面的工具栏控制断点进度,不熟悉的能够搜下webStorm 的调试方式。

以上, 致那颗骚动的心……