使用 Visual Studio Code 进行调试

已完成

在上一个练习中，你了解了能够使用 Node.js 中提供的调试器逐步运行代码的重要性。 对于 Tailwind Traders 应用程序的工作，需要在 IDE（集成开发环境）中提供更全面的调试环境。

让我们看看如何配置 Visual Studio Code 调试器，以便将其用于 Node.js。

如何使用 Visual Studio Code 进行 Node.js 调试

在 Visual Studio Code 中，可以从“运行”选项卡访问调试程序。

• 如果在编辑器窗口中打开了 .js 文件，可以选择“运行和调试”，然后选择 Node.js 直接调试打开的 JavaScript 文件。

  

可通过多种其他方法在 Visual Studio Code 中开始调试。 在下一个练习中，我们将使用 launch.json 文件。 开发团队通常使用 launch.json 文件自定义运行配置。 使用 .json 文件中指定的配置，可以将它签入源代码管理。 在源代码管理中，可以跨团队共享配置。

通过添加断点来控制流

与内置 Node.js 命令行调试器不同，Visual Studio Code 调试器将立即开始执行代码。 如果程序很快结束，你可能没有机会与调试器进行交互。 这就是要在运行代码前添加断点的原因。 我们将在下一个练习中添加和删除几个断点。

若要在代码中添加断点，请在 JavaScript (.js) 文件中找到要在其中添加中断的代码行。 在代码语句的行号旁边，选择左边距。 添加断点后，可看到行号旁边有一个红色圆圈。 要删除断点，请单击红色圆圈。

还可以使用右键上下文菜单添加断点。 内容菜单包括“添加条件断点”选项，可在其中输入中断代码执行的条件。 条件断点仅在满足指定条件时才处于活动状态。

此断点仅在 convertedValue 的值未定义时停止执行。

Visual Studio Code 调试器概述

设置断点并启动应用后，屏幕上将显示新的信息面板和控件。

数字	名称	描述
1.	调试器启动控件	在侧边栏顶部，可以找到启动控件。
2.	变量状态	“变量”面板显示变量的当前状态。
3.	受监视的变量状态	“监视”面板显示所监视变量的当前状态。
4.	当前调用堆栈	“调用堆栈”面板显示当前调用堆栈。
5.	已加载的脚本文件	“加载的脚本文件”面板显示到目前为止已加载的 JavaScript 文件。
6.	断点	“断点”面板显示你在代码中放置的所有断点。
7.	执行控件	可以使用这些控件来控制程序的执行流。
8.	当前执行步骤	当前执行步骤在编辑器窗口中突出显示。
9.	调试控制台	“调试控制台”可用于可视化应用程序控制台日志，并在当前执行上下文中计算表达式或执行代码。

调试器启动控件

在侧边栏顶部，可以找到启动控件：

Number	名称	描述
1.	开始调试	开始调试应用程序。
2.	选择活动的启动配置	选择活动启动配置。
3.	编辑 launch.json 文件	编辑 launch.json 文件。 如果需要，请创建 json 文件。
4.	打开“调试控制台”	打开“调试控制台”，并切换“变量”、“监视”、“调用堆栈”和“断点”面板的可见性。

查看和编辑变量状态

分析导致程序缺陷的原因时，请监视变量状态以查找意外更改。 可使用“变量”面板来执行此操作。

变量按范围划分：

作用域	说明
Local	局部变量，可在当前范围（通常为当前函数）内访问。
全球	全局变量，可从程序中任何位置访问。 还包含来自 JavaScript 运行时的系统对象，因此如果你在其中看到很多内容，请不要感到惊讶。
结尾	闭包变量，可从当前闭包（如果有）中访问。 闭包将函数的本地范围与它所属的外部函数的范围结合在一起。

可能的操作包括：

• 展开范围：选择箭头可以展开范围和变量。 展开对象时，可以看到该对象中定义的所有属性。

• 更改变量值：可以通过双击变量动态地更改该变量的值。

