vscode怎么调试ts

作者 : OO资源中心 发布时间: 2020-05-10 文章热度:191 共2092个字,阅读需6分钟。 本文内容有更新 字体:

vscode怎么调试ts插图

vscode怎么调试ts?

vscode 调试 TypeScript

环境

typescript :2.5.2

vscode:1.16.0

vscode 直接调试 ts 文件

源码:github

(httPS://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug)

vscode怎么调试ts插图(1)

安装 typescript 依赖

npm install typescript --save-dev

添加 tsconfig.json

主要是将 sourceMap 设置为true。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "outDir": "./dist",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ]
}

配置自动编译

利用 vscode 的 tasks 自动将 ts 编译为 js。也可以使用别的方式编译,如:gulp,Webpack 等。

添加文件: /.vscode/tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for thedocumentation about the tasks.json format
   "version": "0.1.0",
   "command": "tsc",
   "isShellCommand": true,
   //-p 指定目录;-w watch,检测文件改变自动编译
   "args": ["-p", ".","-w"],
   "showOutput": "always",
   "ProblemMatcher": "$tsc"
}

使用快捷键 Ctrl + Shift + B 开启自动编译。

配置调试

调试时,需要配置 vscode 的 launch.json 文件。这个文件记录启动选项。

添加或编辑文件 /.vscode/launch.json。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/dist/main.js",
            "args": [],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

注意 : program 需设置为你要调试的 ts 生成的对应的 js。

假如需要调试 /src/main.ts,则此处为 ${workspaceRoot}/dist/main.js。

调试

打开 main.ts,在左侧添加断点,进行调试。

vscode怎么调试ts插图(2)

使用 ts-node 调试 ts 文件

源码:github(https://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug-without-compiling)

来自:Debugging TypeScript in VS Code without compiling, using ts-node

ts-node 调试 ts 文件时,不会显式生成 js。假如你不想编译为 js 后 再调试,可以考虑这种方式。

安装 npm 依赖包

npm install typescript --save-dev
npm install ts-node --save-dev

配置 tsconfig.json

主要是将 sourceMap 设置为true。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "outDir": "./dist",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ]
}

配置 launch.json

打开 DEBUG 界面,添加 配置

或者编辑 /.vscode/launch.json。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/ts-node/dist/_bin.js",
            "args": [
                "${relativeFile}"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

调试

打开要调试的 ts 文件,添加debugger。

打开 debug 界面。

在DEBUG后 选择 launch.json 中对应的配置,此处为Current TS File。

点击运行按键或者按 F5 运行。

vscode怎么调试ts插图(3)

相关教程推荐:

相关推荐: go语言vscode安装不了怎么办

go语言vscode安装不了怎么办? Go语言的安装与配置-vscode篇 如果您希望开启go语言的开发之旅,但是现在还未踏出第一步,那么这篇文章应该能让您快速开始,并少走一点弯路。 相关教程推荐: 注:这篇文章是基于windows操作系统的,编辑器使用vsc…


关注微信公众号『OOINK』

第一时间了解最新资源动态关注OO.INK不迷路~

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
下载资源需要解压密码,解压密码是什么?
如下载的资源需要解压密码,请查看下载页右侧查找解压密码;
如没有解压密码请尝试默认解压密码:www.oo.ink 或者 oo.ink
或者联系我们获取解压密码!
1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2、分享目的仅供大家学习和交流,请不要用于商业用途!
3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
4、如有链接无法下载、失效或广告,请联系管理员处理!
5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

OO.INK资源网 » vscode怎么调试ts
+已在风雨中度过
为兴趣而改变,为梦想而努力!
+已坚持更新
时时更新,确保最新~

开通SVIP,畅享全站资源下载~

立即了解