Debug调试

12003

1、Debug 简介

• 为什么要Debug

  1. 定位问题： Debug 的主要目的是帮助程序员定位和解决代码中的错误或异常。通过 Debug，可以追踪程序的执行过程，找到具体的出错位置。
  2. 验证逻辑： 有时候，代码逻辑可能并不如预期那样运行。通过 Debug 可以逐步执行代码，验证每一步的逻辑是否符合设计和期望。
  3. 性能优化： 除了解决错误，Debug 也用于性能优化。通过观察程序的运行情况，找出性能瓶颈，进行针对性的优化。
  4. 测试和验证： 在进行新功能开发或修改时，Debug 是测试和验证的重要手段。通过逐步执行代码，可以确保新功能或修改的正确性。

2、Chrome Debug

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

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

3、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"
          }
      ]
  }

4、日志工具打印

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

后端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控制台看到日志输出信息。