03月30, 2016

在 WebStorm 下断点调试 ThinkJS ES2015+ 项目

ThinkJS 是第一个全面支持使用 ES2015+ 特性开发的 Node.js 框架,使用 ES2015 里的 */yield 或者 ES2016 草案里的 async/await 可以很好的解决异步嵌套的问题,借助 Babel 编译,可以稳定运行在 Node.js 各个主流版本中。同时 ThinkJS 提供了自动编译和自动更新的机制,免去了文件修改后重启 Node.js 服务的麻烦。

使用 ES2015+ 特性可以更好的开发 Node.js 项目,但由于项目需要编译,给断点调试带来了麻烦。

ThinkJS 从 2.2.0 版本开始支持断点调试 ES2015+ 的代码,本文就聊聊如何在 WebStorm 里断点调试 ThinkJS ES2015+ 项目。如果项目里的 ThinkJS 版本小于 2.2.0,请先升级 ThinkJS,否则看不到效果。

配置 WebStorm

将新建的 ThinkJS 2015+ 项目导入到 WebStorm 中,然后在首选项的 JavaScript 版本设置为 ESMASCRIPT 6。如:

alt

点击右上角的 Edit Configurations,然后新建个项目,项目类型选择 Node.js。如:

alt

在右侧配置项 JavaScript File 里填入 www/development.js,或者通过右侧的按钮选择也可以。如:

alt

调试

点击右上角的调试按钮,会启动 Node.js 服务。如:

alt

alt

如果之前已经在命令行下启动了服务,需要关掉,否则会出现端口被占用导致报错的情况。

在 app/ 目录下的文件设置断点(一定要在 app/ 目录下,不能是 src/ 目录下),如:

alt

打开浏览器,访问对应的接口。返回 WebStorm,点击调试按钮就可以进行调试了,并且看到的是源代码。

alt

其他

如果无法调试,请确认断点是否打在 app/ 目录下的文件。还是不行的话,试着重启下 WebStorm。

本文链接:http://welefen.com/post/debug-thinkjs-es2015-project-in-webstorm.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。