如何在 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 的調試方式。

以上, 致那顆騷動的心……