sourcemap 有效调试需构建生成正确、浏览器加载识别到位，断点应落在 .vue/.ts 源文件而非 bundle.js；vite/vue cli/webpack 需正确配置 sourcemap，确保 .map 文件可访问且无跨域；chrome 调试器需启用 source maps 并验证 sources 面板显示原始源码；线上需安全上传 .map 文件并绑定 release 版本供监控平台解析堆栈。
要让 SourceMap 真正帮上忙，关键不是“开了就行”，而是确保它和浏览器开发者工具形成闭环：构建生成正确、加载路径无误、调试界面识别到位。断点能打在 .vue 或 .ts 文件里，而不是 bundle.js 的某一行，这才是有效调试的起点。
确保构建阶段生成可用的 SourceMap
SourceMap 不是浏览器自带的功能，而是由构建工具（如 Vite、Webpack、Vue CLI）在打包时生成的映射文件。如果没生成或配置不对，后续所有操作都无效。
- Vite 项目需在 vite.config.ts 中设置 build.sourcemap: true（开发环境默认开启，生产环境需显式启用）
- Vue CLI 项目检查 vue.config.js 是否有 devtool: 'source-map' 或 'cheap-module-source-map'
- Webpack 用户注意：避免使用
eval类 devtool（如eval-source-map），它虽快但不生成独立 .map 文件，不利于线上问题回溯 - 构建后确认 JS 文件末尾存在类似
//# sourceMappingURL=app.js.map的注释，且对应 .map 文件可通过网络请求正常返回（状态码 200）
浏览器中启用并验证 SourceMap 加载
即使构建正确，浏览器也可能因设置关闭或路径解析失败而忽略 SourceMap。Chrome 和 Edge 默认开启，但有时会被手动禁用或受工作区干扰。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 打开开发者工具（F12），点击右上角齿轮图标进入 Settings → Preferences → Debugger，确认勾选 Enable JavaScript source maps
- 刷新页面后，在 Sources 面板左侧文件树中查找 webpack://、app:// 或真实路径（如 src/components/MyButton.vue），而非只有
app.min.js - 若只看到压缩文件，点击左上角 {}（Pretty print）旁的菜单，选择 Reveal in sidebar，强制列出所有映射源文件
- 断点设下后若变浅灰色、点击无响应，大概率是 SourceMap 未加载成功——此时回到 Network 面板过滤 .map 请求，看是否 404 或跨域被拦截
在原始源码中精准设断点并观察上下文
有了可识别的源文件，才能真正实现“所见即所调”：断点停在 setup() 函数里，作用域面板显示的是 ref 和 computed 的实时值，而不是 bundle 中一堆闭包变量名。
- 在 Sources 面板中直接点击 .vue / .ts / .jsx 文件的行号左侧设断点，无需写
debugger；Vite 或 Vue CLI 项目通常支持单文件组件的 script setup 语法断点 - 遇到异步逻辑（如
await api.getUser()），不要只在then或catch里加断点，而应利用 XHR/fetch Breakpoints 或 Event Listener Breakpoints → Promise 主动拦截请求链 - 右侧 Scope 面板查看当前作用域变量；Watch 面板输入
user.name可持续追踪，但注意表达式必须在当前断点作用域内存在，否则报ReferenceError - 调用栈（Call Stack）会显示从
onMounted→getUser→fetch的完整路径，点击任一层可跳转到对应源码位置
线上问题也能用 SourceMap 定位（需额外准备）
开发环境能断点，不代表线上报错也能还原。要让 Sentry 或自建监控系统把错误堆栈映射回源码，需要把 .map 文件上传到可信位置，并确保错误发生时能关联到对应版本。
- 生产环境避免直接暴露 .map 文件给公网，可部署到内部 CDN 或配合鉴权接口提供（如
/sourcemaps/:version/:hash.map） - JS 脚本末尾的
sourceMappingURL应指向该受控地址，例如：//# sourceMappingURL=https://internal.example.com/sourcemaps/v2.3.1/abc123.map - 监控平台（如 Sentry）需上传对应版本的 SourceMap，并绑定 release 版本号；错误发生时，堆栈中的
utils.ts:42:15就能展开成真实源码行 - 本地复现线上报错时，可在 Sources 面板右键空白处 → Add folder to workspace，手动挂载本地源码目录，再通过 Map to file system 关联线上脚本路径
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
