怎么解决谷歌浏览器Console控制台不显示Source源代码的问题

源码映射未生效导致无法调试原始文件，需依次启用SourceMap、清除Ignore List中src/等路径、验证.map文件加载并刷新调试数据。

当你在谷歌浏览器中打开开发者工具，切换到 Sources 面板却只看到压缩后的 bundle.js、看不到原始 Vue/React/TS 源文件时，说明源码映射（SourceMap）未被正确加载或已被忽略——这会导致断点失效、console.log 定位错行、无法单步调试真实业务逻辑。

检查并启用 SourceMap 加载

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

第二步：展开左侧面板中的 webpack:// 或 localhost 前缀目录，若里面为空或只有混淆后的 JS 文件，说明 SourceMap 未生效。

第三步：右键点击 Sources 左侧任意空白处 → 选择 “Enable JavaScript source maps”（如果该项已勾选，跳过此步）→ 同时确认右上角齿轮图标→Settings→Sources 中 Enable JavaScript source maps 和 Enable CSS source maps 均为开启状态。

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

取消忽略列表（Ignore List）的误拦截

这是 Vue/React 本地调试中最常被忽略的一步：即使 SourceMap 存在且已启用，Chrome 仍可能因“忽略列表”规则主动屏蔽源码。

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

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

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

验证并强制重载 SourceMap

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

第二步：在 Network 面板中筛选 .map，观察是否有 app.js.map、chunk-vendors.js.map 等请求返回 200 —— 若返回 404，说明构建产物里根本没生成 .map 文件，需回头检查 webpack/vite 配置。

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

这一步做完后，Sources 面板中应出现清晰的项目目录结构，点击任意 .vue 或 .ts 文件即可设置断点、查看原始代码行号、配合 console.log 定位真实调用栈。