vscode typescript断点调试

原创

mob64ca12e60047 2023-08-25 16:12:38 ©著作权

文章标签 Code 断点调试 json 文章分类 TypeScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e60047的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用VS Code进行TypeScript断点调试

概述

在软件开发过程中，调试是非常重要的一环。VS Code是一款功能强大的开发工具，支持对TypeScript进行断点调试。本文将介绍如何在VS Code中使用断点调试功能来调试TypeScript代码。

步骤概览

下面的表格展示了实现“VS Code TypeScript断点调试”的步骤概览：

步骤	描述
步骤一	安装Node.js和VS Code
步骤二	创建TypeScript项目
步骤三	配置launch.json文件
步骤四	设置断点
步骤五	运行并调试代码

接下来，我们将逐步详细介绍每个步骤的具体操作。

步骤一：安装Node.js和VS Code

在开始使用VS Code进行TypeScript断点调试之前，你需要先安装Node.js和VS Code。Node.js用于运行TypeScript代码，而VS Code是我们的开发工具。

安装Node.js：访问Node.js官方网站[
安装VS Code：访问VS Code官方网站[

步骤二：创建TypeScript项目

在开始调试之前，我们需要先创建一个TypeScript项目。

打开VS Code，并按下Ctrl + Shift + P（或者点击右上角的“查看” -> “命令面板”），输入“终端：新建终端”并选择它，这将在VS Code中打开一个终端。
在终端中，输入以下命令来创建一个新的TypeScript项目：
```
npx tsc --init
```
这将在当前目录下创建一个名为tsconfig.json的配置文件。

创建一个名为app.ts的TypeScript文件，并在其中编写一些代码：

function greet(name: string) {
  console.log("Hello, " + name + "!");
}

greet("Alice");
greet("Bob");

步骤三：配置launch.json文件

在VS Code中，我们需要配置launch.json文件来告诉调试器如何运行我们的TypeScript代码。

打开VS Code的侧边栏，并点击左侧的调试按钮（一个小虫子的图标）打开调试视图。
点击调试视图左上方的齿轮按钮，选择“启动配置” -> “添加配置”。
选择“Node.js”作为启动配置。

打开生成的launch.json文件，将其内容修改为如下所示：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.ts",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ]
    }
  ]
}

上述配置指定了要调试的程序入口文件为app.ts，将编译后的JavaScript文件输出到与TypeScript文件相同的目录。