首先确保tsconfig.json中启用sourceMap并配置rootDir和outDir，接着通过npx tsc编译生成.js.map文件，然后在VSCode的launch.json中设置调试配置，指向dist目录下的入口文件，并指定preLaunchTask为tsc构建任务，最后启动调试即可在TypeScript源码中设置断点并查看变量。
在使用 TypeScript 开发项目时，调试源码是开发过程中不可或缺的一环。VSCode 结合 Node.js 和正确的配置，可以让你直接在原始 TypeScript 文件中设置断点、查看变量、单步执行，而不需要手动去读编译后的 JavaScript 代码。以下是实现 TypeScript 源码调试的完整流程。
1. 确保生成 sourcemap
TypeScript 编译时必须生成 sourcemap，这样才能将编译后的 JavaScript 代码映射回原始的 .ts 源文件。
检查你的 tsconfig.json 文件，确保包含以下配置：
“sourceMap”: true：生成 .js.map 文件 “outDir”：指定输出目录（如 dist） “rootDir”：指定源码根目录（如 src）
示例 tsconfig.json：
{ “compilerOptions”: { “target”: “ES2020”, “module”: “commonjs”, “outDir”: “./dist”, “rootDir”: “./src”, “sourceMap”: true, “strict”: true }, “include”: [“src/**/*”]}
2. 使用 tsc 编译项目
在调试前，先通过 TypeScript 编译器将源码编译为 JavaScript。
运行命令：
npx tsc
这会在 dist 目录下生成带 .map 文件的 JavaScript 文件。
3. 配置 VSCode launch.json
在项目根目录下创建 文件，用于定义调试启动配置。
点击 VSCode 调试面板中的“添加配置”，选择 Node.js 环境，然后修改为如下内容：
{ “version”: “0.2.0”, “configurations”: [ { “name”: “调试 TypeScript”, “type”: “node”, “request”: “launch”, “program”: “${workspaceFolder}/dist/index.js”, “outFiles”: [“${workspaceFolder}/dist/**/*.js”], “skipFiles”: [ “/**” ], “console”: “integratedTerminal”, “preLaunchTask”: “tsc: 构建” } ]}
说明：
program：指向编译后的入口 JS 文件 outFiles：告诉调试器哪些是编译生成的文件，用于 sourcemap 匹配 preLaunchTask：在启动调试前自动运行构建任务
4. 添加预构建任务（可选但推荐）
为了让调试前自动编译，可在 中定义一个构建任务。
{ “version”: “2.0.0”, “tasks”: [ { “label”: “tsc: 构建”, “type”: “shell”, “command”: “npx tsc”, “group”: “build”, “presentation”: { “echo”: true, “reveal”: “silent” }, “problemMatcher”: “$tsc” } ]}
这样每次启动调试都会先编译最新代码。
5. 开始调试
完成以上步骤后：
打开一个 .ts 文件（如 src/index.ts） 在某一行左侧点击设置断点 切换到调试面板，选择“调试 TypeScript”配置 点击“启动调试”按钮
程序会在你设置的 .ts 断点处暂停，你可以查看调用栈、变量值、逐行执行等。
基本上就这些。只要 sourcemap 正确生成，并且 launch.json 配置准确，VSCode 就能无缝调试 TypeScript 源码，无需关注 dist 中的 js 文件。
以上就是VSCode调试：TypeScript源码调试的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/715300.html
微信扫一扫 
支付宝扫一扫 
![Go语言接口与切片：如何识别和操作[]interface{}](https://cdn.chuangxiangniao.com/www/2025/12/176369856569294-1.jpg?imageMogr2/crop/480x300/gravity/center)
