前端调试除了代码写 debugger，打印 log，尤其是在生产环境，不能编辑代码的情况下如何处理呢？在浏览器中 sources 标签页有这几个功能（按照使用频度排序）：
- 断点（Breakpoints）
- 调用栈信息（Call Stack）
- 作用域信息（Scope）
- 额外脚本 （Snippets）
- 覆盖脚本（Overrides）
- 事件监听断点（Event Listener Breakpoints）
- 代码格式化（Pretty print）
断点（Breakpoints）
浏览器断点有以下几种类型：
- 普通断点（breakpoint）
- 条件断点（conditional breakpoint）
- 日志断点（log point）
| 标题 | 普通断点 | 条件断点 | 日志断点 |
|---|---|---|---|
| 功能 | 代码运行时暂停在当前行，便于查看变量 | 代码运行到当前位置并且满足条件才暂停 | 代码运行到当前位置不暂停，但是可以打印变量 |
| 添加方式 | 点击左侧行数位置，或者在行号右键如上图中1 | 在行号右键如上图中2，编辑暂停条件 | 代码运行到当前位置不暂停，但是可以打印变量 |
调用栈信息（Call Stack）
在断点位置可以看到当前函数调用堆栈，并且可以通过点击前序调用栈看到当时执行上下文。
作用域信息（Scope）
当代码暂停在一个位置的时候，可以看到当前调用栈的信息，并且可以通过调试的单步功能，看到变量对应变化。在对应变量上右键可以将对象保存到全局变量中，方便在控制台额外处理。
额外脚本 （Snippets）
在左侧可以找到 Snippets 选项，在这里可以创建用于调试的脚本。脚本执行时以当前执行上下文继续执行，可以调试当前的变量。
常用的使用场景比如，在 promise 或者事件订阅，需要异步处理的情况时，在脚本中额外增加一个订阅，可以在脚本中调试值。
另外也可以将 Snippets 当成一个可以调试 JS 的工具，相当于 VS code 的 debug 模式。
覆盖脚本（Overrides）
线上环境的问题修改该怎么验证呢？这就是其中的一个方式。Overrides content 允许我们复制一个文件并且自行修改，并且在执行对应脚本的时候用本地脚本替换在线脚本。
以下可以创建一个选中文件的本地文件副本，如果第一次使用在调试工具上方会存在弹窗请求权限。对应文件会保存在 Overrides 选项卡中。\
如果需要结束本地覆盖，需要在 Overrides 中删除对应文件。对应 network 也有类似的本地 mock 请求的功能。
代码格式化（Pretty print）
线上代码调试的时候有的时候因为打包工具将代码混淆到一行，导致打断点调试不方便。Pretty 功能就解决了这个问题，点击之后将一行代码拆分成多行，并且增加缩进等。
