vscode TypeScript断点调试ts

原创

mob64ca12e676c8 2023-12-26 06:21:09 ©著作权

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

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

如何在VS Code中使用TypeScript进行断点调试

流程图：

flowchart TD
    A[安装Node.js] --> B[安装VS Code]
    B --> C[创建项目]
    C --> D[安装TypeScript插件]
    D --> E[创建tsconfig.json文件]
    E --> F[编写TypeScript代码]
    F --> G[设置断点]
    G --> H[调试配置]
    H --> I[启动调试]
    I --> J[调试代码]

步骤说明：

安装Node.js：在开始使用VS Code进行TypeScript断点调试之前，需要先安装Node.js。可以从官方网站（
安装VS Code：同样需要先安装VS Code，可以从官方网站（
创建项目：在本地任意位置创建一个新的文件夹作为项目的根目录。
安装TypeScript插件：在VS Code的扩展商店中搜索并安装"TypeScript"插件，安装完成后重新启动VS Code。
创建tsconfig.json文件：在项目根目录下创建一个名为"tsconfig.json"的文件。该文件用于配置TypeScript编译器的选项。
```
{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "dist"
  },
  "include": [
    "src/**/*.ts"
  ]
}
```
这段代码指定了编译目标为ES6，模块化系统为commonjs，并将编译后的文件输出到"dist"目录中。
编写TypeScript代码：在项目根目录下创建一个名为"src"的文件夹，并在该文件夹中创建一个名为"index.ts"的文件。这个文件将是我们要调试的入口文件。
```
function add(a: number, b: number): number {
  return a + b;
}

const result = add(2, 3);
console.log(result);
```
这段代码定义了一个名为"add"的函数，接受两个参数并返回它们的和。然后调用了这个函数并将结果打印到控制台。
设置断点：在"index.ts"文件中选择一个你希望设置断点的行，并在左侧的编辑器区域单击鼠标右键，选择"Toggle Breakpoint"来设置断点。
调试配置：在VS Code的菜单栏中选择"调试" -> "添加配置" -> "Node.js"，然后在生成的"launch.json"文件中进行如下配置：
```
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "program": "${workspaceFolder}/dist/index.js",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ]
    }
  ]
}
```
这段代码指定了调试器的配置选项，包括调试器的类型为Node.js、调试请求为启动、调试配置名称为"Debug TypeScript"、要调试的程序为编译后的"index.js"文件、编译任务为"tsc: build - tsconfig.json"、编译后的文件路径为"dist"目录下的所有".js"文件。
启动调试：在VS Code的菜单栏中选择"调试" -> "开始调试"，或者按下F5键来启动调试。
调试代码：在调试器中执行你的代码。当程序执行到设置的断点处时，调试器会暂停执行，并允许你查看变量的值、执行表达式等。