在前端开发中，TypeScript 已经成为了一种非常流行的语言。它提供了更好的类型检查和代码提示，有助于避免一些常见的错误。但是，当我们开发 TypeScript 程序时，有时候会遇到一些难以调试的问题。在这篇文章中，我们将介绍如何在 VS Code 中调试 TypeScript 程序，以方便我们快速定位和解决问题。
准备工作
在使用 VS Code 调试 TypeScript 程序之前，我们需要做一些准备工作。
- 安装 Node.js 和 TypeScript
在开始之前，我们需要安装 Node.js 和 TypeScript。如果你还没有安装，可以从官网下载并安装。
- 安装 VS Code 插件
我们需要在 VS Code 中安装 Debugger for Chrome 插件。可以在 VS Code 的扩展商店中搜索并安装。
配置 VS Code
在开始调试之前，我们需要在 VS Code 中进行一些配置。
- 创建 launch.json 文件
在 VS Code 中，按下 F5 键，选择 Node.js 环境，然后在弹出的 launch.json 文件中添加以下配置：
-- -------------------- ---- -------
-
---------- --------
----------------- -
-
------- ------ --------
------- ---------
---------- ---------
------ ------------------------
---------- ---------------------
------------- -----
------------------------- -
--------------- --------------
-
-
-
-- 配置 TypeScript
在 tsconfig.json 文件中，添加以下配置：
{
"compilerOptions": {
"sourceMap": true,
"inlineSources": true,
"inlineSourceMap": true
}
}开始调试
现在，我们已经准备好了调试 TypeScript 程序的工作。接下来，我们将演示如何在 VS Code 中调试一个简单的 TypeScript 程序。
- 创建一个 TypeScript 文件
在 VS Code 中，创建一个名为 app.ts 的 TypeScript 文件，并添加以下代码：
function add(a: number, b: number) {
return a + b;
}
console.log(add(1, 2));- 编译 TypeScript 文件
在终端中，使用以下命令编译 TypeScript 文件：
tsc app.ts
这将生成一个名为 app.js 的 JavaScript 文件。
- 启动本地服务器
在终端中，使用以下命令启动本地服务器：
http-server
这将启动一个本地服务器，监听在端口号为 3000 的地址上。
- 开始调试
在 VS Code 中，按下 F5 键，选择 Debug Chrome，并点击“启动调试”按钮。这将启动 Chrome 浏览器，并打开网页。在网页中，打开开发者工具，并在控制台中查看输出：
3
这表明我们的调试已经成功了。现在，我们可以在 VS Code 中设置断点，并单步调试代码了。
总结
在这篇文章中，我们介绍了如何在 VS Code 中调试 TypeScript 程序。通过配置 launch.json 和 TypeScript，我们可以方便地进行调试，快速定位和解决问题。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658cdb1deb4cecbf2d2aafd0