开发环境启用SourceMap的核心目标是兼顾速度与精度：需快到不影响热更新，准到能点击跳转至原始.vue、.scss或.ts文件的正确行号；推荐配置cheap-module-source-map，它保留行号映射、支持loader源码回溯、生成速度快，且为Webpack开发模式默认值；CSS/Sass调试还需在Vite、Vue CLI或Sass CLI中显式开启sourceMap，同时避免cheap-source-map和eval类配置导致映射失效。
开发环境启用 SourceMap 的核心目标是：快到不影响热更新体验，准到能点进原始 .vue、.scss 或 .ts 文件并停在正确行号。不追求全量映射，也不接受“跳到隔壁文件”或“列号全错”。
推荐配置：cheap-module-source-map
这是 Webpack 默认开发模式（mode: 'development'）实际采用的值，也是多数项目的最优解：
- 保留原始行号（可准确定位到第几行），但忽略列信息（调试时不影响断点命中）
- 支持 loader 层映射（比如
sass-loader、babel-loader），能回溯到node_modules中第三方库的源码（加module关键字的关键） - 生成速度快，不拖慢本地启动和 HMR 热更新
CSS / Sass 场景需额外开启 loader 级 sourcemap
仅靠 Webpack 的 devtool 不足以让 Chrome 点进 .scss 文件——Sass 编译链必须自己生成映射：
-
Vite 项目：若用了
css.preprocessorOptions.sass，务必显式写sourceMap: true -
Vue CLI / Webpack 项目：在
vue.config.js中配css: { sourceMap: true }，同时确保sass-loader的sassOptions.sourceMap为true -
Sass CLI 编译：命令行必须加
--sourcemap（Dart Sass）或--source-map（已弃用的 Node Sass）
避免踩坑的三个关键细节
配置写了≠真生效。常见失效原因集中在路径与链路断裂：
-
别用
cheap-source-map：它不包含 loader 映射，Sass/TS/Babel 处理后的代码无法回溯到原始文件 -
禁用
eval类型（如eval-source-map）用于 CSS 调试：它会导致 Sass 行号偏移，尤其在多层@use或嵌套时跳转错位 -
检查 .map 文件里的
sources字段：路径应为相对路径且可被浏览器解析（例如src/styles/main.scss），不能含../node_modules/或指向构建目录外
验证是否真正可用
打开 Chrome DevTools → Sources 面板，观察两个信号：
- 左侧文件树中是否出现
webpack://或debug/下的src/目录结构？能看到.vue或.scss文件即成功 - 在样式面板点击某个 CSS 规则右侧的文件名链接（如
main.scss:42），能否直接跳转并高亮对应源码行？不能则说明映射链断在某一层
