前端编程很有趣，开发人员有能力创建他们想要的任何东西，任何效果。不幸的是，当遇到bug时，这种乐趣就会消失。JavaScript开发人员可能首先想到的是alert、console.log语句。添加console.log()是可视化代码状态的一种快速方法。
然而，在开发更复杂的程序时，将所有内容都记录到终端可能会令人沮丧。Visual Studio 代码（VS从这里开始的代码）具有内置特性，允许更容易地调试和变量监视。
让我们看看如何改进调试体验!
准备条件
需要安装软件:
Visual Studio代码v1.50或更高版本Node.js 8.0或以上
在本文中，将使用一个简单的 Node.js 脚本，它执行一些用于调试的基本计算。脚本如下：
/** * 两个数的相加 * @param {number} num1 * @param {nunber} num2 * @return {number} 两个数的相加 */ const sum = (num1, num2) => { const add = num1 + num2; return add; }; /** * 自定义数字打印 * @param {number} num */ print = function(num) { console.log(`迭代后，总数等于： ${num}`); }; const iterations = 5; let total = 0; console.log(process.env.NODE_ENV); for (let index = 1; index <= iterations; index++) { console.log(`Round: ${index}`); const random = Math.random(); const result = sum(index, random); total += result; } print(total);
Debug Launcher配置
要开始调试，通常首先创建一个简单的调试配置，该配置包含一个JSON对象。一个非常简单的 Node.js 应用程序也可以在不进行任何配置的情况下进行调试，因为 VS Code 知道正在处理 Node.js 代码。首先，单击带有bug的图标并在活动栏中圈出。这将显示DEBUG窗格。确保将环境设置为 Node.js，并在 Visual Studio 代码中打开项目。
在窗格的顶部，单击下拉菜单并选择Add Configuration。这可以添加一个新的配置，并将打开一个名为launch的新文件。存储所有调试配置的json。该文件存储在项目文件夹中由VS代码创建的.vscode文件夹中。
如下图所示，创建了一个调试配置进行试验。这个特定的配置名为Debug JS。可以给它取任何你喜欢的名字。如果需要创建几个不同的调试配置来测试项目的不同设置，那么命名功能尤其有用。
配置代码如下：
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Debug Js", "program": "${workspaceFolder}/debug/app.js", "env":{ "NODE_ENV":"development" }} } ] }
program属性定义调试时需要启动的文件的路径。在启动调试器时，${workspaceFolder}变量被替换为工作区路径。在一个名为/debug的文件夹中设置了app.js文件的路径。
最后，设置一个环境变量来配置 Node.js 应用程序。JSON调试配置的env部分设置环境变量，如NODE_ENV。这可以用来更改行为，比如日志的冗长。最后，不要忘记保存launch.json配置。
其他有用的配置项包括：
cwd：在这个目录中启动要调试的程序。args：传递给运行时可执行文件的可选参数数组。例如，希望传递目录路径:"args":["--dir"， "./libs"]。envFile：包含环境变量定义的文件的可选路径。
现在已经定义好了调试配置，选择创建的名称并单击play箭头开始调试。应用程序将以调试模式启动、执行和结束。并显示输出。
添加断点
普通断点
通过单击行号左边的边距设置断点。将添加一个红点，表示调试器将在此特定行号处停止程序的执行。现在在第30行添加一个断点，以检查 total 变量的值。
示例代码循环 5 次计算一个数字。这个数字与total变量进行相加中，在程序结束时打印出来。现在我们通过启动调试器来检查代码，看看代码的行为是否符合预期。
点击屏幕顶部debug工具栏中的play图标，继续执行代码，直到遇到新的断点为止。在每一轮之后，total的值都会发生变化。
Logpoint
logpoint显示一条类似console.log()的消息，它不会停止执行。该消息可以包含文本或在花括号分隔符{…}中引用的变量。在本例中，对{num}的引用被num变量的当前值替换。
要添加新的日志点，右键单击断点选择add logpoint...。
然后输入一些适当的文本。
conditional断点
表达式断点只允许在满足特定条件时进行日志记录。假设只在num值大于或等于17时才进行日志记录。否则，代码不会崩溃。
要添加一个表达式断点，右键单击断点选择conditional，然后输入一个相关的表达式。
执行后，只有当num的值大于等于17才会执行到断点。
Hit Count 计算断点
在添加conditional断点基础上，选择Hit Count即可添加命中计数断点。这种类型的断点只用于在特定函数或代码块被命中一定次数后才开始日志记录。以循环为例，只在特定代码行被命中三次时暂停代码。
运行调试配置，当第三次点击代码行时，它会暂停。
总结
很明显，Visual Studio Code 在帮助开发人员调试应用程序方面做得很好。为设置断点提供了很多可能性，例如命中计数或表达式断点。与使用console.log()语句相比，这绝对是一个很大的改进，因此也提高了开发效率，并且可以更好地重现发生的错误。一般来说，使用调试器可以使用表达式、观察者或日志点，从而提供更好的体验。
使用调试配置，可以轻松地在项目的不同设置之间切换。
