源代码面板

我们可以通过源代码面板中设置断点来调试JavaScript。

断点类别：

1. 行断点，可以在Source面板里添加行断点，也可以通过在代码里添加debugger
2. DOM断点，可以监听DOM的子树变更、属性变更、被移除的操作
3. XHR/Fetch 断点，可以添加URL关键字去捕获URL为该关键字的异步请求
4. 事件监听器断点，展开事件监听器面板可以看到很多事件类别
5. 异常断点，激活Pause on exceptions按钮
6. 函数断点，在函数被执行之前，调用debug(functionName)

在设置行断点的时候，可以添加条件，只有条件满足才会触发断点，这就叫条件断点。通过右键点击行断点并选择Edit breakpoint...

调试JS代码

在Source面板里，我们可以看到如下的工具栏：

从左至右介绍它们：

1. 脚本继续执行，直至到达您设置了断点的代码行
2. 执行代码，但是不跳进其中的函数
3. 执行代码，如果有函数则跳入
4. 跳出函数，返回到之前跳入的代码处
5. 逐步执行代码
6. 激活断点/使所有断点失效
7. 异常断点的开关

在工具栏下面是：

1. Watch，可以添加希望监听的变量，也可以使用typeof指令
2. Call Stack，可以查看到执行上下文调用栈
3. Scope，可以查看本地作用域和全局作用域
4. Breakpoints，行断点集合
5. XHR/fetch Breakpoints，异步请求断点
6. DOM Breakpoints，DOM监听断点
7. Global Breakpoints
8. Event Listener Breakpoints，事件监听器断点

参考

Pause Your Code With Breakpoints
在 Chrome DevTools 中调试 JavaScript 入门