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

发布时间:2019-07-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了如何在 webStorm 中使用 babel-node 调试 ES6代码脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

配置启动选项示意图

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

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

 * 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 版本

启动与调试

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

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

源码打上断点,访问一下服务, 断点停住了, 可以进行调试了

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

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

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的如何在 webStorm 中使用 babel-node 调试 ES6代码全部内容,希望文章能够帮你解决如何在 webStorm 中使用 babel-node 调试 ES6代码所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。