chrome断点breakpoint类型

在前端开发中，调试是一项必不可少的技能。Chrome DevTools 作为一款强大的开发工具，为我们提供了丰富的调试功能，其中断点的设置更是让我们能够深入了解代码的执行过程。

代码行断点

代码行断点是最常用的断点类型，顾名思义就是在具体的资源文件中的某一行代码设置断点。

只需打开源代码面板，找到对应的代码行，然后最左侧点击行号旁边的空白区域即可添加一个普通断点。

也可右键菜单进行添加：

也可以在JS代码中设置断点关键字，debugger等价于一个代码行断点。

但当面对不确定问题出现的位置时，仅仅使用代码行断点可能效率不高。这时，其他类型的断点就显得尤为重要。

条件断点

条件代码行断点：允许在满足特定条件时才暂停执行，条件可使用当前代码上下文中的变量。

使用场景：在循环或条件分支中特别有用，可以设置一个表达式，只有当表达式为true时，代码才会在该行暂停。

可以右击行号，选择添加条件断点。

设置条件：

成功添加条件断点： 

此时，会跳过 i 为 0 - 3，直接在在 i 为 4 的时候中断代码执行。如果是代码行断点，那么这个断点总计会中断5次。

日志点

日志点：允许在不暂停代码执行的情况下，将当前代码环境的变量打印到控制台。非常方便，不用在源码下添加了。

使用场景：对于快速检查变量值或执行流程而不中断程序运行非常有帮助。

右击行号，选择添加日志点：

输入原本需要通过console.log()打印的参数。

执行代码，在控制台可看到输出的结果。

编辑断点

在已有的断点上右击，可以移除、修改、停用断点。

也可以在断点窗格中移除、修改、停用断点。

移除全部断点 

在断点窗格中，右击任意断点，在弹出的菜单中可以选择移除所有断点。

XHR断点

XHR断点：可以在发起XHR请求时暂停，这对于分析和调试网络请求相关的代码非常有用。

切换到源代码面板，点击“XHR/提取断点”面板右侧的＋按钮，在输入框中输入字符串，当此字符串出现在 XHR 请求网址的任意位置时，开发者工具会暂停。

异常断点

异常断点：可以在抛出异常时暂停，无论异常是被捕获还是未被捕获，这使得异常处理的调试变得更加直观。

在断点窗格中，勾选遇到未捕获的异常时暂停。

勾选在遇到异常时暂停。