文章来源：(https://github.com/CompileYouth)
Sources面板
面板被分为左中右三个部分，左边是文件导航，中间是文件的具体内容，右边可以统称为调试面板。
左侧的文件导航包括：
- Sources：展示网页所用到的所有文件
- Content scripts：Content scripts 指的是 Chrome 拓展注入在网页中的脚本。比如安装的AdBlock扩展程序就可以在这里看到。
- Snippets：Snippets 的含义是片段，在这里指的是一小段程序，这个一小段程序跟在其他地方不一样的是，可以访问这个页面中的变量和函数等。
除此之外，在中间的面板上，左下角的{}可以格式化代码，当代码被压缩时尤其有用。
添加断点和断点类型
添加断点
在中间的代码中，展示了代码的行号，在行号上点击，为相应的行添加断点。如果一条语句由多行组成，如果在这条语句的行中添加断点的话，那么断点将会被加到下一条语句。
条件断点
右键一个没有添加断点的行号，选择 “Add conditional breakpoint”，输入你的条件，当条件满足时，断点才会生效。
断点的其他操作
- 忽略：如果你想暂时忽略某个断点，右键断点，选择 “Disable breakpoint”。
- 修改(edit breakpoint)：修改断点生效的条件。你可以将一个非条件断点通过这个方式修改成条件断点，也可以将条件断点变成非条件断点。
- 删除：你可以直接点击断点，或者右键 “Remove breakpoint”
黑盒脚本(Blackbox Script)
项目引用第三方库，调试时断点在进入下一步时会突然跳到第三方库或框架的源码上，右键行号的第一个选项Blackbox Script，它会将脚本文件标记，不仅普通的断点不能访问这个标记的脚本，其他的DOM断点、事件断点都无法访问这个脚本文件的内部。
Breakpoints
在Sources右侧的选项中包含了Breakpoints，会显示你所有的通过行号留下的断点。通过右键管理某个或全部断点。
- Remove Breakpoints：删除选中的断点
- Deactivate Breakpoints：暂时忽略所有断点
- Disable all Breakpoints：功能同上（与上一功能有细微差别，但表现类似）
- Remove all Breakpoints：删除所有断点
DOM Breakpoints
切换到Elements面板，右键body元素，最后一项中break on => “attribute modifications breakpoint”，body就会加入DOM断点中。
XHR Breakpoints
XHR断点跟 DOM 断点很类似，通过 XHR 断点可以很容易的找到 ajax 调用的触发点和调用堆栈。为所有 ajax 调用添加断点，或者都不添加断点。
Global Listeners
显示全局监听器，在浏览器中 window 是全局对象，所以在 Global Listeners 面板中显示绑定在 window 对象上的事件监听。比如绑定window事件：1
2
3window.onscroll = function(){
console.log(1);
}
那么在该选项中可以看到scroll事件，包括事件捕获、passive、once，事件handler
Event Listener Breakpoints
展开 Event Listener Breakpoints可以看到一组事件类型，展开一个事件类型可以看到具体的事件名称。比如在mouse下双击，再勾选click，当页面发生点击事件时，就会进入断点测试。
异常中断(Pause on exceptions)
右侧的面板上有一排功能按钮组，其中的异常中断(Pause on exceptions)，当执行的脚本出现异常时会触发中断。
断点测试
功能按钮
从左往右依次是：
- Resume script execution：当程序中断在断点处时，点击去往下一个断点
- 当断点在循环的内部时，长按以上这个按钮，松开，再长按松开，此时会忽略任何断点，当断点出现在循环内部时一般比较有用
- Step over next function call(F10)：执行下一条语句
- Step into next function call(F11)：当断点停留在一个函数调用处时，点击这个按钮会进入函数内部，而上面的按钮则会执行函数调用的下一句，不会进入函数内部
- Step out of current function：当断点停留在函数内部时，点击这个按钮则会跳出函数内部，停留在函数调用的下一个语句
- Deactivate Breakpoints：在不取消断点标记的情况下，使得所有断点失效
Scope
Scope显示了你当前定义的所有属性的值。除了 Scope 面板，你还可以在左侧的代码区域，断点的旁边看到语句中包含的变量的值。除此以外，你还可以把鼠标放在变量上面，也显示对应变量的值。
Scope会显示三种类型的值： Local、Closure 和 Global。在使用闭包时，closure可以很方便的看到闭包的变量对象。
Call Stack
它会显示代码的执行路径，函数的完整调用栈信息。如果你在之前的断点中加入了黑盒脚本(Blackbox Script)，那么在调用栈中也是不可见的，此时会提示：frames are hidden(black-boxed)。