DevTools Source Map 与 Pretty Print
Source Map 用来把打包代码映射回源码，Pretty Print 用来把压缩代码格式化成人能读的样子。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Sources MOC
- 前置概念: Sources 面板
- 并列概念: Overrides 与 Workspaces
- 关系笔记: Sources 面板
DevTools Source Map 与 Pretty Print
一句话定义
Source Map 解决“我想看源码”，Pretty Print 解决“就算只有打包代码，也先让我看得下去”。
核心内容
Source Map 适合处理什么
- 断点想下在源代码而不是 bundle
- 错误堆栈想映射回真实文件
- 想看框架编译后的产物对应到哪段源码
Pretty Print 适合处理什么
- 线上压缩代码没有 Source Map
- 想快速阅读一段 bundle
- 想临时在最小化代码里打断点
边界与易混淆点
- 有 Source Map 时优先用 Source Map
- Pretty Print 只是格式化，不会恢复变量名和源码结构
- 生产环境是否暴露 Source Map 还要考虑安全和发布策略