inline source map 是将 source map 内容以 base64 编码直接内联在 js/css 文件末尾，通过 //# sourcemappingurl=data:application/json;base64,... 标识，使浏览器无需额外请求 .map 文件即可精准映射到原始 .ts/.scss 源码位置。
在本地开发时，用 inline source map 能让浏览器直接看到原始的 .ts/.scss 文件位置，点击报错就能跳转，不用手动找映射文件或配服务器。
什么是 inline source map
它把 source map 内容以 base64 编码追加在 JS/CSS 文件末尾（用 /*# sourceMappingURL=data:application/json;base64,... */ 标记），浏览器解析时自动识别，无需额外生成 .map 文件或配置静态服务路径。
Webpack 中开启 inline 模式
在 webpack.config.js 的 devtool 选项设为以下任一值即可：
-
eval-source-map：每个模块用 eval 执行，并附带独立 source map（热更新友好，推荐开发用） -
cheap-module-eval-source-map：忽略 loader 生成的列信息，体积小、构建快，适合大型项目 -
inline-source-map：生成完整 source map 并内联（不支持 HMR，调试准但略慢）
例如：
module.exports = {
devtool: 'eval-source-map',
// ... 其他配置
};Vite 或 Vue CLI 默认已支持
Vite 开发服务器默认使用 sourceMap: true，且自动走 inline 方式（实际是 data: URL），无需额外配置。Vue CLI 项目在 vue.config.js 中确保：
module.exports = {
devServer: {
client: { overlay: true }
}
}错误会直接显示在浏览器控制台，点击即可跳转到 .vue 或 .ts 原始行。
检查是否生效的小技巧
- 打开浏览器开发者工具 → Sources 面板 → 展开 localhost → 找到你的 JS/CSS 文件 → 拉到底部看是否有
sourceMappingURL=data:行 - 故意写个语法错误（如
console.log(;），看控制台报错位置是否指向 .ts 或 .scss 文件，而非 bundle.js - Chrome 中右键「Open in Editor」能直接打开本地对应文件（需启用「Workspaces」并关联本地目录）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
