VSCode调试：TypeScript源码调试

首先确保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：

2. 使用 tsc 编译项目

在调试前，先通过 TypeScript 编译器将源码编译为 JavaScript。

运行命令：

这会在 dist 目录下生成带 .map 文件的 JavaScript 文件。

3. 配置 VSCode launch.json

在项目根目录下创建 vscode/launch.json"> 文件，用于定义调试启动配置。

点击 VSCode 调试面板中的“添加配置”，选择 Node.js 环境，然后修改为如下内容：

说明：

• program：指向编译后的入口 JS 文件
• outFiles：告诉调试器哪些是编译生成的文件，用于 sourcemap 匹配
• preLaunchTask：在启动调试前自动运行构建任务

4. 添加预构建任务（可选但推荐）

为了让调试前自动编译，可在 中定义一个构建任务。

这样每次启动调试都会先编译最新代码。

5. 开始调试

完成以上步骤后：

• 打开一个 .ts 文件（如 src/index.ts）
• 在某一行左侧点击设置断点
• 切换到调试面板，选择“调试 TypeScript”配置
• 点击“启动调试”按钮

程序会在你设置的 .ts 断点处暂停，你可以查看调用栈、变量值、逐行执行等。

基本上就这些。只要 sourcemap 正确生成，并且 launch.json 配置准确，VSCode 就能无缝调试 TypeScript 源码，无需关注 dist 中的 js 文件。

以上就是VSCode调试：TypeScript源码调试的详细内容，更多请关注php中文网其它相关文章！