2022年了，该学会用VSCode debug了

科技新语

发布于 2022-05-07 16:53:38

7310

发布于 2022-05-07 16:53:38

文章被收录于专栏：用户9378866的专栏

前言

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属性就可以看到帮助信息。