详解使用Visual Studio Code对Node.js进行断点调试

以下是详解使用 Visual Studio Code 对 Node.js 进行断点调试的完整攻略。

安装 Node.js 和 Visual Studio Code

首先，你需要安装 Node.js 和 Visual Studio Code。你可以从官网上下载并安装它们。

下载 Node.js：https://nodejs.org/zh-cn/download/
下载 Visual Studio Code：https://code.visualstudio.com/download

创建 Node.js 项目

创建一个文件夹来存放你的 Node.js 项目，并在其中创建一个 index.js 文件。在 index.js 文件中，编写一个简单的 Node.js 程序。

function squareRoot(num) {
  return Math.sqrt(num);
}

console.log(squareRoot(16));

安装 VS Code 插件

打开 Visual Studio Code，按下 Ctrl + Shift + X 快捷键打开 Extensions 窗口。在搜索框中输入 "node debug"，找到 "Node Debug" 插件并安装它。

在 VS Code 中启动调试

在 VS Code 中使用快捷键 F5 启动调试，并选择 "Node.js" 作为调试环境。VS Code 会自动在项目根目录下生成一个名为 launch.json 的配置文件。该配置文件包含所有启动调试所需的配置。

此时你会看到编程界面的左侧窗口出现调试向导，并且程序会在 VS Code 中启动。此时 Node.js 程序将暂停在第一行。

调试示例1：调试计算平方根的程序

让我们来看一个简单的调试示例。让我们假设你编写了一个程序来计算一个数字的平方根，但是它似乎没有正确工作。为了找出问题所在，你决定在 VS Code 中启动 Node.js 调试器，并在程序中设置断点。

在 index.js 文件中加入断点，方法是鼠标单击行号右侧的空白区域。该区域将变为红色。

function squareRoot(num) {
  return Math.sqrt(num); // 在这里设置断点
}

console.log(squareRoot(16));

启动调试并在程序运行到你设置的断点时 VS Code 将自动暂停程序的执行，从而允许你检查变量、调试逻辑等。此时，在调试控制台中输入 num 并按下回车键，你会看到输出结果为 16。

输入 Math.sqrt(num) 并按下回车键，你将计算出数字 16 的平方根，结果为 4。

在右侧的 Debug 控制台中点击绿色的继续按钮继续执行程序，最终你将看到程序输出了结果 4。

调试示例2：调试访问 JSON API 的程序

下面是一个更复杂的调试示例，其中我们将访问一个 JSON API 并根据其响应创建一个列表。我们将在此程序中设置断点以便检查响应的 JSON 数据。

在项目根目录中创建一个名为 reddit.js 的文件。在该文件中编写以下代码。

const fetch = require('node-fetch');

async function fetchRedditPosts(subreddit) {
  const url = `https://www.reddit.com/r/${subreddit}.json`;
  const response = await fetch(url);
  const data = await response.json();

  const posts = data.data.children.map(child => {
    return {
      title: child.data.title,
      url: child.data.url
    };
  });

  return posts;
}

async function main() {
  const posts = await fetchRedditPosts("learnprogramming");
  console.log(posts);
}

main();

将光标放在 main() 函数的第一行并启动调试，然后单击代码行号右侧的空白区域以在相应行上设置断点。

接着要做的是给调试会话提供所需的参数。在 VS Code 中，你可以使用 launch.json 文件来配置调试器的行为。找到 launch.json 文件时，你应该看到下面的 JSON 对象。在其中添加 "args": ["learnprogramming"] 字段。

"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/reddit.js",
    "args": ["learnprogramming"], // 添加这一行
    "runtimeExecutable": "node",
    "skipFiles": ["<node_internals>/**"]
  }
]

现在重新启动调试器，此时程序将在设置的第一行断点暂停。

在 Debug 控制台中输入 posts 并按下回车键，你将看到一个 JSON 对象数组，每个对象包含标题和 URL 属性。这是网站数据的解析结果。

把光标放在代码行号上并按下 F5 按钮以继续运行程序，你将在控制台中看到一个 JSON 对象的数组，以及后续流程中靠顶和链接的结构。

以上就是使用 Visual Studio Code 对 Node.js 进行断点调试的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解使用Visual Studio Code对Node.js进行断点调试 - Python技术站