6.断点调试

断点调试

• 使用 node-inspector 断点调试
  • 安装 node-inspector
  • 启动 node-inspector 服务
  • 启动 Node.js 服务
  • 调试
• 在 VS Code 下断点调试
  • 打开项目
  • 设置调试配置
  • 启动服务
  • 开始调试
• 在 WebStorm 下断点调试
  • 配置 WebStorm
  • 调试

使用 ES2015+ 特性来开发 Node.js 项目可以带来巨大的便利，但同时由于有些特性现在还不支持，需要借助 Babel 编译，运行的代码实际上是编译后的代码，这样给调试带来很大的麻烦。

ThinkJS 从 2.2.0 版本开始支持断点调试源代码，同时如果运行时出现报错，错误也是定位到源代码下。

使用 node-inspector 断点调试

安装 node-inspector

可以通过 npm install -g node-inspector 来全局安装 node-inspector，如果是在 *unix 系统下，需要在命令前面添加 sudo 执行。

启动 node-inspector 服务

通过命令 node-inspector & 来启动 node-inspector 服务。

启动 Node.js 服务

使用 node --debug www/production.js 来启动 Node.js 服务。

这里跟之前启动服务有些区别，由于启动时需要添加 --debug 参数，所以不能用 npm start 来执行启动了。

调试

访问 http://127.0.0.1:8080/debug?port=5858，会出现调试页面。

然后在 app 目录下找到对应的编译后的文件，在对应的地方加上断点（这里一定要是在 app/ 目录，不能是源代码 src/ 目录），如：

然后新建标签页，访问对应的接口。这时候页面会一直卡在那里。这时候返回 node-inspector 的标签页，会看到内容已经跳到 ES2015+ 的代码，如：

然后就可以利用后侧的断点工具进行调试了。

在 VS Code 下断点调试

打开项目

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

设置调试配置

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

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

启动服务

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

开始调试

回到代码模式，在 app/ 目录下的文件里加上断点（一定要是在 app/ 目录下的文件，不能是 src/ 下的文件）。如：

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

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

在 WebStorm 下断点调试

配置 WebStorm

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

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

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

调试

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

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

在 app/ 目录下的文件设置断点（一定要在 app/ 目录下，不能是 src/ 目录下），如：

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

文档地址：https://github.com/75team/www./tree/master/view/zh-cn/doc/2.2/debug.md