4-2 调试进阶map文件：调试ts部分的源码
Source Map 的作用
Source Map 是一种映射文件，它记录了编译后代码（如 JavaScript）与源代码（如 TypeScript）之间的对应关系。在调试时，浏览器或调试工具可以根据 Source Map 将编译后的代码位置映射回源代码位置，实现"源码级调试"。
Webpack 和 webpack-cli 的部分源码是用 TypeScript 编写的，发布时编译为 JavaScript。如果需要调试 TypeScript 源码部分，就需要 Source Map 的支持。
启用 Source Map
方法一：在 webpack 源码中启用
Webpack 源码的 tsconfig.json 中需要确保开启 declarationMap 和 sourceMap：
{
"compilerOptions": {
"sourceMap": true,
"declarationMap": true,
"inlineSources": true
}
}
json
然后在 webpack 源码目录重新编译：
cd webpack
npm run build
bash
方法二：VSCode 调试配置中启用
在 launch.json 中确保以下配置：
{
"type": "node",
"request": "launch",
"name": "Debug Webpack",
"program": "${workspaceFolder}/node_modules/webpack-cli/bin/cli.js",
"sourceMaps": true,
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
],
"outFiles": [
"${workspaceFolder}/node_modules/webpack/lib/**/*.js"
]
}
json
关键配置说明：
| 配置项 | 作用 |
|---|---|
sourceMaps: true | 启用 Source Map 支持 |
resolveSourceMapLocations | 限定 Source Map 查找范围 |
outFiles | 告诉调试器编译产物的位置 |
调试 TypeScript 源码的步骤
1. 确认 .map 文件存在
检查 webpack 编译产物目录中是否有对应的 .js.map 文件：
ls webpack/lib/*.js.map | head -5
bash
如果不存在，需要重新编译并确保 sourceMap 选项开启。
2. 设置断点
在 VSCode 中直接打开 TypeScript 源码文件（如 webpack/src/Compiler.ts），设置断点。
3. 启动调试
按 F5 启动调试，程序会在 TypeScript 源码的断点处暂停，而不是编译后的 JavaScript 文件中。
常见问题
断点不生效
可能原因及解决方案：
| 原因 | 解决方案 |
|---|---|
| Source Map 文件不存在 | 重新编译 webpack 源码，开启 sourceMap |
outFiles 路径不正确 | 检查编译产物实际路径 |
| VSCode 没有识别到 .map 文件 | 添加 resolveSourceMapLocations 配置 |
| TypeScript 编译后路径变化 | 使用 sourceRoot 配置修正路径 |
断点位置偏移
Source Map 版本与实际代码版本不一致时会出现偏移。解决方法是确保使用同一版本的源码和编译产物：
cd webpack
git checkout v5.90.0 # 切换到特定版本
npm run build # 重新编译
bash
Source Map 原理简述
Source Map 文件是一个 JSON 结构，核心字段：
{
"version": 3,
"sources": ["Compiler.ts"],
"sourcesContent": ["// TypeScript 源码内容..."],
"mappings": "AAAA,OAAO...",
"file": "Compiler.js"
}
json
mappings 字段使用 VLQ 编码，记录了编译后代码的行列号与源代码行列号之间的映射关系。每个分号分隔一段，每个逗号分隔一个位置。
参考资源
- Source Map 规范 - 官方规范文档
- VSCode Source Map 调试
↑