VSCode 调试 ts 指南

作者: b710c1e7a319 | 来源:发表于2019-07-06 16:20 被阅读151次

Typescript 越来越流行了,它弥补了 js 弱类型缺陷,更适用于大型项目。而 VSCode 内建就支持调试 ts,可以让开发效率进一步提高。

本文给大家介绍,如何用 VSCode 调试 ts。

准备 ts 演示代码

我们以 ts-debug
这个 demo 项目为例,介绍如何用 VSCode 调试 ts。

首先需要明确,纯粹的 ts 源码既不能运行,更不能直接拿来调试。当我们要调试 ts 源码时,就必须要生成对应的 js 和 sourcemap。

用 ts-node 可以直接运行 ts 代码,但这里暂不讨论

我们先在文件夹下建一个简单的 0 到 100 求和的 ts 程序:

// index.ts

let sum: number = 0;

for (let i = 1; i <= 100; i++) {
  sum += i;
}

console.log('Sum is %s', sum);

并编写相应的 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true
  },
  "include": ["."]
}

必须要在 tsconfig 中配置 sourceMap: true ,ts 编译才会生成 index.ts 的 sourcemap。VSCode 调试时,会读取这个文件。

配置调试参数

VSCode 的调试参数都放在项目同级的 .vscode/launch.json 文件中。这次,我们修改一下 launch.json 文件,配置 ts 的调试参数。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

如果你还不太清楚 VSCode 调试参数是什么,可以先阅读:VSCode 调试 Node.js 指南

有几个参数比较重要:

  • program:待调试程序的入口文件。${workspaceFolder} 指当前项目项目目录。
  • preLaunchTask:预执行的任务。这里的命令会在调试之前执行——调试开始前,先编译 ts。
  • outFiles: 编译后的 js 文件路径。我们给 program 指定的是 ts 文件路径,那 VSCode 怎么知道编译后的 js 去哪里了,要执行哪个 js 文件?答案就是,VSCode 会在 outFiles 中寻找匹配。

启动调试

index.tstsconfig.json.vscode/launch.json 文件都配置妥当后,我们在 ts 文件的第四行打个断点,然后点击调试开始按钮,就直接进入 VSCode 调试界面了。

可以看到,VSCode 停在了第四行断点处,表明调试 ts 成功了。

启动调试

原理小结

启动调试时,VSCode 首先执行 preLaunchTask,将 ts 编译成 js 和 sourcemap,然后根据 programoutFiles 参数,找到编译后的待调试 js 文件执行。至于 ts 和 js 的断点信息,则是根据 sourcemap 相互定位的。

相关文章

  • VSCode 调试 ts 指南

    Typescript 越来越流行了,它弥补了 js 弱类型缺陷,更适用于大型项目。而 VSCode 内建就支持调试...

  • 调试 vite+vue+ts

    调试 debug vite+vue+ts 以调试 vue3-demos 为例: vscode 调试 添加以下文件....

  • 1.1 TypeScript 安装与调试

    安装 调试 安装 vscode,command + K、command + S 自定义格式化按键 创建 ts 文件...

  • vscode中调试ts

    ts-node命令 一、新建ts文件二、debug 添加配置 三、当前目录添加局部 ts ts-node 自动编译...

  • vscode插件开发指南(1)

    vscode官网插件开发文档 前言 vscode是基于ts开发的编辑器,vscode插件开发可以用js或者ts开发...

  • VSCode 调试 Webpack 指南

    Webpack 是前端开发的常用工具。 在使用 Webpack 的时候,我们经常会引入额外的 loader 和 p...

  • Angular2使用vscode断点调试ts文件

    VSCode自带debugger工具,管理后台项目使用angular2,试了下调试ts文件十分方便。下面是具体的实...

  • 安装与调试

    安装 注意记下 ts-node 安装后的可执行文件路径,后面要用的。 调试 下载 vscode按 ctrl+K c...

  • vscode 插件& ts插件

    # 插件 ## vscode 插件 * [json2ts](网页版 http://json2ts.com/)[us...

  • window平台vscode调试flutter程序时报错Erro

    背景 window平台vscode调试flutter程序时报错 现象 vscode 中点击 F5调试时, 安卓模拟...

网友评论

    本文标题:VSCode 调试 ts 指南

    本文链接:https://www.haomeiwen.com/subject/rzukcctx.html