前言
📫 大家好，我是陈三心，热爱技术和分享，欢迎大家交流，一起学习进步！
🍅 个人主页：陈三心
目录
Chrome断点调试
在前端开发中，调试是一项必不可少的技能。Chrome DevTools 作为一款强大的开发工具，为我们提供了丰富的调试功能，其中断点的设置更是让我们能够深入了解代码的执行过程。上文告别 Console.log：Chrome 断点调试让排错如此简单已经介绍了断点调试的过程，本文将介绍如何使用 Chrome DevTools 花式打断点，帮助大家提升调试效率和质量。
断点breakpoint类型
代码行断点
代码行断点是最常用的断点类型，顾名思义就是在具体的资源文件中的某一行代码设置断点。
只需打开源代码面板，找到对应的代码行，然后最左侧点击行号旁边的空白区域即可添加一个普通断点。
也可右键菜单进行添加：
也可以在JS代码中设置断点，关键字。debugger等价于一个代码行断点。
debugger // 会在这里断点
console.log('debugger')但当面对不确定问题出现的位置时，仅仅使用代码行断点可能效率不高。这时，其他类型的断点就显得尤为重要。
条件断点
条件代码行断点：允许在满足特定条件时才暂停执行，条件可使用当前代码上下文中的变量。
使用场景：在循环或条件分支中特别有用，可以设置一个表达式，只有当表达式为true时，代码才会在该行暂停。
可以右击行号，选择添加条件断点。
设置条件：
成功添加条件断点：
此时，会跳过 i 为 0 - 3，直接在在 i 为 4 的时候中断代码执行。如果是代码行断点，那么这个断点总计会中断5次。
日志点
日志点：允许在不暂停代码执行的情况下，将当前代码环境的变量打印到控制台。非常方便，不用在源码下添加了。
使用场景：对于快速检查变量值或执行流程而不中断程序运行非常有帮助。
右击行号，选择添加日志点。
输入原本需要通过console.log()打印的参数。
执行代码，在控制台可看到输出的结果。
在已有的断点上右击，可以移除、修改、停用断点。
也可以在断点窗格中移除、修改、停用断点。
移除全部断点。在断点窗格中，右击任意断点，在弹出的菜单中可以选择移除所有断点。
DOM断点
DOM断点：能够在特定DOM节点发生变化时暂停，这对于调试DOM操作非常有效。
在元素面板，右击对应的DOM树节点，在弹出的菜单中选择“发生中断的条件”，之后可以选择进入断点的条件：子树修改、属性修改、移除节点。
- 子树修改：在移除或添加当前所选节点的子级，或更改子级的内容时触发。在子节点属性更改或对当前所选节点进行任何更改时不触发。
- 属性修改：在当前所选节点上添加或移除属性时，或属性值发生更改时触发。
- 节点移除：在移除当前选定的节点时触发。
XHR断点
XHR断点：可以在发起XHR请求时暂停，这对于分析和调试网络请求相关的代码非常有用。
切换到源代码面板，点击“XHR/提取断点”面板右侧的＋按钮，在输入框中输入字符串，当此字符串出现在 XHR 请求网址的任意位置时，开发者工具会暂停。
事件监听器断点
事件监听器断点：允许特定事件被触发时暂停代码执行，对于理解和调试事件驱动的代码行为至关重要。DevTools展示了一个事件目录的列：
选中这些事件类别中的一个做断点，这个断点会在事件触发时进入，或者是选择事件类别下的一个或多个做断点。
异常断点
异常断点：可以在抛出异常时暂停，无论异常是被捕获还是未被捕获，这使得异常处理的调试变得更加直观。
在断点窗格中，勾选遇到未捕获的异常时暂停。
勾选在遇到异常时暂停。
结语
🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~
扫一扫
2668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
