DevTools Sources MOC
Sources 面板主题地图,覆盖断点、调用栈、作用域、Source Map、Pretty Print、Overrides 和 Workspaces。
#type / moc
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 相关 MOC: 浏览器开发者工具 MOC
- 关系笔记: Sources 面板
DevTools Sources MOC
这张地图覆盖什么
这张地图覆盖 Sources 面板里最核心的代码调试能力:下断点、看调用栈、看作用域、理解打包后代码和源代码的映射,以及如何做本地覆写验证。
从这里开始
- 先看 Sources 面板
- 再看 断点调试
- 然后补 调用栈与作用域
核心笔记
关系与对比入口
- Console 面板 - 先发现入口和错误,再进 Sources 精确定位
- 执行上下文 - 补运行时概念底层
- 调用栈和执行上下文的关系 - 补调用栈心智模型