Chrome 开发者工具 第十七章（JavaScript断点调试）

在现代Web开发中，JavaScript的调试是一个不可或缺的环节。调试过程中，断点的设置是核心技能之一，它允许开发者在代码的特定位置暂停执行，以便更好地理解和修复问题。在本文中，我们将深入探讨不同类型的断点以及它们的使用场景。

首先，我们来看看代码行断点，这是最常用的断点类型。当你知道需要检查的确切代码位置时，设置代码行断点是非常直接的。在Chrome开发者工具中，你只需打开源代码/来源标签页，找到对应的代码行，然后点击行号旁边的空白区域即可添加断点。

代码行断点也可以使用debugger语句放在代码中

function handleButtonClick() {
    debugger
    const iNumber1=oNumber1.value;
    const iNumber2=oNumber2.value;
    const sum = iNumber1 + iNumber2;
    oResult.innerText = sum;
}

但是，当你面对一个大型的代码库或不确定问题出现的位置时，仅仅使用代码行断点可能效率不高。这时，其他类型的断点就显得尤为重要。例如，条件代码行断点允许你在满足特定条件时才暂停执行。这在循环或条件分支中特别有用，你可以设置一个表达式，只有当表达式为true时，代码才会在该行暂停。
可以右击行号，选择“添加条件断点”

也可以点击已有的断点右侧的编辑按钮，输入条件

日志点（Logpoints）是另一种有趣的断点类型，它允许你在不暂停代码执行的情况下，将信息打印到控制台。这对于快速检查变量值或执行流程而不中断程序运行非常有帮助。
右击行号，选择“添加日志点”

输入console.log()里的参数

执行代码，在控制可看到

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

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

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

DOM断点让你能够在特定DOM节点发生变化时暂停，这对于调试DOM操作非常有效。
在元素面板，右击对应的DOM树节点，在弹出的菜单中选择“发生中断的条件”，之后可以选择进入断点的条件：子树修改、属性修改、移除节点

• 子树修改：在移除或添加当前所选节点的子级，或更改子级的内容时触发。在子节点属性更改或对当前所选节点进行任何更改时不触发。
• 属性修改：在当前所选节点上添加或移除属性时，或属性值发生更改时触发。
• 节点移除：在移除当前选定的节点时触发。

类似地，XHR断点可以在发起XHR请求时暂停，这对于分析和调试网络请求相关的代码非常有用。
切换到“源代码/来源”面板，点击“XHR/提取断电”面板右侧的➕按钮，在输入框中输入字符串，当此字符串出现在 XHR 请求网址的任意位置时，开发者工具会暂停。

事件监听器断点允许你在特定事件被触发时暂停代码执行，例如上一章节中的案例，这对于理解和调试事件驱动的代码行为至关重要。

异常断点则可以在抛出异常时暂停，无论异常是被捕获还是未被捕获，这使得异常处理的调试变得更加直观。
在断点窗格中，勾选“遇到未捕获的异常时暂停”

在断点窗格中，勾选“在遇到异常时暂停”

通过本文的深入分析，你将获得一套完整的JavaScript断点调试技能，这将极大提升你的调试效率和代码质量。记住，熟练使用开发者工具中的断点功能，是成为一名高效前端开发者的关键步骤。