SourceMap是调试压缩代码的唯一可行路径，需构建工具生成.map文件、浏览器正确加载、开发者工具启用并匹配源码路径，任一环节失效均导致断点不命中。
不能直接在压缩后的 bundle.js 上打断点调试 —— 即使断点图标亮了，执行时也大概率不命中。SourceMap 是唯一可行的路径，但它的生效依赖一整条链路全部对齐。
SourceMap 文件必须被浏览器正确加载
断点打在源码（如 src/index.ts）上能命中，前提是浏览器实际加载并解析了对应的 .js.map 文件。常见失效场景：
- Network 面板里看不到
bundle.js.map请求，或返回 404 / 403 —— 检查构建工具是否启用了sourceMap: true（Vite 用build.sourcemap，Webpack 用devtool: 'source-map'） - 请求返回 200 但内容是 HTML（比如 404 页面），说明服务器没把
.map文件当静态资源暴露 —— WebStorm 内置服务器默认支持，但 Vite/Webpack Dev Server 需确保serve阶段允许.map后缀 - Chrome DevTools 的 Sources 面板里看不到原始文件树（只有
localhost下的压缩文件）—— 可能是sourceMappingURL注释缺失或路径错误，检查bundle.js末尾是否有类似//# sourceMappingURL=bundle.js.map，且路径可访问
WebStorm 调试配置必须匹配构建产物路径
WebStorm 不会自动“猜”你的 source map 位置，它靠运行配置里的 URL 和本地文件映射关系来关联源码。关键点：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 调试类型必须选
JavaScript Debug，不是Node.js或npm—— 后两者不处理浏览器端 SourceMap - URL 必须指向一个能被 WebStorm 内置服务器访问的地址，例如
http://localhost:63342/dist/index.html；如果用 Vite，应改用Attach to Node.js/Chrome并手动连接chrome://inspect - 确保
dist/目录下同时存在index.html、bundle.js和bundle.js.map，三者时间戳一致；否则 WebStorm 可能加载旧版 map 导致断点偏移
Chrome DevTools 和 WebStorm 的 SourceMap 行为不完全同步
即使一切配置正确，你仍可能遇到：断点在 WebStorm 里显示命中，但变量值为空、作用域显示 undefined，或调用栈跳转错乱。这不是 bug，而是 V8 引擎调试器的限制：
立即学习“Java免费学习笔记（深入）”；
- 异步回调（
setTimeout、Promise.then）中，WebStorm 显示的变量值是上一个执行帧的快照，不是实时值 —— 别依赖悬停，改用console.log或在回调第一行再设断点 - 闭包变量在某些优化级别下无法被调试器捕获（尤其生产构建），即使 SourceMap 存在；开发阶段建议关掉
terser的compress和mangle - 如果用了动态
import()，对应 chunk 的 SourceMap 必须单独生成并部署，否则只会在主 bundle 的 map 里看到eval形式，无法跳转源码
最易被忽略的一点：WebStorm 的 “Debugger connected” 提示必须出现在右下角状态栏 —— 没这个提示，意味着它根本没接入 Chrome 的调试协议，所有 SourceMap 设置都白搭。每次改完配置，务必确认这个状态。
