新人求关注?，博主天天日更，全年无休，您的关注是我的更新的功力～ 感谢

你是否曾经在调试 TypeScript 代码时遇到过困难，或者想知道如何更快地完成它？由于 TypeScript 的转译过程，调试更加复杂，但我们可以通过 VS Code 的内置调试支持实现对 TypeScript 的 debugger 。

本文将为您提供实用的分步指南，介绍如何配置 IDE 以轻松调试 TypeScript 工作。

我们需要先设置一些配置才能使用 VS Code 调试 TypeScript 程序。我们将逐步回顾这个过程：

初始化配置

首先，您需要生成 TypeScript 配置文件（ tsconfig.json ）并在其中设置一些配置。

tsconfig.json文件显示了生成它的目录，即 TypeScript 项目的根目录，它指定了根文件和用于编译代码的编译器选项。它帮助编译器生成 JavaScript 文件。

要生成此配置文件，请运行以下命令：

我们可以使用 VS Code 终端在项目目录中快速运行此命令，如下所示：

完成上述操作之后，我们会生成 tsconfig.json 文件，这个文件内包含我们很多配置，非常重要。

配置输出目录

接下来，我们可以通过取消注释 tsconfig.json 文件中的"outDir"规则并指定我们希望该文件夹具有的名称来设置输出文件夹名称来保存已转译的 JavaScript，例如：

在这里，将文件夹的名称设置为 output 。

指定源文件目录

另外，我们还可以取消 "rootDir" 规则并让它指向源文件所在的当前目录。

按照惯例，我们通常将源文件放在单独的文件夹中。因此，在当前目录中创建一个 src 文件夹或使用您想要调用此文件夹的任何其他名称。该文件夹是我们的源文件所在的位置；这是规则：

在这里，我们确保我们的源文件位于名为src的文件夹中。

配置 sourceMap

我们还可以通过将sourceMap规则设置为 “true”。此特定规则指定 TypeScript 代码的每一行如何映射到生成的 JavaScript 代码。以下是可以执行此操作的方法：

使用此规则集，在outDir规则中设置的文件夹，我们将看到一个.js.map文件，这是源映射。这将使调试器能够看到原始的 TypeScript 代码，而不是转译的 JavaScript 代码。它将使您能够配置和保存项目的调试设置详细信息。下面是.js.map文件的外观：

使用launch.json文件

我们需要一个launch.json文件来设置更高级的配置，使我们能够启动和调试我们的程序。

我们可以通过单击上面描述的 “Run and Debug” 图标来创建此文件。然后点击 “create a launch.json file”按钮并从下拉列表中选择“node.js”，如下所示：

这会在项目文件夹中创建一个新文件launch.json ，其中包含一些告诉 VS Code 如何调试应用程序的配置。

当您打开生成的launch.json文件时，请注意程序规则的目标如下：

如果我们只使用一个源文件（ index.ts ），那么这一规则是没问题的，

但如果我们的程序需要更多源文件，那么我们就必须调整它。我们必须将程序设置为指向我们已转译的目标文件夹，该文件夹的扩展名为.js 。

我们将此文件夹命名为“output”。请参阅下文，了解如何调整它：

在这里，我们将其设置为输出文件夹。

如何开始调试 TypeScript

要开始调试，请在src文件夹中创建一个index.ts文件。 index.ts文件是我们编写 TypeScript 代码的地方。

再运行命令： tsc ，不带任何选项。我们将看到已生成一个output文件夹，因为我们将“output”指定为要在其中保存转译代码的文件夹的名称。

现在让我们编写一个函数的基本 TypeScript 代码，该函数将两个数字相加并将这些数字的结果记录到index.ts文件中的控制台，以了解如何开始调试：

现在使用 tsc 命令运行代码。在此文件中，让我们设置一个断点，该断点将在我们放置的特定行处停止代码的执行。

