03月30, 2016

在 VS Code 下断点调试 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+ 的代码,本文就聊聊如何在 VS Code 里断点调试 ThinkJS ES2015+ 项目。如果项目里的 ThinkJS 版本小于 2.2.0,请先升级 ThinkJS,否则看不到效果。

打开项目

通过 VS Code 菜单 File -> Open 来打开 ThinkJS 2015+ 项目,如:

alt

设置调试配置

点击左侧的调试菜单,点击上面的调试按钮,会调试选择的环境,选择 Node.js。如:

alt

选择 Node.js 后,会生成一个 launch.json 文件。修改里面的配置,将 sourceMaps 值改为 true(注意:有 2 个 sourceMaps key,都修改)。

alt

启动服务

点击上面的调试按钮来启动服务。如果已经在命令行启动了 Node.js 服务,需要关掉,否则会因为端口被占用导致错误。

alt

开始调试

回到代码模式,在 app/ 目录下的文件里加上断点(一定要是在 app/ 目录下的文件,不能是 src/ 下的文件)。如:

alt

访问对应的页面,就可以看到代码显示的已经是源代码了,然后利用顶部的调试按钮就可以调试了。如:

alt

这样就可以很好的在 VS Code 下调试 ES2015+ 代码了。

总结

如果不能调试,请确认断点是否打在 app/ 目录下。

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

-- EOF --

Comments

评论加载中...

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