正确配置TypeScript调试需生成sourcemap、编译代码并设置launch.json。1. 在tsconfig.json中启用sourceMap；2. 使用npx tsc编译生成.js和.map文件；3. 配置launch.json的program、outFiles和resolveSourceMapLocations；4. 在.ts文件设断点后按F5启动调试，VSCode将停在源码断点处。
要在VSCode中调试TypeScript源码，关键在于正确配置项目环境，使调试器能定位到原始的.ts文件。整个过程包括生成正确的sourcemap、配置启动项，并确保TypeScript被正确编译或运行。以下是具体操作步骤。
1. 确保生成sourcemap
TypeScript调试依赖sourcemap来将编译后的JavaScript代码映射回原始的.ts源码。你需要在tsconfig.json中启用sourcemap输出：
- 打开或创建项目根目录下的tsconfig.json
- 确保包含以下配置：
{ “compilerOptions”: { “target”: “es2016”, “module”: “commonjs”, “outDir”: “./dist”, “rootDir”: “./src”, “strict”: true, “sourceMap”: true }, “include”: [“src”] }
sourceMap: true是必须的，这样编译后的JS文件才会附带.map文件，供调试器使用。
2. 编译TypeScript代码
使用tsc命令将TypeScript编译为JavaScript：
- 在终端运行：npx tsc
- 这会根据tsconfig.json生成dist目录（或其他指定输出目录）中的.js和.map文件
确保编译成功且dist目录中存在对应的sourcemap文件。
3. 配置VSCode调试器（launch.json）
在项目根目录下创建.vscode/launch.json文件，用于定义调试配置：
查看详情
- 点击VSCode左侧调试图标，然后选择“创建launch.json”
- 选择Node.js环境
- 修改配置如下：
{ “version”: “0.2.0”, “configurations”: [ { “name”: “调试TypeScript”, “type”: “node”, “request”: “launch”, “program”: “${workspaceFolder}/dist/index.js”, “outFiles”: [“${workspaceFolder}/dist/**/*.js”], “resolveSourceMapLocations”: [ “${workspaceFolder}/**”, “!**/node_modules/**” ], “console”: “integratedTerminal” } ] }
说明：
- program：指向编译后的入口JS文件（如dist/index.js）
- outFiles：告诉调试器哪些是编译生成的文件
- resolveSourceMapLocations：允许调试器在项目目录中查找sourcemap，排除node_modules
4. 开始调试
一切就绪后，可以开始调试：
- 在src目录下的.ts文件中设置断点
- 按F5或点击“运行和调试”按钮
- VSCode会在执行到对应逻辑时停在.ts源码的断点处
此时你可以查看变量、调用栈，并逐行执行TypeScript代码。
基本上就这些。只要sourcemap正确生成，launch.json配置无误，VSCode就能顺利调试TypeScript源码。不复杂但容易忽略细节，比如outFiles或sourceMap选项。确保每次修改后重新编译，或者使用自动编译（tsc -w）提升效率。
以上就是如何在VSCode中调试TypeScript源码？的详细内容，更多请关注php中文网其它相关文章！
