DevTools Sources 面板
Sources 面板是浏览器中的 JavaScript/源码调试器，用于在真实运行时暂停执行、检查调用栈与作用域、映射源码并验证局部修复。
#concept
#growing
#frontend
#browser
#chrome-devtools
[!info] related notes
- 所属 MOC: 浏览器开发者工具 MOC, DevTools Sources MOC
- 断点: 断点调试
- 运行时证据: 调用栈与作用域
- 源码映射: Source Map 与 Pretty Print
- 本地验证: Overrides 与 Workspaces
DevTools Sources 面板
一句话定义
Sources 面板回答的是：
代码为什么沿这条路径执行，以及在某个暂停时刻真实状态是什么。
它关注运行时执行，不是静态代码浏览器。
主要组成
Source tree / editor
查看页面加载到浏览器中的脚本、源映射后的源码、snippet 与本地映射文件。
Debugger controls
常见能力：
- pause/resume；
- step over；
- step into；
- step out；
- deactivate breakpoints。
Breakpoints
包括行断点、条件断点、DOM、XHR/fetch、Event Listener 等。详见 断点调试。
Call Stack / Scope
暂停后最重要的两块证据：
Call Stack
→ 我是怎么走到这里的？
Scope
→ 这一刻哪些变量可见，它们是什么值？详见 调用栈与作用域。
最稳定的调试流程
异常结果
→ 找最接近结果的位置
→ 下断点
→ 复现
→ 看 Scope
→ 看 Call Stack
→ 单步缩小错误区间
→ 验证修复如果根本不知道执行入口，可以先用事件断点、XHR/fetch breakpoint 或 Network Initiator 找入口。
异步代码
Promise、timer、event callback 会跨 task/microtask 边界。
暂停时要区分：
- 当前同步 stack；
- 浏览器能提供的 async stack/context；
- 真正的事件循环先后关系。
不要把异步链看成一个从未中断的同步调用栈。
Source Map
现代前端线上运行的往往是 bundler/transpiler 产物。
Source Map 提供：
generated location
↔ original source location它让断点、错误堆栈和源码定位尽量回到开发源码，但不会改变浏览器实际执行的是生成产物。
Sources 与其他面板的边界
Network
证明请求/响应发生了什么。
Console
快速看异常、日志和表达式结果。
Elements
证明实时 DOM/CSS 最终是什么。
Sources
证明 JavaScript 为什么这样执行。
同一个 bug 往往需要多个面板联合取证。
常见误区
- 在 Sources 看到某变量值错误，就直接认定它是在这里变错的；
- 只看当前 frame，不沿 Call Stack 向上追输入来源；
- 没 Source Map 时把格式化 bundle 当成真正源码；
- 在断点中改变大量状态，导致时序敏感 bug 消失。
学习检查
- Sources 与 Console 的核心证据差异是什么？
- 为什么暂停到错误结果附近后，还要同时看 Scope 和 Call Stack？
- Source Map 为什么不会改变浏览器真正执行的代码？
- 异步 callback 的“调用来源”为什么不能完全按普通同步 stack 理解？
- 如果不知道谁发起了
/api/save，应该优先用哪类断点或入口？ - 给一个“变量最终为 undefined”的问题，设计断点 → Scope → Call Stack → 单步的排查链。
Digital Biome