Visual Studio Code编辑器拥有有效调试Node.js应用程序的所有工具。它的内置调试器可以调试任何以Node.js运行时为目标的应用程序，即使该应用程序的源代码是一种可以转换为JavaScript的语言，如TypeScript。
当开始一个调试会话时，你必须检查调用堆栈和任何范围内的变量的当前状态。你也可以在编辑器中评估表达式，并通过代码来钻研有问题的部分。
为Node.js调试设置一个项目并不特别困难，本教程将帮助你在第一次尝试中获得正确的结果
前提条件
在开始之前，请确保Node.js和Visual Studio Code的最新版本都已安装。本教程分别使用16.2.0和1.56.2版本。
你还需要一个Node.js项目；你可以使用你自己的项目，也可以下载这个URL缩短器的样本应用程序。设置的说明在项目的README文件中。
在Visual Studio Code中启动一个调试会话
在Visual Studio Code中开始调试会话的最简单方法是在编辑器中打开一个文件，点击活动栏中的运行视图图标（或按键盘上的Ctrl+Shift+D ），然后点击应用程序左上角的运行和调试按钮。
Visual Studio Code调试器将尝试为你的项目自动检测调试环境，但如果失败，你将被提示选择适当的环境；在这种情况下，选择Node.js。
**Node.js（遗留）**选项是指旧的JavaScript调试器，它仍然可用，但不推荐使用。
选择环境后，项目启动，调试器附着在进程上。你可以在DEBUGCONSOLE中看到项目的输出，调试工具栏出现在屏幕的顶部，可以逐步浏览代码，暂停脚本，或结束会话。
在编辑器的左侧，有五个面板，分别是VARIABLES,WATCH,CALL STACK,LOADED SCRIPTS, 和BREAKPOINTS。
你还可以为项目创建一个启动配置文件，以配置和保存调试设置细节，这些细节可以被任何在项目上工作的人无限地重复使用。这个配置文件以launch.json ，保存在项目根部的.vscode 文件夹中。
通过点击RUN AND DEBUG中的create a launch.json文件链接来创建该配置文件。RUN"视图中创建配置文件。
为你的项目选择环境后，launch.json 文件应该出现在编辑器中，内容如下。
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch URL Shortener",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/src/server.js"
}
]
}
配置的name ，它将在配置菜单中被识别；将运行的程序在program 字段中被指定。
在每个配置上有许多选项可以设置，如传递给程序的参数、环境变量和预调试任务等。阅读文档以了解哪些设置与你的项目有关。
一旦你完成了项目配置的设置，通过配置下拉菜单选择并执行。
附加一个外部Node.js进程
另一个开始调试会话的选项是附加到一个外部Node.js进程。用以下命令启动该程序。
$ node --inspect src/server.js
或者，如果你想让调试器在程序开始运行前就附加上，请添加。
$ node --inspect-brk src/server.js
执行上述任一命令后，你可以在Visual Studio Code中打开一个进程选择器，它列出了Node.js调试器可用的所有进程。要打开进程选择器，输入Ctrl+Shift+P ，找到Debug。附加到Node进程命令。
这将打开一个菜单，列出在你的机器上运行的每个单独的Node.js进程。可能有几个条目，但应该很容易选择你感兴趣的那个。
选择相关条目，开始调试会话。
创建一个断点
断点允许你在一个特定的行上暂停代码的执行来检查它。在Visual Studio Code中，你几乎可以在任何地方创建断点，除了函数声明语句。你可以在变量声明、表达式、注释和空行上这样做，但不受限制。
通过点击编辑器中行号左边的沟槽来创建一个断点。当你把鼠标移过这些数字时，每一行都会出现一个红圈。点击某一行的红圈会使其变成亮红色，表明该行存在一个活动断点。
你可以对程序中所有与你要解决的问题相关的行重复这一操作。
例如，当你在路由的处理程序中创建一个断点时，你可以通过使用浏览器或Postman或curl 等工具向路由发出请求来执行这部分代码来触发它。
这将导致程序停止执行，你可以在VARIABLES窗格中检查任何当前范围标识符的值，方法是将鼠标悬停在当前断点的行上，该行以黄色突出显示。这类似于网络浏览器中的JavaScript调试器。
在BREAKPOINTS窗格中，可以看到项目中所有启用的断点。你可以在这里编辑或禁用任何断点，如果你在程序中的不同文件中有多个断点，这很有帮助。
您还可以对应用程序中出现的所有异常进行断点，或者只对未捕获的异常进行断点。在后一种情况下，这意味着调试器在打印出错误信息之前会暂停，你可以在进程退出之前检查可能出了什么问题。
对于调试工作流程来说，断点的一个变种是日志点**，**它将一个消息或数值记录到控制台，而不是暂停代码的执行和进入调试器。
可以把它看作是一个更复杂的console.log() 语句，在不编辑代码本身的情况下很容易添加和删除。它用一个红色的菱形图标来表示，以代替红色的圆圈。
通过右击沟槽并选择添加日志点来设置一个日志点。这就会出现一个输入字段，你可以将文本记录到控制台。如果你想记录一个表达式或一个变量的值，把它放在大括号里。
检查数值
让我们更深入地看看你如何在程序运行时检查它的值。编辑器关注的主要方面是VARIABLES和WATCH窗格。
VARIABLES窗格
VARIABLES窗格是你可以检查在断点处被评估的变量和表达式的值的地方。如果你通过右击列出的任何数值来打开上下文菜单，你可以对该变量执行一些操作。
- 设置值让你修改变量的值，以便在代码执行时测试某些值
- 复制值将一个变量的值复制到剪贴板上
- 复制为表达式 复制一个表达式来访问该变量
- 添加到观察中，将变量添加到WATCH窗格中进行监控。
观察窗格
WATCH窗格的主要好处是，当代码暂停时，你可以很容易地将你想监视的值带入视图。
每次你想检查它的值时，不必在VARIABLES窗格中挖掘一个深度嵌套的属性，你可以把它添加到WATCH窗格中，以方便访问。当一次确定几个变量的值时，这是最有用的，因为它们会在执行中自动重新计算。
追踪代码执行的路径
编辑器顶部的调试工具栏提供了几个命令来有效地在调试器中导航。当你试图找到程序到达某一行或某一个函数的路径时，这些功能被证明是非常宝贵的。
继续 (F8)
当程序停止在一个断点上时，你可以使用这个按钮来恢复代码的执行，直到下一个断点，如果有的话。
跨越 (F10)
该命令执行当前高亮显示的行，并在下一行执行前暂停。你可以运行该命令来向下移动一个函数，并在此过程中充分了解它的执行情况。
如果你在调用函数的行上使用这个命令，它会执行整个函数，并在函数调用下面的行上停顿。
步入 (F11)
Step Into命令的工作原理与Step Over相同，只是当它碰到一个函数调用时，它会进入被调用的函数并在第一行暂停。这是一种有用的方法，可以在代码库中从一个地方移动到另一个地方，而不跳过任何细节。
步出 (Shift+F11)
该命令继续执行并在当前函数的最后一行暂停。如果你不小心进入了一个与你试图解决的问题无关的函数，就可以使用这个命令。
这个命令可以帮助你脱离那个函数，迅速回到相关的位。
重新启动 (Ctrl+Shift+F5)
使用这个命令来重置调试器，而不是杀死并重新启动它。
停止 (Shift+F5)
当你完成一个程序的调试后，使用这个命令退出调试会话。如果你附加到一个外部Node.js进程，会出现一个图标来代替断开与该进程的连接。
用源码图调试TypeScript
许多Node.js项目现在是用TypeScript编写的，它也可以用Visual Studio Code进行调试。
要开始，在你的tsconfig.json 文件中启用sourceMap 。
{
"compilerOptions": {
"sourceMap": true
}
}
一旦启用，附加到正在运行的进程，并在你的TypeScript文件中设置断点。Visual Studio Code会搜索整个项目的源代码地图，不包括node_modules 文件夹。
你可以在你的启动配置文件中使用outFiles 属性来指定Visual Studio Code必须寻找源图的确切位置；这应该是JavaScript输出的位置。
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch TypeScript",
"skipFiles": [
"<node_internals>/**"
],
"preLaunchTask": "compile",
"program": "${workspaceFolder}/src/server.ts",
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
}
]
}
如果你使用ts-node ，在没有构建步骤的情况下运行你的项目，这个过程会更简单。不要使用上面的launch.json 配置，而是使用下面的配置。
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Server",
"skipFiles": [
"<node_internals>/**"
],
"runtimeArgs": [
"-r",
"ts-node/register"
],
"args": [
"${workspaceFolder}/src/server.ts"
]
}
]
}
没有program 属性，所以runtimeArgs 将ts-node 注册为TypeScript文件的处理程序，而args 的第一个参数是程序的入口文件。一旦设置好了，你就可以开始调试会话了!
总结
在本教程中，我们已经解决了在Visual Studio Code中调试Node.js项目的许多重要方面。关于调试器提供的所有功能的更多信息，请参考在线文档。
谢谢你的阅读，祝你调试愉快!
The postHow to debug Node.js apps in Visual Studio Codeappeared first onLogRocket Blog.
