JianghuJS-Debug

12002

1、简介

为什么要Debug
1. 定位问题： Debug 的主要目的是帮助程序员定位和解决代码中的错误或异常。通过 Debug，可以追踪程序的执行过程，找到具体的出错位置。
2. 验证逻辑：有时候，代码逻辑可能并不如预期那样运行。通过 Debug 可以逐步执行代码，验证每一步的逻辑是否符合设计和期望。
3. 性能优化：除了解决错误，Debug 也用于性能优化。通过观察程序的运行情况，找出性能瓶颈，进行针对性的优化。
4. 测试和验证：在进行新功能开发或修改时，Debug 是测试和验证的重要手段。通过逐步执行代码，可以确保新功能或修改的正确性。
Debug 的几种方式：
1. 打印日志（Logging）：在代码中插入打印语句，输出关键变量的值或代码执行到哪一步。这是一种简单而有效的 Debug 方法。
2. 断点调试：在代码中设置断点，当程序执行到断点处时暂停，可以逐行查看代码执行情况，检查变量的值。
3. 单步执行：通过单步执行功能，逐步执行代码，查看每一步的执行结果，帮助发现问题。
4. 异常捕获：使用异常捕获机制，捕获程序运行时的异常，输出相关信息，有助于快速定位问题。
5. 可视化工具：一些集成开发环境（IDE）提供可视化的 Debug 工具，如调试器，可以在图形界面中观察程序执行流程。
6. 代码静态分析：使用代码静态分析工具，对代码进行静态检查，找出潜在的问题，提前进行修复。

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

5、小结

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。

6、作业

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

## 1、简介

- 为什么要Debug

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

- Debug 的几种方式：

1. 打印日志（Logging）： 在代码中插入打印语句，输出关键变量的值或代码执行到哪一步。这是一种简单而有效的 Debug 方法。
	2. 断点调试： 在代码中设置断点，当程序执行到断点处时暂停，可以逐行查看代码执行情况，检查变量的值。
	3. 单步执行： 通过单步执行功能，逐步执行代码，查看每一步的执行结果，帮助发现问题。
	4. 异常捕获： 使用异常捕获机制，捕获程序运行时的异常，输出相关信息，有助于快速定位问题。
	5. 可视化工具： 一些集成开发环境（IDE）提供可视化的 Debug 工具，如调试器，可以在图形界面中观察程序执行流程。
	6. 代码静态分析： 使用代码静态分析工具，对代码进行静态检查，找出潜在的问题，提前进行修复。

Debug 是软件开发过程中不可或缺的一部分。它不仅仅是为了解决代码中的错误，也是一个帮助开发者理解代码、改进代码质量和性能的重要工具。

## 2、Chrome Debug

EggJS 内置了 Chrome Devtools 工具，可以通过该工具来进行调试。具体步骤如下：
	1. 启动应用：`npm run dev` 或 `npm start`。
	2. 使用chrome打开页面, 点击页面空白处**右键**`检查`,进入 Chrome Devtools。
		![debug.png](/__appId__/upload/articleMaterial/12559/debug.png)
	3. 点击 `源码` 标签，在左侧的目录树中找到需要调试的文件，找到要调试的代码加上断点。
	4. 刷新页面，chrome就会停在刚打断点的位置。

## 3、VSCode Debug 后端(Resource)代码

- Npm 项目调试
    
    Npm 项目指的是带 package.json 的那类项目，可以直接打开 package.json，找到 scripts 上面的「Debug」按钮，选择要调试的脚本。
    
    在下面的 Terminal 上就可以看到程序运行日志，然后进行断点调试了。
    
	![deubg-package.png](/__appId__/upload/articleMaterial/12559/deubg-package.png)
    
    可以看到功能还是很齐全的，上面的悬浮按钮可以进行单步、重启服务等操作，下面终端可以看到程序输出，左边可以看到上下文变量、变量监视、调用栈、断点管理。
    
    同时你也可以在断点状态下，在「Debug Console」里执行 js 脚本：
    
    这种方式启动调试的问题在于这个调试方案是临时的，所以停止调试后，下次没法重新进入调试，只能再次打开 package.json 重新点 Debug 进入调试。如果希望能调试方案能固定下来，可以查看下面「配置化的调试方式」部分
    
- Node 脚本调试
    
    Node 脚本调试也很简单，只需要在终端那边创建一个 Debug Terminal，执行你的 Node 命令，就可以进入调试模式。
    
    这种调试方式同样也适用于 Npm 项目。

![debug-terminal-file.png](/__appId__/upload/articleMaterial/12559/debug-terminal-file.png)
    
- `推荐`配置化的调试方式
    
    上面两种调试方式都有一个问题，就是每次停止后都得重新操作才能进行调试。
    
    VSCode 提供一种更灵活的调试方式，就是将调试方式配置化，将调试方案保存到 .vscode/launch.json 文件下。
    
    进入 Debug 界面后，点击「create a launch.json file」创建配置文件，选择 Node 类型（如果是 Egg.js 项目也可以创建 Egg 类型，这个需要安装「eggjs」插件）。
    
    修改 launch.js 就能进行各种各样的调试效果了，这边提供一个模板：
    
    ```json
    {
        "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控制台看到日志输出信息。
	
## 5、小结

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`。

## 6、作业

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