在开发 TypeScript 项目时，调试代码是必不可少的环节。一般来说，我们可以使用浏览器的开发者工具进行调试，或者使用 Node.js 的调试工具。但如果你正在使用 VS Code 编辑器，它提供了内置的断点调试功能，可以让你更方便地调试 TypeScript 代码。本文将会为大家详细介绍如何使用 VS Code 进行断点调试，以及一些调试技巧。
1. 配置 launch.json
在 VS Code 中开启断点调试前，我们需要配置 launch.json 文件，该配置文件用于指定我们要调试的程序的运行参数和调试参数。 在项目根目录下创建 launch.json 文件，并在其中添加以下配置：
-- -------------------- ---- -------
-
---------- --------
----------------- -
-
------- -------
------- -------
---------- ---------
------- --------------------------------
-------------- ------------ ----- --------------------
------ ---------------------
----------- ------------
------------- ----
-
-
-我们可以看到，这里我们指定了调试的类型是 “node” ，并设置了一些配置选项：
- name：启动程序名字。
- type：指定是哪种程序。
- request：指定哪种调试方式。
- args：入口文件路径。
- runtimeArgs：运行时参数，比如我们这里使用了
ts-node。 - cwd：指定工作目录。
- protocol：调试协议，一般用 inspector 。
- sourceMaps：开启源代码映射。
2. 设置断点
第二步是在代码中设置断点。在你需要进行调试的代码行上，点击鼠标左键或者按 F9 键进行断点设置。设置成功后，会在代码行左侧出现一个红色圆圈，表示断点已经生效。
3. 启动调试
对代码进行了断点设置之后，我们需要执行调试才能生效。我们可以使用调试菜单或者快捷键启动调试。 可以使用 F5 快捷键，或者使用 VS Code 菜单中的调试 -> 启动调试 进行调试出来。
4. 进行调试
断点设置和调试启动成功后，我们可以使用调试控制台来查看程序的运行状态。在控制台界面中，我们可以看到程序已经停在了我们设置的断点处。此时，我们可以选中某一个变量，查看它的值，或者使用调试控制栏中的工具进行单步调试、跳过函数等操作。在调试过程中，我们可以随时取消断点，或者添加新的断点进行调试。
以下是一个示例代码，展示了在 TypeScript 中使用断点调试的过程：
function add(num1: number, num2: number): number {
const result = num1 + num2;
return result;
}
const result = add(10, 20);
console.log(result);我们在代码的第 2 行处设置一个断点，即第一行函数调用的位置。然后启动调试，可以看到程序停在了设置的位置。此时，我们可以使用调试控件面板，逐步调试程序。通过调试面板左侧的变量窗口，可以查看变量的值。在本例中，我们可以查看 result 变量的值是否正确。
5. 小技巧分享
跳过某行代码
有时，在程序的某一行会造成调试的问题或捕获异常，我们可能希望跳过这些代码。在 VS Code 中，你可以通过右键单击代码行，然后选择“跳过该行”命令来跳过该行代码。
在调试过程中修改代码
在调试过程中，你可以随时修改代码，并且不需要重新启动调试。如果你在调试面板中继续按 F5 键，那么修改过的代码会被重新编译，并且会启动一个新的进程。
在 VS Code 中设置多个配置
在上面的 launch.json 示例中，我们只为一个程序配置了调试参数。但是，在实际开发中，我们通常需要为一个项目设置多个不同的调试配置，以满足不同的调试需求。我们只需要在 launch.json 文件中添加多个配置即可。比如下面这个例子中，我们配置了两个不同的调试配置：
-- -------------------- ---- -------
-
----------------- -
-
------- -------
------- -------
---------- ---------
------- -----------------------------------
------ ---------------------
-------------- ------ --------------------
----------- ------------
------------- ----
--
-
------- -------
------- -------
---------- ---------
------- ------------------------------------------
------ ---------------------
-------------- ------ --------------------
----------- ------------
------------- ----
-
-
-结论
在本文中，我们详细介绍了如何使用 VS Code 中的断点调试功能来调试 TypeScript 代码。通过掌握这些技巧，我们可以更快地调试代码，并且解决问题。这些技巧可以大幅提高开发的效率，并且帮助我们更好地理解代码的工作原理。如果你使用 TypeScript 开发，我相信这些技巧会对你非常有用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7e896c5c563ced5b20376