VSCode调试TypeScript

布满荆棘的人生 2023-06-25 04:57 78阅读 0赞

#### 这种调试方式的优点是直接调试ts文件，无需编译为js及生成map映射文件 ####

## 安装 npm 依赖包 ##

npm install typescript -g
    npm install ts-node -g

## 配置 tsconfig.json ##

在项目目录下运行命令`tsc --init`生成tsconfig.json  
在配置中添加 `sourceMap:true`。

{ 
        "compilerOptions": { 
            "target": "es5",
            "module": "commonjs",
            "noImplicitAny": true,
            "sourceMap": true
        }
    }

## 配置 launch.json ##

新建launch.json  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

编辑launch.json为

{ 
        "version": "0.2.0",
        "configurations": [
            { 
                "type": "node",
                "request": "launch",
                "name": "Launch TS Program",
                //program的值为ts-node模块的执行程序bin.js的文件路径，XXXX是PC用户名，根据自己的电脑用户名修改
                "program": "C:\\Users\\XXXX\\AppData\\Roaming\\npm\\node_modules\\ts-node\\dist\\bin.js",
                "sourceMaps": true,
                "outFiles": ["${workspaceFolder}/**/*.js"],
                "args": ["${relativeFile}"],
                "cwd": "${workspaceRoot}",
                "protocol": "inspector"
            }
        ]
    }

## 调试 ##

1.打开要调试的 ts 文件，添加debugger，设置断点。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]  
2.在debug 选择 launch.json 中对应的配置，点击绿三角(或按F5)运行：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]  
3.成功进入调试模式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191226105236209.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191226111205183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191226111521164.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191226111659156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70