首先确保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/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": [ "说明：
- 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 文件。
