Debug-问题排查

什么是Debug

在编写代码时，由于程序出现了错误或者不符合预期的行为，需要进行排查问题的过程，这个过程就是 Debug。

Debug 是指通过各种手段来定位、分析和解决程序中出现的问题，以确保代码的正确性和稳定性。

Debug的几种方式

以下是 EggJS 中常用的几种 Debug 方式：

Chrome Debug 页面代码

EggJS 内置了 Chrome Devtools 工具，可以通过该工具来进行调试。具体步骤如下：
1. 启动应用：npm run dev 或 npm start。
2. 使用chrome打开页面, 点击页面空白处右键检查,进入 Chrome Devtools。

3. 点击 源码 标签，在左侧的目录树中找到需要调试的文件，找到要调试的代码加上断点。
4. 刷新页面，chrome就会停在刚打断点的位置。

VSCode Debug 后端(Resource)代码

• Npm 项目调试

  Npm 项目指的是带 package.json 的那类项目，可以直接打开 package.json，找到 scripts 上面的「Debug」按钮，选择要调试的脚本。

  在下面的 Terminal 上就可以看到程序运行日志，然后进行断点调试了。

  

  可以看到功能还是很齐全的，上面的悬浮按钮可以进行单步、重启服务等操作，下面终端可以看到程序输出，左边可以看到上下文变量、变量监视、调用栈、断点管理。

  同时你也可以在断点状态下，在「Debug Console」里执行 js 脚本：

  这种方式启动调试的问题在于这个调试方案是临时的，所以停止调试后，下次没法重新进入调试，只能再次打开 package.json 重新点 Debug 进入调试。如果希望能调试方案能固定下来，可以查看下面「配置化的调试方式」部分

• Node 脚本调试

  Node 脚本调试也很简单，只需要在终端那边创建一个 Debug Terminal，执行你的 Node 命令，就可以进入调试模式。

  这种调试方式同样也适用于 Npm 项目。

  

• 推荐配置化的调试方式

  上面两种调试方式都有一个问题，就是每次停止后都得重新操作才能进行调试。

  VSCode 提供一种更灵活的调试方式，就是将调试方式配置化，将调试方案保存到 .vscode/launch.json 文件下。

  进入 Debug 界面后，点击「create a launch.json file」创建配置文件，选择 Node 类型（如果是 Egg.js 项目也可以创建 Egg 类型，这个需要安装「eggjs」插件）。

  修改 launch.js 就能进行各种各样的调试效果了，这边提供一个模板：

  {
      "version": "0.2.0",
      "configurations": [
          {
              "command": "npm --prefix=jianghujs_demo_basic run dev",
              "name": "jianghujs_demo_basic",
              "request": "launch",
              "type": "node-terminal"
          }
      ]
  }

日志工具打印

我们可以通过日志工具打印出调试信息，

后端resource我们使用app.logger：
1. 在代码中添加日志代码，例如：app.logger.info('info message')。
2. 启动应用：npm run dev 或 npm start。
3. 在控制台中查看日志输出信息。

前端页面我们使用console.log：
1. 在代码中添加日志代码，例如：console.log('info message')。
2. 刷新页面，就能在chrome的 console控制台看到日志输出信息。

小结

Debug 是指通过各种手段来定位、分析和解决程序中出现的问题，以确保代码的正确性和稳定性。EggJS 中常用的 Debug 方式包括 Chrome Debug 页面代码、VSCode Debug 后端(Resource)代码和日志工具打印。

• Chrome Debug 页面代码：EggJS 内置了 Chrome Devtools 工具，可以通过该工具来进行调试。
• VSCode Debug 后端(Resource)代码：可以在 VSCode 的 Debug 界面创建配置文件，将调试方案保存到 .vscode/launch.json 文件下。
• 日志工具打印：后端 resource 使用 app.logger，前端页面使用 console.log。

课后练习

请尝试使用 Chrome Debug 工具和日志工具打印来调试一个 JianghuJS 应用，并记录你的调试过程和结果。