[!info] related notes

• 相关 MOC: 浏览器开发者工具 MOC
• 关系笔记: Sources 面板

DevTools Sources MOC

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

这张地图覆盖什么

这张地图覆盖 Sources 面板里最核心的代码调试能力：下断点、看调用栈、看作用域、理解打包后代码和源代码的映射，以及如何做本地覆写验证。

从这里开始

1. 先看 Sources 面板
2. 再看 断点调试
3. 然后补 调用栈与作用域

核心笔记

• 断点调试
• 调用栈与作用域
• Source Map 与 Pretty Print
• Overrides 与 Workspaces

关系与对比入口

• Console 面板 - 先发现入口和错误，再进 Sources 精确定位
• 执行上下文 - 补运行时概念底层
• 调用栈和执行上下文的关系 - 补调用栈心智模型

Related notes

• 浏览器开发者工具 MOC
• Sources 面板
• 断点调试
• 调用栈与作用域