原文作者：Hussain Arif
原文地址：blog.logrocket.com/debug-node-…
翻译：一川
写在前面
在开发软件时，调试是最重要的步骤之一。代码测试不仅可以确保稳定性，还可以保证代码的质量和更好的用户体验。通常，开发人员在其代码库中使用 console.log 语句来检查问题。例如，考虑以下 JavaScript 代码：
console.log("This code will be printed in the console");
const i = 10;
console.log("The value of i is", i);
上面的代码将产生以下输出：
尽管这是一种有效的测试方法，但仍存在一些问题。首先，您无法检查应用程序的内存使用情况;在优化性能方面，跟踪 RAM 使用情况至关重要。此外，没有断点，这意味着您无法在运行时跟踪变量的值。
作为一种解决方法，您可以使用 console.log 语句，但是，这对于大型项目可能会有问题，因为您必须检查许多页的日志记录语句：
Debugging output 调试输出
在本文中，我们将分别使用 GUI 和 CLI 探讨防止此问题的两种不同的调试方法。首先，我们将学习如何使用 Chrome 的内置开发者工具调试Node.js应用。作为替代方案，我们将考虑将内置的 Node.js debugger 关键字与观察者一起使用。让我们开始吧！
创建项目
首先，使用以下终端命令初始化空白控制台项目：
mkdir debugger-tools #create project directory
cd debugger-tools
npm init -y #initialize project.
touch index.js #create a file called index.js
为了展示调试器功能，我们将构建一个基本的Express服务器。为此，请按如下方式安装express模块：
npm install express
使用 Chrome DevTools
Chrome 开发者工具有助于程序员以最小的工作量测试他们的 Web 应用和调试 Node.js 控制台项目。Chrome DevTools 支持以下功能：
- 断点：允许用户在运行时跟踪其变量值
- 内存和 CPU 分析：帮助我们跟踪应用的内存和 CPU 使用情况
- 源映射：将目标代码映射到源代码，帮助我们读取和调试原始源代码中的编译代码
运行检查器
现在，我们将学习如何通过开始使用Chrome DevTools菜单来调试我们的项目。首先，导航到index.js并编写以下代码：
//file: index.js
const express = require("express");
const app = express();
const port = 3000;
app.get("/", async (req, res) => { //when the user is on the home directory,
console.log("User is on home page"); //log out this message to the console
res.send("Hello World!"); //send response to client to prevent timeout errors
});
app.listen(port, () => { //run the server
console.log(`Example app listening on port ${port}`);
});
接下来，我们必须运行调试器：
npx nodemon --inspect index.js
上面的代码告诉编译器附加一个调试器守护进程，以便我们可以使用Chrome DevTools检查我们的程序：
Debugger daemon 调试器守护程序
现在守护程序正在运行，打开调试器。在空的浏览器窗口中，右键单击并单击检查以打开 Chrome 开发者工具。然后，单击绿色的 Node.js 图标，这将告诉浏览器启动 Node.js 调试器：
Opening debugger step 1 打开调试器步骤 1
现在，让我们测试我们的代码！转到 localhost:3000 ：
Opening debugger step 2 打开调试器步骤 2
每次用户刷新页面时，我们都会在 DevTools 控制台视图中获取控制台日志，指示 Node.js 已成功将调试器附加到我们的程序。
在Nodejs中插入断点
断点功能可以说是调试器工具集中最重要的功能。顾名思义，断点在到达某个点时会暂停代码执行，这在以下情况下很有用：
- 在代码执行期间跟踪变量的值
- 检查调用堆栈，这在你想要检查项目是否在应用的生命周期中实际调用关键函数的情况下至关重要
以下代码将帮助我们更好地理解调试器：
let count = 0; //initialize a count variable.
app.get("/", async (req, res) => {
console.log("User is on home page");
count++; //when the user visits this page, increment the count variable
console.log("User visit count", count); //log out its value
res.send("Hello World!");
});
若要启用断点，请在“开发人员工具”窗口中选择“源”。然后，双击要在其中放置断点的行;在我们的例子中，它是 line 9 。这告诉调试器我们希望断点跟踪 count 变量的值：
启用断点
当我们运行代码时，我们可以看到调试器每次达到 line 9 时都会暂停代码执行：
调试器每次到达第 9 行时都会暂停代码执行
借助调试器服务，我们现在可以在程序运行时跟踪 count 的值。
使用 debugger 关键字
当我们不想通过 GUI 手动激活断点时，我们还可以在代码中使用内置的 debugger 关键字，如下所示：
const count = 0;
const myArray = []; //create an empty array
app.get("/", async (req, res) => {
console.log("User is on home page");
count++;
myArray.push(count); //push element into this array
debugger; //activate a breakpoint.
//All of the variables before this line will be tracked
console.log("User visit count", count);
res.send("Hello World!");
});
以下是该程序的输出：
使用内存性能分析器
内存性能分析器可帮助开发人员跟踪其应用的内存使用情况，这对于查找内存泄漏和优化性能非常有用。要使用内存性能分析器，请转到内存，确保已选择堆快照，向下滚动，然后单击记录：
内存探查器记录
在此选项中，您可以查看程序总共消耗了多少内存。此外，扩展每个选项可以更深入地了解代码使用的内存量。因此，您可以监视项目的内存泄漏：
程序消耗的内存量
将内置的 Node.js debugger 关键字与观察程序一起使用
如果您希望在 CLI 中进行调试，则可以使用终端中的观察程序监控变量，就像使用 Chrome DevTools 单步执行代码和监控变量一样。观察程序允许您在执行程序时监视特定变量或表达式的值。可以为感兴趣的变量或表达式设置观察程序，调试器将在程序执行期间的不同点显示该变量或表达式的当前值。
我们将使用内置的 watch() 函数和包含变量名称的字符串参数。此功能有助于跟踪变量值的变化并了解它们在运行时的演变情况。若要演示，请创建一个名为 index.js 的文件，并向其中添加以下代码：
let count = 0;
for (let i = 1; i <= 10; i++) {
if (i % 2 !== 0) {
count++;
}
debugger;
}
打开终端或命令提示符并导航到 index.js 文件所在的目录。通过运行以下命令启动 Node.js 调试器：
node inspect index.js
调试器将在代码的第一行暂停执行。若要为 count 变量设置观察程序，请在调试器提示符中键入以下命令：
现在，您可以通过键入 c 并按 Enter 继续执行代码。调试器将继续执行循环，在每次迭代时遇到 debugger 关键字时，它将当前值 count 显示为观察程序：
单步执行代码直到断点
或者，如果要逐行监视代码执行，也可以使用字母 n 移动到下一行代码：
逐行单步执行代码
可以通过在调试器控制台中查看输出来检查每次迭代的值 count ，从而轻松调试代码。
写在最后
除了使用内置的Node.js debugger和观察程序调试Node.js应用程序外，Google Chrome DevTools 是应用程序开发过程中使用的最关键软件之一。它不仅可以帮助程序员消除错误，还可以帮助他们增强应用程序的用户体验，最终导致更快乐的用户。
一川说
觉得文章不错的读者，不妨点个关注，收藏起来上班摸鱼的时候品尝。
欢迎关注笔者公众号「宇宙一码平川」，助你技术路上一码平川。
