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

应启用浏览器Source Map并清除忽略列表：先在Sources面板启用JavaScript/CSS Source Map，再删除Ignore List中src/等路径，最后验证.map文件是否200加载成功。

当你在Chrome开发者工具的Console或Sources面板里看不到原始的.vue、.ts或.jsx文件，只看到压缩后的bundle.js或混淆代码，说明Source Map映射链断裂——这会让断点失效、console.log行号错乱、无法单步调试真实业务逻辑。

检查并启用浏览器端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仍会因忽略列表规则主动屏蔽源码。

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

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

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

验证.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。