为什么Google Chrome控制台不显示Source Map源码映射？

调试前端代码时，最让人抓狂的事情莫过于明明配置了Source Map，打开Chrome开发者工具却仍然只看到一团压缩后的bundle.js——断点不触发、console.log的行号对不上、单步调试直接跳到了混淆代码里。其实这多半是Source Map映射链断裂了，而修复起来并不复杂，关键就三步：检查浏览器设置、清理忽略列表、验证.map文件是否真的加载成功。

先从根源说起：Chrome开发者工具的Sources或Console面板里看不到原始的.vue、.ts或.jsx文件，说明Source Map虽然存在但没被正确解析。这会导致断点失效、行号错乱，甚至根本没法定位到真实的业务逻辑代码。下面一步步来排查。

检查并启用浏览器端Source Map加载

第一步：按 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（macOS）打开开发者工具 → 切换到 Sources 面板。

第二步：右键点击左侧文件树任意空白处 → 选择 Enable JavaScript source maps（若已勾选则跳过）。

第三步：点击右上角齿轮图标 → 进入 Settings → Preferences → Sources → 确保 Enable JavaScript source maps 和 Enable CSS source maps 均为开启状态。

注意：如果项目用Webpack构建但 devtool 设为 false 或 'none'，仅开启浏览器设置无效，必须同步修复构建配置。

清除Ignore List中误拦截的源码路径

这是Vue/React本地开发时最常见的一个坑：即使Source Map已经存在并且浏览器开启了加载，Chrome仍然会因为Ignore List里的规则主动把源码屏蔽掉。

方法一：在Sources面板左侧文件树顶部，点击 Page 标签右侧的 Ignore list 图标（?）→ 查看右侧是否列出了 .vue、.ts 或项目 src/ 目录路径。

方法二：若发现有匹配项（如 src/ 被勾选），直接点击该行右侧的 × 删除 → 或取消勾选对应条目。

【关键提醒】：Vue CLI默认会把 src/ 加入忽略列表，导致 .vue 单文件组件完全不显示。删掉它，刷新页面，Sources面板立刻出现可读的 App.vue、main.ts 等源文件。

验证.map文件是否真实加载成功

做完前两步，如果还看不到源码，就需要确认构建产物里到底有没有生成.map文件，并且网络请求是否正常返回。

第一步：按 Ctrl + R（Windows/Linux）或 Cmd + R（macOS）硬性刷新页面（不要用F5或地址栏回车）。

第二步：切换到 Network 面板 → 在过滤框输入 .map → 观察是否有 app.js.map、chunk-vendors.js.map 等请求返回 200。

若返回 404，说明构建产物里根本没生成 .map 文件，需回头检查 webpack/vite 配置中 devtool 是否设为 'source-map' 或类似有效值；若返回 403，可能是Nginx未配置 application/json MIME类型或跨域限制。

第三步：若 .map 请求成功但Sources仍无源码，右键Sources左侧面板 → 选择 Refresh framework debugging data（部分Chrome版本显示为 Reload page and disable cache）→ 此操作会清空缓存并重新解析所有SourceMap。