vscode配置调试ts

记录下配置调试ts的过程:
首先要安装了typescript,通过npm(Node.js包管理器)来安装:

 npm install -g typescript

在编辑器,将下面的代码输入到main.ts文件里:

function sayHello(lang: string): string {
    return 'Hello, ' + lang;
}
let lang = "typeScript";
console.log(sayHello(lang));

加入tsconfig.json文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./out",
    "strict": true,
  },
}

启动调试F5
在这里插入图片描述

打开launch.json配置

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/app.ts",
            "preLaunchTask": "tsc",
            "outFiles": ["${workspaceFolder}/out/*.js"],
            
        }
    ]
}

同在这个配置目录下增加tasks.json,配置上面的preLaunchTask任务

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "always",
    "problemMatcher": "$tsc"
}

ok,断点调试可以用了
在这里插入图片描述

vscode-typescprit-debugging官方教程

Visual Studio Code (VSCode) 是一款流行的开源代码编辑器,它支持调试 TypeScript 代码非常方便。以下是使用 VSCode 调试 TypeScript 的步骤: 1. 安装配置:首先确保已安装了 TypeScript 和 Node.js(如果项目依赖 Node)。然后,在VSCode中安装适用于TypeScript调试插件,如 "ms-vscode.debugger-for-chrome" 或 "debugger-for-nodejs"。 2. 设置launch.json:在项目根目录下创建或打开 `launch.json` 文件,这是一个 JSON 配置文件,用于指定调试会话的配置配置需要包括启动目标(web服务器、Node进程等)、断点设置以及环境变量。 ```json { "version": "0.2.0", "configurations": [ { "type": "node", // 或者 "chrome" 如果你是在浏览器里调试 "request": "launch", "name": "Debug TypeScript App", "program": "${workspaceFolder}/dist/main.js", // 根据你的构建过程填写实际入口文件 "outFiles": [ "${workspaceFolder}/**/*.js" ], // 指定typescript编译后的js文件范围 "sourceMapPathOverrides": { "webpack:///src/*": "${workspaceFolder}/*" } } ] } ``` 3. 启动调试:通过命令面板(快捷键 `Ctrl + ,` 或者 `Cmd + ,`)选择相应的配置,点击“Start Debugging”按钮开始调试。 4. 断点和查看:在代码中设置断点,当程序运行到断点处会暂停。你可以使用内置的调试工具检查变量值、堆栈跟踪等。 5. 调试控制:通过调试控制台可以设置条件断点、步进执行代码、单步调试等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值