Node.js Debug—— 使用 Chrome DevTools 调试

在进行 Node.js 开发时,总会遇到程序出现错误,而要想有效地找出错误,就需要使用调试工具。Chrome DevTools 是一款常用的调试工具,它可以帮助我们快速定位错误并解决问题。本文将以 Node.js 中使用 Chrome DevTools 进行调试为例,介绍如何使用这个强大的调试工具。

前置学习

在学习本文前,你需要掌握以下技术:

  • Node.js 基础知识
  • Chrome 浏览器基础知识
  • Chrome DevTools 调试工具基础使用

安装 Node.js

首先,我们需要安装 Node.js,如果你已经安装过可以跳过此步骤。 Node.js 的下载地址:https://nodejs.org/en/download/。下载完成后,按照提示一步步安装即可。

准备工作

我们需要先创建一个 Node.js 项目,然后在项目中使用 Chrome DevTools 进行调试。如果你已经有一个项目可以跳过此步骤。

mkdir my-app
cd my-app
npm init -y

在项目根目录下创建一个 index.js 文件:

const a = 1;
const b = 2;
console.log(a + b);

代码中定义了两个变量 a 和 b,然后将它们相加并输出结果。

使用 Chrome DevTools 调试

启动 Node.js 调试需要使用 --inspect 参数。在终端中输入以下命令:

node --inspect index.js

执行命令后可以看到类似以下输出:

这是 Node.js Debugger 的调试监听地址,我们需要复制它。然后打开 Chrome 浏览器,输入调试地址 chrome://inspect 访问,点击 Open dedicated DevTools for Node,打开 Chrome DevTools 。

在 Chrome DevTools 中点击左下角的 Add connection 按钮,然后把上一步复制的调试地址复制到 Connection target 中,连接成功后你能看到你的 Node.js 的代码。打开 Sources 选项卡,选择 index.js 文件,可以看到 Debugger paused 信息,代表代码已暂停执行。

在代码执行到断点处时,我们可以打开 Chrome DevTools 调试面板,对代码进行分析。对于这个例子,可以通过 Scope 面板查看变量的值。在 Scope 面板选择 Local,可以看到当前作用域中定义的变量 a 和 b 的值。

另外,在调试面板中的 Console 面板上,我们还可以直接执行一些代码,比如:

console.log(a);
console.log(b);

这将会在控制台中输出变量 a 和 b 的值。也可以在控制台中执行任意的命令,例如:

const arr = [1, 2, 3];
console.table(arr);

此时我们可以看到表格形式输出数组。

变量跟踪

在调试过程中,变量的值会随着代码的执行而改变。如果有一个变量一直取不到正确的值,那么就需要使用变量跟踪功能。

Sources 面板中左侧的调试区域中,打开任意一个文件,可以看到代码中每一行的左侧都有一个点,这表示断点。

选中任意一行按下 F11 键,即可进入单步执行模式,用于逐行查看代码执行过程。在代码执行到相应的行时,可以在右侧的 Scope 面板中查看变量的值,并且也可以进行修改。

当无法一行一行地查看代码时,我们可以使用条件断点。在需要打断点的代码行上右键选择 Add conditional breakpoint...,在输入框中输入条件并按 Enter 键即可。此时代码执行到该行时,如果条件成立则会打上断点停下来。如果条件不成立,则不会打断点。

const a = 1;
const b = 2;
if (a === 1 && b === 2) {
  console.log(a + b);
}

我们在这个代码段中打上条件断点 a===1&&b===2,当 a 和 b 的值不是 1 和 2 时,断点将不会起作用。

总结

本文主要介绍了 Node.js 调试的方法和 Chrome DevTools 的使用,同时也讲解了 Chrome DevTools 的一些高级功能,如变量跟踪和条件断点。这些工具可以帮助开发者快速定位错误,并提高开发效率。希望本文能够对你进行深入的学习和指导。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65ab247fadd4f0e0ff4bf04d


纠错反馈