180 - 调试工具 - Node.js 调试 - 使用 VS Code 调试 Node.js

调试工具 - Node.js 调试 - 使用 VS Code 调试 Node.js

在 Node.js 开发过程中，调试代码是一项至关重要的技能。当代码出现问题时，高效地定位和解决问题能极大地提高开发效率。VS Code 作为一款强大的代码编辑器，提供了便捷且功能丰富的 Node.js 调试功能。本文将详细介绍如何使用 VS Code 来调试 Node.js 应用程序。

1. 准备工作

在开始使用 VS Code 调试 Node.js 之前，需要确保已经安装了以下工具：

• Node.js：可以从 Node.js 官方网站 下载并安装适合你操作系统的版本。
• VS Code：从 VS Code 官方网站 下载并安装。

2. 创建一个简单的 Node.js 项目

为了演示调试过程，我们先创建一个简单的 Node.js 项目。

2.1 创建项目目录

打开终端，执行以下命令创建一个新的项目目录并进入该目录：

mkdir nodejs-debug-demo
cd nodejs-debug-demo

2.2 初始化项目

在项目目录下执行以下命令初始化 package.json 文件：

npm init -y

2.3 创建入口文件

使用 VS Code 打开项目目录，创建一个名为 app.js 的文件，并添加以下代码：

function add(a, b) {
    return a + b;
}
const result = add(2, 3);
console.log('The result is:', result);

3. 配置 VS Code 调试环境

3.1 打开调试面板

在 VS Code 中，点击左侧边栏的调试图标（像一个小虫子的图标），或者使用快捷键 Ctrl + Shift + D（Windows/Linux）、Cmd + Shift + D（Mac）打开调试面板。

3.2 创建调试配置文件

在调试面板中，点击顶部的齿轮图标，选择 Node.js 环境。VS Code 会自动在项目根目录下创建一个 .vscode 文件夹，并在其中生成一个 launch.json 文件。

3.3 配置 launch.json 文件

默认生成的 launch.json 文件内容如下：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/app.js"
        }
    ]
}

这里的配置表示使用 Node.js 调试器启动 app.js 文件。一般情况下，这个默认配置已经可以满足基本的调试需求。

4. 开始调试

4.1 设置断点

在 app.js 文件中，将光标移动到 return a + b; 这一行的行号旁边，点击鼠标左键，会出现一个红色的圆点，表示在这一行设置了断点。当程序执行到这一行时，会暂停执行，方便我们查看变量的值和程序的执行状态。

4.2 启动调试

在调试面板中，选择 Launch Program 配置，然后点击绿色的三角形按钮（或者使用快捷键 F5）启动调试。程序会在断点处暂停，此时可以看到 VS Code 界面发生了一些变化：

• 调试工具栏：出现在编辑器顶部，包含继续执行（F5）、单步跳过（F10）、单步进入（F11）、单步跳出（Shift + F11）等调试操作按钮。
• 变量面板：在编辑器左侧，显示当前作用域内的变量及其值。可以查看 a 和 b 的值分别为 2 和 3。
• 调用栈面板：显示当前程序的调用栈信息，帮助我们了解程序的执行流程。

4.3 调试操作

• 继续执行（F5）：让程序继续执行，直到遇到下一个断点或程序结束。
• 单步跳过（F10）：执行当前行代码，并跳到下一行。如果当前行调用了函数，不会进入函数内部。
• 单步进入（F11）：如果当前行调用了函数，会进入函数内部继续调试。
• 单步跳出（Shift + F11）：从当前函数中跳出，继续执行函数调用后的代码。

5. 高级调试技巧

5.1 条件断点

有时候我们只希望在满足特定条件时程序才暂停执行，这时可以使用条件断点。在断点上右键点击，选择 Edit Breakpoint，在弹出的输入框中输入条件表达式，例如 a === 2。当程序执行到该断点时，只有当 a 的值等于 2 时才会暂停。

5.2 日志点

日志点是一种特殊的断点，它不会暂停程序的执行，而是在控制台输出指定的信息。在断点上右键点击，选择 Add Log Message，输入要输出的信息，例如 The values of a and b are: {a}, {b}。程序执行到该日志点时，会在控制台输出相应的信息。

5.3 调试远程 Node.js 应用

如果要调试部署在远程服务器上的 Node.js 应用，可以在 launch.json 中添加远程调试配置。以下是一个示例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Remote",
            "address": "remote-server-ip",
            "port": 9229,
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/path/to/remote/project"
        }
    ]
}

在远程服务器上启动 Node.js 应用时，需要添加 --inspect 或 --inspect-brk 参数，例如：

node --inspect=0.0.0.0:9229 app.js

总结

通过以上步骤和技巧，我们可以使用 VS Code 高效地调试 Node.js 应用程序。无论是简单的本地项目还是复杂的远程应用，VS Code 都能提供强大的调试支持，帮助我们快速定位和解决问题。