<p>本地测试环境开启SourceMap调试的核心是构建工具生成.map文件并在JS末尾添加//# sourceMappingURL=xxx.js.map注释，同时浏览器开发者工具需启用JavaScript源映射支持，Sources面板能显示原始TS/JS文件即生效。</p>
在本地测试环境中开启 SourceMap 调试，核心是让浏览器能正确加载并关联原始源码（如 TypeScript、ES6+、打包后的 JS），关键在于构建工具配置 + 浏览器开发者工具启用。
确保构建工具生成 SourceMap 文件
不同工具配置方式不同，但目标一致：输出 .js.map 文件，并在编译后的 JS 文件末尾添加 //# sourceMappingURL=xxx.js.map 注释。
-
Webpack：在
webpack.config.js中设置devtool: 'source-map'（生产环境可用'inline-source-map'或'eval-source-map'加速本地调试） -
Vite：默认开发模式（
vite dev）已自动启用 SourceMap；如需确认，检查vite.config.ts中build.sourcemap（开发时无需设，打包时才用） -
TS + tsc：运行
tsc --sourceMap，或在tsconfig.json中开启"sourceMap": true -
Parcel / Rollup：分别通过 CLI 参数（
--source-maps）或配置项（output.sourcemap: true）启用
检查浏览器是否加载了 SourceMap
打开 Chrome / Edge / Firefox 的开发者工具 → “Sources”（或“调试器”）面板 → 展开左侧文件树：
- 能看到原始文件（如
index.ts、utils.js）而非仅bundle.js，说明 SourceMap 已生效 - 若只看到压缩/打包后代码，右键点击 JS 文件 → “Add source map” 手动指定路径（用于调试未自动识别的场景）
- 在 Network 面板中搜索
.map，确认.js.map文件返回状态为 200 且内容可读（不是 404 或空文件）
浏览器开发者工具中启用 SourceMap 支持
部分浏览器默认开启，但建议手动确认：
立即学习“Java免费学习笔记（深入）”；
- Chrome / Edge：F12 → ⚙️ Settings → Preferences → “Enable JavaScript source maps” 和 “Enable CSS source maps” 勾选
- Firefox：F12 → ⚙️ Settings → “Enable source maps for JavaScript” 开启
- 刷新页面后，在 Sources 面板中尝试在原始 TS/JS 文件上打断点，验证能否正常停靠和单步调试
常见问题快速排查
SourceMap 不生效？优先检查这几项：
- 服务是否正确返回
.map文件（路径是否匹配？是否被 Express/Webpack Dev Server 忽略？） - JS 文件末尾是否有正确的
sourceMappingURL注释（注意路径是相对当前 JS 文件，不是 HTML） - 是否使用了代码混淆（Uglify/Terser）但未配置 sourcemap 支持（需设
sourceMap: true） - 浏览器缓存了旧 JS（无 sourceMap 注释），强制硬性刷新（Ctrl+F5）或禁用缓存（Network 面板勾选 “Disable cache”）
