用好debug可以使得分析代码和解决bug事半功倍。
一. 基本使用
最基本的使用方式建chrome dev tools官方文档，说的已经比较详情，此处把链接搬了过来：
https://developers.google.com/web/tools/chrome-devtools/javascript
二.条件断点
- 先在需要断点的代码行端点，红色圆圈展示出来
-
在这个断点上右键，点击[Edit breakpoint...]
条件断点 -
输入条件断点
输入条件表达式，比如下图
输入条件表达式 -
输入完成条件表达式，回车就会得到条件断点，只有满足你输入的条件才会断到这里。半填充的圆代表是条件断点。
半填充的圆代表是条件断点
异常断点
当遇到异常时断点，方便调试异常出现的位置。
调试面板中的7变形按钮变成蓝色表示开启异常断点，下面的复选框选上代表捕获异常也会被断住，否则只断住非捕获异常。
异常断点
函数断点
如果想要在调用特定函数时暂停，可以调用 debug(functionName)，其中 functionName 是要调试的函数。 您可以将 debug() 插入您的代码（如 console.log() 语句），也可以从 DevTools 控制台中进行调用。 debug() 相当于在函数第一行中设置代码行断点。
括号里是标准的函数调用。
function sum(a, b) {
let result = a + b; // DevTools pauses on this line.
return result;
}
debug(sum(2, 3)); // Pass the function object, not a string.
sum(2,3);
确保目标函数在作用域范围内
如果想要调试的函数不在作用域范围内，DevTools 会引发 ReferenceError。
如果是从 DevTools 控制台中调用 debug()，则很难确保目标函数在作用域范围内。 下面介绍一个策略：
- 在函数在范围内时设置代码行断点
- 触发此断点。
- 当代码仍在代码行断点位置暂停时，即于 DevTools 控制台中调用
debug()。
如果对您有帮助，就打赏一下吧，哈哈哈