• 查看变量：还可以通过在编辑器窗口中将鼠标直接悬停在函数参数或变量上来查看其值。

  

监视变量

如果要在一段时间内或不同函数间跟踪变量状态，每次都进行搜索可能很繁琐。 “监视”面板在这种情况下很方便。

可选择加号按钮，输入要监视的变量名称或表达式。 还可以在“变量”窗格中右键单击某个变量并选择“添加到监视”。

代码运行时，监视窗格内的所有表达式将自动更新。

调用堆栈

每次程序输入函数时，都会向调用堆栈中添加一个条目。 当应用程序变得复杂，多次在函数内调用函数时，调用堆栈会显示函数调用的痕迹。

查找异常的来源很有用。 如果程序中出现意外故障，你会在控制台中看到类似如下的内容：

/Users/learn/nodejs/index.js:22
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/Users/learn/nodejs/index.js:22:16)
    at printForeignValues (/Users/learn/nodejs/index.js:31:28)
    at Object.<anonymous> (/Users/learn/nodejs/index.js:39:1)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

错误消息下方那一组 at [...] 行称为“堆栈跟踪”。 堆栈跟踪提供了出现异常前调用的每个函数的名称和源。 但是它可能有点难以理解，因为它还包含来自 Node.js 运行时的内部函数。

Visual Studio Code 调用堆栈在这种情况下很方便。 默认情况下，它会筛选掉不需要的信息，仅显示你自己代码中的相关函数。 然后，你可以展开此调用堆栈以找出引发异常的位置。

若要获取更多帮助，可将鼠标悬停在堆践中的函数名称上，然后选择显示的“重启框架”按钮。 此操作将由该函数的开头重启程序，从而使执行回退到该点。

查看已加载的脚本文件

此面板显示到目前为止已加载的所有 JavaScript 文件。 在大型项目中，有时检查当前代码从哪个文件执行是有用的。

断点

在“断点”面板中，可以查看和开关在代码中放置的所有断点。 还可以切换在捕获或未捕获异常时中断的选项。 可以使用“断点”窗格检查程序状态，并在发生异常时使用“调用堆栈”追溯异常的来源。

控件执行

可以使用这些控件来控制程序的执行流。

从左到右，控件为：

• 继续或暂停执行。 如果执行已暂停，则它将继续，直到命中下一个断点。 如果程序正在运行，则按钮会切换到暂停按钮，可以使用该按钮来暂停执行。
• 单步跳过。 在当前上下文中执行下一个代码语句（与内置调试器中的 next 命令相同）。
• 单步执行。 与单步跳过类似，但如果下一个语句是函数调用，则转到该函数的第一个代码语句（与 step 命令相同）。
• 单步跳出。如果在函数内部，则执行该函数的其余代码，并在初始函数调用后跳回到该语句（与 out 命令相同）。
• 重启。 从头开始重启程序。
• 停止。 结束执行并退出调试器。

使用调试控制台

按“Ctrl+Shift+Y”（Windows、Linux）或“Cmd+Shift+Y”(Mac) 可显示或隐藏调试台。 它可用于可视化应用程序控制台日志，还可用于评估表达式或执行当前执行内容中的代码，例如内置 Node.js 调试器中的 exec 命令。

可以在调试控制台底部的输入字段中输入 JavaScript 表达式。 然后按 Enter 对其求值。 结果直接显示在控制台中。

这样，就可以快速检查变量值、使用不同的值测试函数或更改当前状态。

添加日志点而不是 console.log

Linters 会将 console.log 语句标记为错误。 为了获得与 console.log 语句相同的效果，请改用 Visual Studio Code 日志点，以便输出到调试控制台。

通过右键单击用于添加断点的同一区域添加日志点，然后选择“添加日志点”。 在代码中输入要在此时显示的消息。

与断点类似，记录点不会以任何方式更改代码，并且只在调试期间使用。 你再也没有借口让那些被遗忘的 console.log('here') 溜进生产。