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)
安装 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,在左侧添加断点,进行调试。
使用 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-devnpm 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教程
以上就是vscode怎么调试ts的详细内容。
   
 
   