DevTools Sources 面板
Sources 面板用于断点调试、单步执行、查看调用栈、作用域和 Source Map 映射后的源码。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: 浏览器开发者工具 MOC, DevTools Sources MOC
- 前置概念: 闭包, Promise 与 async / await
- 并列概念: Console 面板, Network 面板, Performance 面板
- 易混淆概念: Elements 面板
- 关系笔记: 浏览器开发者工具
DevTools Sources 面板
一句话定义
Sources 面板是浏览器里的代码调试器，负责回答“代码为什么这样执行”。
核心内容
它最适合回答什么问题
- 某个点击或请求到底走了哪条代码路径
- 某个变量为什么会变成当前值
- 异步逻辑为什么顺序不对
- 某个异常是在什么调用链里抛出的
关键能力
- 行断点、条件断点、DOM 断点、XHR / Fetch 断点
- 单步执行：step over / into / out
- Call Stack：当前执行栈和异步调用链
- Scope：局部变量、闭包变量、全局变量
- Source Map：把打包后的代码映射回源代码
继续往下拆
常见使用场景
- 点击没反应，但 Console 没明显报错
- 接口参数是谁拼错的
- 某个状态被谁覆盖
- 异步回调、定时器、事件监听器顺序异常
一个实用排障顺序
- 先用 Console 面板 找报错或入口信息
- 再在 Sources 下关键断点
- 看 Call Stack 和 Scope
- 必要时回到 Network 面板 补请求上下文
边界与易混淆点
- Sources 解决的是执行路径，不直接证明请求和响应内容是否正确
- 断点过多会打断时序，排异步问题时要有针对性地下断点
- 如果 Source Map 缺失，看到的可能是打包后代码，这时定位成本会明显上升