需依次启用SourceMap设置、清除Ignore List中src/等路径、验证.map文件加载并刷新调试数据。
谷歌浏览器打开开发者工具后，Sources面板只显示压缩后的bundle.js、看不到原始Vue/React/TS源文件，说明Source Map加载失败，需从启用设置、清理忽略列表、验证映射三方面同步配置。
启用JavaScript和CSS源码映射
第一步：按 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（macOS）打开开发者工具 → 切换到 Sources 面板。
第二步：点击右上角三个圆点图标 → 选择【Settings】→ 左侧菜单点击【Preferences】→【Sources】。
第三步：确认 Enable JavaScript source maps 和 Enable CSS source maps 均已勾选。若其中一项为灰色不可点，说明当前页面禁用了调试功能（如启用了 --disable-dev-tools 启动参数），需检查 Chrome 启动方式。
清除Sources面板的忽略列表
这一步最常被跳过，却是Vue/React本地开发中Source Map“有但不显示”的主因。
方法一：在 Sources 面板左侧文件树顶部，点击 “Page” 标签右侧的 ⓘ 图标（Ignore list）→ 查看右侧列表是否包含 src/、.vue、.ts 或 node_modules 等路径。
方法二：若发现 src/ 被勾选，直接点击该行末尾的 × 删除 → 刷新页面，Sources 面板立刻出现可读的 App.vue、main.ts 等原始文件。
【关键提醒】：Vue CLI 5+ 默认将 src/ 加入忽略列表，不手动删掉它，哪怕 .map 文件存在且路径正确，源文件也完全不会出现在面板中。
强制重载并验证Source Map加载效果
第一步：按 Ctrl + R（Windows/Linux）或 Cmd + R（macOS）硬性刷新页面（禁用缓存，确保重新拉取资源）。
第二步：切换到 Network 面板 → 在筛选框输入 .map → 检查是否有 app.js.map、chunk-vendors.js.map 等请求返回 200。若全部是 404，说明构建产物缺失 .map 文件，需回查 webpack/vite 的 devtool 配置（如应设为 source-map 或 eval-source-map）。
第三步：若 .map 请求成功但 Sources 仍无源码 → 右键 Sources 左侧面板空白处 → 选择 Refresh framework debugging data → 此操作会清空内部解析缓存并重新加载所有映射关系。
第四步：展开左侧面板中的 webpack:// 或 localhost 目录 → 确认能看到带扩展名的原始文件（如 Home.vue、index.ts），且双击可打开、可设断点、console.log 定位行号准确。
