线上JS报错需通过SourceMap还原开发态调试环境：配置devtool生成.map文件，确保浏览器能加载源码映射，在Sources面板中定位原始TS/JS文件设断点，结合Scope、Console和Call Stack动态验证执行逻辑，并模拟真实用户环境复现问题。
线上 JS 报错不能直接在压缩代码里断点，必须让浏览器“看懂”原始逻辑。核心不是找错误行，而是把生产环境的执行现场，还原成你熟悉的开发态。
先确保能加载到源码映射
压缩后的 JS 文件（如 app.a1b2c3.js）本身不含可读变量和行号，断点打上去也看不出上下文。关键一步是让浏览器关联对应的 .js.map 文件：
- 构建时配置 devtool: 'source-map' 或 'hidden-source-map'（后者需手动注入 sourceMappingURL）
- 检查 Network 面板中 JS 文件响应头是否含 SourceMap 信息，或末尾是否有 # sourceMappingURL=app.a1b2c3.js.map
- 若线上没公开 .map 文件，可用 Charles / Fiddler 拦截 JS 响应，在返回体末尾手动补上 sourceMappingURL，再刷新触发加载
在 Sources 面板里精准设断点
打开 DevTools → Sources 面板后，左侧文件树会出现 webpack:// 或 src/ 开头的源码路径（前提是 SourceMap 正确加载）：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 找到报错堆栈里提到的文件，比如 pages/order/index.ts，点击展开查看原始代码
- 不要只在报错行设断点——在它上游的初始化、数据获取、状态赋值等关键位置也设几处，观察变量是否按预期流动
- 右键行号可添加 条件断点，例如 data === null，避免偶发问题反复触发打断点
结合错误上下文动态验证
单纯停在某一行不够，要确认是不是这个位置真导致了用户侧现象：
立即学习“前端免费学习笔记（深入）”；
- 暂停后，看右侧 Scope 面板：参数、局部变量、this 指向是否合理？比如接口返回 undefined 却直接 .map()，就会在这里暴露
- 在 Console 中输入关键表达式验证，如 typeof apiResponse、apiResponse?.list?.length
- 查看 Call Stack：往上翻几层，确认是不是某个高阶组件或拦截逻辑提前中断了流程
对准真实用户环境复现
本地 Chrome 断点成功，不代表解决了线上问题。得模拟出错环境：
- 用 DevTools 的 Network Conditions 降网速、禁用缓存，或切换 UA 模拟老版本国产浏览器
- 开启 Disable cache 和 Online → Offline 测试离线态异常分支
- 如果用户用的是 iOS Safari，真机连 Mac Safari 开发者工具调试，别只信模拟器