从现在开始，我们可以逐行执行代码。您将在每行的行编号之前看到在哪里设置断点，它是一个红点。

如果将鼠标悬停在这个红点上，我们将看到“单击添加断点”的信息；当我们单击它时，就为该行设置了断点。通过这个断点，我们可以逐行检查代码以查看它们是否有任何问题。

让我们在代码的第二行设置一个断点。要开始调试，请单击“调试面板”，然后单击顶部带有播放图标的“启动程序”按钮或按f5 。

这里我们看到我们的程序开始执行，并在断点行停止执行，如下所示：

进行调试会话

如果我们在启动该程序时仔细观察，会发现顶部出现了几个工具。这些工具帮助我们根据断点执行我们想要的代码，这形成了调试选项。它们使我们能够在代码中指定要执行的内容和不执行的内容。

让我们看看这些工具：

• Continue：继续当前行的执行过程
• Step over：这有助于我们执行以下行。
• Step into：这用于单步执行一个函数，当你的程序有很多函数时会很有帮助。
• Step out：这用于跳出函数。
• Restart：这将重新启动执行过程。
• Stop: 停止执行。
• Discontinue：这与停止类似，因为它终止任何执行。

当我们随后看一个实际例子时，我们就会了解这些工具的实用性。

代码实例调试

我们已经看到了如何在 TypeScript 程序上使用 VS Code 调试面板的基本示例；现在，我们将看一个更实际的示例，以及如何移动代码行并按照调试步骤执行它们。

有了上面的 TypeScript 代码，让我们进入调试过程：

1. 首先，我们必须使用 tsc 命令转译我们的代码
2. 在我们想要停止执行的地方设置断点，以便我们可以开始调试。
3. 我们在第一行设置断点，然后单击调试面板并启动程序进行调试。

请注意，执行停在第五行；这是因为从第一行到第四行没有实现，因为它们基本上是声明。见下图：

因此，请确保在执行时设置断点；如果没有，它将跳到执行的下一行。现在，我们可以开始使用调试工具了。从第五行开始，单击“step over”或按 f10 。您将看到执行在下一行停止，从而执行该步骤之前的行，如下所示：

这里，调试控制台上没有显示任何内容，因为尚未实例化任何对象。

如果我们继续单步执行，您将看到它将跳转函数（方法）并转到实例化行（ school.students('Mathematics'); ），从而执行它之前的行。但调试控制台上仍然没有显示任何内容，因为我们只是将参数传递给 MySchool 类。

再次，我们跳过下面的行，并在该行停止执行，并且上一行的输出显示在调试控制台上，显示如下所示：

当我们调试走到最后时，我们会看到调试控制台上显示的所有输出，如下所示：

我们还可以检查变量、设置监视和调用堆栈。这是我们继续调试和观察是否获得正确输出的方法。

设置自动编译 Typescript

每当我们对 TypeScript 代码进行更改时，都必须使用 tsc命令进行转译，然后才能开始调试过程；这种方式可能会让人筋疲力尽，尤其是当我们有很多文件时。

我们可以通过设置一个自动监视进程来为您在后台进行编译代码，从而避免这种繁琐的操作。

首先，在项目中本地安装 TypeScript 的依赖：

安装完成后，您将看到安装了 TypeScript 的名为devDependencies的依赖项部分，如下所示：

现在按f1并搜索Tasks: Configure Default Build Task ，

然后选择 tsc: watch - tsconfig.json。

这将创建一个名为tasks.json的全新文件，如下所示：

最后，按 f1 并选择 Tasks: Run Build Task；这会创建一个新的代码实例来监视它。

小结

在 VS Code 中调试 TypeScript 非常棒，因为当我们的程序出现问题时，我们可以逐行查看代码以了解实际发生的情况。

如果您有疑问或者其他问题，欢迎留言评论，大家一起探讨，一起进步～ 欢迎点赞、关注?、转发～

求关注～ 求关注～ 求关注～