如何在 VS Code 中调试 TypeScript 程序

在前端开发中，TypeScript 已经成为了一种非常流行的语言。它提供了更好的类型检查和代码提示，有助于避免一些常见的错误。但是，当我们开发 TypeScript 程序时，有时候会遇到一些难以调试的问题。在这篇文章中，我们将介绍如何在 VS Code 中调试 TypeScript 程序，以方便我们快速定位和解决问题。

准备工作

在使用 VS Code 调试 TypeScript 程序之前，我们需要做一些准备工作。

1. 安装 Node.js 和 TypeScript

在开始之前，我们需要安装 Node.js 和 TypeScript。如果你还没有安装，可以从官网下载并安装。

1. 安装 VS Code 插件

我们需要在 VS Code 中安装 Debugger for Chrome 插件。可以在 VS Code 的扩展商店中搜索并安装。

配置 VS Code

在开始调试之前，我们需要在 VS Code 中进行一些配置。

1. 创建 launch.json 文件

在 VS Code 中，按下 F5 键，选择 Node.js 环境，然后在弹出的 launch.json 文件中添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*"
      }
    }
  ]
}

1. 配置 TypeScript

在 tsconfig.json 文件中，添加以下配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,
    "inlineSourceMap": true
  }
}

开始调试

现在，我们已经准备好了调试 TypeScript 程序的工作。接下来，我们将演示如何在 VS Code 中调试一个简单的 TypeScript 程序。

1. 创建一个 TypeScript 文件

在 VS Code 中，创建一个名为 app.ts 的 TypeScript 文件，并添加以下代码：

function add(a: number, b: number) {
  return a + b;
}

console.log(add(1, 2));

1. 编译 TypeScript 文件

在终端中，使用以下命令编译 TypeScript 文件：

tsc app.ts

这将生成一个名为 app.js 的 JavaScript 文件。

1. 启动本地服务器

在终端中，使用以下命令启动本地服务器：

http-server

这将启动一个本地服务器，监听在端口号为 3000 的地址上。

1. 开始调试

在 VS Code 中，按下 F5 键，选择 Debug Chrome，并点击“启动调试”按钮。这将启动 Chrome 浏览器，并打开网页。在网页中，打开开发者工具，并在控制台中查看输出：

3

这表明我们的调试已经成功了。现在，我们可以在 VS Code 中设置断点，并单步调试代码了。

总结

在这篇文章中，我们介绍了如何在 VS Code 中调试 TypeScript 程序。通过配置 launch.json 和 TypeScript，我们可以方便地进行调试，快速定位和解决问题。希望本文能对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658cdb1deb4cecbf2d2aafd0