浏览器DevTools的Sources工具使用

• 文档：“来源”面板概览 | Chrome DevTools | Chrome for Developers

左侧区域

Page

页面源代码

Workspace

（https://developer.chrome.com/docs/devtools/workspaces?hl=zh-cn）：将本地项目文件夹映射到一个工作区，就相当于这个工作区是一个编辑器，在工作区修改的内容会直接同步修改至本地文件

Overrides

（https://developer.chrome.com/docs/devtools/overrides?hl=zh-cn）：覆盖网络请求文件。可以将网络请求的数据资源手动替换掉

Content Scripts

（https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=zh-cn）：脚本，也就是浏览器扩展

Snippets

（https://developer.chrome.com/docs/devtools/javascript/snippets?hl=zh-cn）：代码片段，本地保存，不能云同步

中间区域

资源文件预览/编辑器

• 代码行断点
• 条件断点

右侧区域

命令

• F8：下一断点
• ······

1. 定位源码区域，可以自行设置断点
2. 变量区域，可以了解执行区域函数里面的具体变量值
3. 调用栈，可以回溯调用
4. 命令调试

F8：下一个断点处

F9：下一步如果是调用函数，则进入函数内

F10：下一步如果是调用函数，则跳过函数

F11：和F9作用几乎一致，F11执行异步代码会进入，F9会跳过

Shift+F11：跳出当前函数

Watch

变量监听

BreakPoints

（https://developer.chrome.com/docs/devtools/javascript/breakpoints?hl=zh-cn#exceptions）

（异常捕获断点）

• Pause on uncaught exceptions：没有捕获到的异常

• Pause on caught exceptions：已捕获到的异常

下面区域就是正常打的断点

Scope

作用域（global全局······）

Call Stack

调用栈。右键某一个调用栈的Restart frame选项，可以从该步重新执行

XHR/fetch Breakpoints

对于网络请求断点

DOM Breakpoints

• 右键DOM的Break on，可以选择断点类型，当DOM断点类型触发，则会被捕获

• 子树修改。当移除或添加当前所选节点的子项，或更改子项的内容时触发。在子节点属性发生更改或对当前所选节点进行任何更改时不触发。
• 属性修改：在当前所选节点上添加或移除属性，或属性值发生更改时触发。
• 节点移除：在移除当前选定的节点时触发。

Global Listeners

指的是绑定在 window 对象上的事件

Event Listeners Breakpoints

所有的事件函数被触发断点

SCP Violation Breakpoints