如何在VSCode中调试TypeScript源码？

正确配置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
• 确保包含以下配置：

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文件，用于定义调试配置：

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

161

查看详情

• 点击VSCode左侧调试图标，然后选择“创建launch.json”
• 选择Node.js环境
• 修改配置如下：

说明：

• 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中文网其它相关文章！