2022年了，该学会用VSCode debug了

前言
VSCode作为目前使用人数最多的IDE，在前端开发者中也是十分受欢迎的。它免费、开源、还具备许多强大的功能，例如智能提示、插件商店、集成Git等等，但除此之外还有一个被许多开发者忽略的功能——运行和调试（Run and Debug）。
你可能会说，要什么Debug，我console.log一把梭走天下。没错，这也是目前很多人在使用的调试方法。但是既然VS Code具备这样的功能，试一试，或许会有新的收获呢~
简介
VS Code的关键特性之一就是它具有强大的调试（debug）功能，内置的调试器（debugger）可以帮助开发者快速的编辑、编译和调试。
VS Code内置的调试器支持Node.js运行时，并且能够调试JavaScript、TypeScript、以及任意其他能够编译成JavaScript的语言。
如果想要调试其他的语言和运行时，包括但不限于PHP、Ruby、Go、C#等等，可以在扩展商店中寻找相关的Debugger扩展并且安装它，这里我们就不过多的叙述了。
简单调试
为了方便我们理解常用功能，直接进行调试来学习相关功能更容易上手。这里我们用一个简单的Node.js项目作为例子进行调试。
首先准备一个app.js:
let msg = 'Hello world';
console.log(msg);
let numA = 6;
let numB = 13;
let num = numA + numB;
console.log(num);
复制代码
这样我们就有一个简单的Node.js程序了。
接下来我们点击左侧菜单中的运行与调试图标（图标是一个虫子+开始，顾名思义debug&run），这里就是初始化的面板；然后我们在代码中需要打断点的地方加上断点：

直接点击运行和调试：

程序跑起来了，并在断点处也停下来了。调试面板也被激活，显示了变量、监控、调用堆栈、断点的面板。点击上方调试操作栏的第一个图标（继续，快捷键是F5），程序会走到下一个断点，并且变量面板中的msg变量会进行更新：

继续点继续，直到跳出最后一个断点，我们的调试步骤就结束了。这就是一个最简单的Node.js程序的调试过程。
当然我们实际开发中肯定不会有这么简单的程序，所以接下来我们来详细介绍下调试中的相关功能。
功能介绍

虽然上面的例子是Node.js项目，但是对于其他的调试器，大部分的概念和特性也都是通用的。

运行面板和菜单
在上面的例子里我们已经看到过运行面板了。点击左侧的“运行和调试”图标即可打开面板。运行面板显示了所有关于运行和调试的相关信息。
如果还没有配置launch.json，那么VS Code就会显示初始状态的面板。例子中我们就没有进行配置，所以显示就是初始状态：

除了左侧的图标，也可以使用顶部的顶级菜单 运行（Run)。这里的命令基本和面板中的一致：

想不起快捷键的时候也可以在这里看看~
启动配置
上面的例子中我们选择了“运行和调试”，VS Code直接使用了内置的Node.js调试配置启动了调试步骤。
然而大部分场景中，我们不会有这么简单的调试。此时创建一个自定义的launch配置文件就十分有必要了，我们可以在配置文件中保存一些调试的细节。
VS Code把调试配置信息保存在.vscode目录下的launch.json文件中（.vscode目录一般存在于项目的根目录下）。
要创建一个launch.json文件，在运行初始化面板中点击“创建一个launch.json”：

VS Code会去尝试自动检测当前调试环境。如果它失败了，我们就需要自己手动选择：

选择Node.js后，VS Code会自动生成配置文件以及.vscode目录。这里是Node.js默认的launch.json:
{

// 使用 IntelliSense 了解相关属性。 
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "type": "pwa-node",
        "request": "launch",
        "name": "Launch Program",
        "skipFiles": [
            "/**"
        ],
        "program": "${workspaceFolder}/app.js"
    }
]

}
复制代码
这里需要注意的是，对于不同类型的调试器，launch配置中的属性可能都是各不相同的。可以使用VS Code内置的智能提示（IntelliSense）功能去查看有哪些属性可用，hover属性就可以看到帮助信息。

不要想当然地认为某个调试器中存在的属性放到其他的调试器下中也能起作用。调试前要确保所有配置都是有意义的。

launch和attach
在VS Code中，有两种核心的调试模式，Launch和Attach，他们为开发者提供两种不同类型的工作流。
最简单的方式来理解这两种工作流：

launch配置可以理解为VS Code启动调试程序的说明书；
attach配置则是如何将VS Code的调试器连接到已运行的应用程序或进程的方法；

VS Code的调试支持用调试模式启动一个程序，或者用调试模式附加到一个已经在运行中的程序。使用哪种调试配置，取决于我们的调试需求。