共计 2158 个字符，预计需要花费 6 分钟才能阅读完成。
前言
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": ["<node_internals>/**"],
"program": "${workspaceFolder}/app.js"
}
]}
复制代码
这里须要留神的是，对于不同类型的调试器，launch 配置中的属性可能都是各不相同的。能够应用 VS Code 内置的智能提醒（IntelliSense）性能去查看有哪些属性可用，hover 属性就能够看到帮忙信息。
不要想当然地认为某个调试器中存在的属性放到其余的调试器下中也能起作用。调试前要确保所有配置都是有意义的。
launch 和 attach
在 VS Code 中，有两种外围的调试模式，Launch 和 Attach，他们为开发者提供两种不同类型的工作流。
最简略的形式来了解这两种工作流：
launch 配置能够了解为 VS Code 启动调试程序的说明书；
attach 配置则是如何将 VS Code 的调试器连贯到已运行的应用程序或过程的办法；
VS Code 的调试反对用调试模式启动一个程序，或者用调试模式附加到一个曾经在运行中的程序。应用哪种调试配置，取决于咱们的调试需要。