Web Inspector 参考 事件断点

全局事件断点

这些事件断点可以通过点击 [创建断点] 来添加，该按钮位于源文件标签页中导航侧边栏的断点部分的右上角。

所有动画帧
每当任何 requestAnimationFrame 回调被调用时，执行将在回调内部暂停 JavaScript 执行，但在其任何代码运行之前。
所有定时器
每当任何 setTimeout 回调被调用时，执行将在回调内部暂停 JavaScript 执行，但在其任何代码运行之前。
所有间隔
每当任何 setInterval 回调被调用时，执行将在回调内部暂停 JavaScript 执行，但在其任何代码运行之前。
所有事件
每当任何 DOM 事件触发时，执行将在 DOM 事件监听器回调内部暂停 JavaScript 执行，但在其任何代码运行之前。这包括任何自定义 DOM 事件，例如通过 dispatchEvent 触发的事件。
事件断点… 这将与所有事件事件断点具有相同的效果，但它将仅限于特定的 DOM 事件名称（包括自定义 DOM 事件名称），而不是适用于每个 DOM 事件。

所有全局事件断点在 Web Inspector 会话之间都保留。

特定监听器断点

全局事件断点是查看 DOM 事件是否有任何监听器，或调试与 DOM 事件分发顺序（例如捕获与冒泡）相关问题的好方法。

但有时，问题与特定的 DOM 事件监听器有关，例如特定 DOM 节点上 click DOM 事件的特定回调。

在这些情况下，为 click 设置全局事件断点并不理想，因为可能在其他节点上或使用其他回调触发其他 click DOM 事件。

此外，在回调代码内部设置JavaScript 断点（假设您知道其位置）可能也不理想，因为该回调可能用于其他 DOM 事件回调，甚至可能在与 DOM 事件无关的情况下被调用。

理想的解决方案是能够在回调上设置断点，使得该断点仅在该回调响应特定 DOM 节点上触发的特定 DOM 事件时才触发。

这可以在元素标签页中详情侧边栏的节点面板中的事件监听器部分完成。

事件监听器部分列举了所选 DOM 节点及其所有祖先节点的所有 DOM 事件监听器，并提供每个监听器的信息

目标是 DOM 节点目标的表示。
事件是 DOM 事件的名称。
函数显示有关回调的信息，例如函数名称和/或源代码位置。
捕获仅当该特定 DOM 事件监听器是使用 useCapture 选项添加时才会显示。
冒泡仅当该特定 DOM 事件监听器是在没有 useCapture 选项的情况下（或者如果它被设置为 false）添加时才会显示。
属性仅当该特定 DOM 事件监听器是通过 HTML 属性添加时才会显示。
被动仅当该特定 DOM 事件监听器是使用 passive 选项添加时才会显示。
单次仅当该特定 DOM 事件监听器是使用 once 选项添加时才会显示，这意味着该特定 DOM 事件监听器在执行后将自动移除。

除了这些信息，还有两个复选框

启用，未选中时，将阻止该特定 DOM 节点上该特定 DOM 事件的特定 DOM 事件监听器被触发，有效地“完全移除”该 DOM 事件监听器。
断点，选中时，将设置一个如上所述的特定监听器断点。

事件监听器部分将随 DOM 事件监听器的添加和移除而更新，并且在更改 DOM 节点时，启用和断点的选中状态将保留。

每个子部分在悬停时右上角也会显示一个 [选项]，它提供了一种快速方法来启用/禁用或设置/移除该子部分中所有事件监听器上的特定监听器断点。

通过点击右上角的 [分组方法] 按钮，可以将事件监听器部分从默认的按事件分组更改为按目标分组。

特定监听器断点在 Web Inspector 会话之间不保留。

配置

事件断点有几种不同的配置选项，通过右键单击并在上下文菜单中选择编辑断点…即可访问。

条件输入允许您限制事件断点，使其仅在给定 JavaScript 表达式求值为真值时才暂停 JavaScript 执行。这对于您只想在满足特定条件（例如变量具有特定值）时才暂停 JavaScript 执行的情况非常有用。请记住，当触发事件断点时，其中包含的 JavaScript 会被评估，并且根据您作为条件运行的代码，可能会导致额外的副作用。

然而，您可能不想执行任意代码，而只是想忽略事件断点前几次触发。如果是这种情况，将忽略输入设置为任何正整数将阻止事件断点暂停执行，直到它被触发了那么多次。

现在您可能想知道什么是动作。有四种不同类型

记录消息

这基本上是使用 console.log 记录值的“快捷方式”。您提供的字符串表现得像模板字面量，这意味着只要它在 ${…} 内部，您就可以评估任意 JavaScript。
评估 JavaScript

可以说，这是最强大的事件断点动作，它允许您在触发事件断点时评估任意 JavaScript。给定的 JavaScript 会在代码行之前执行，这意味着它将访问该作用域中相关行之前可用的所有变量。
播放声音

添加其中之一将导致 Web Inspector 在触发事件断点时播放系统提示音。
探针表达式

探针表达式几乎可以看作是一个迷你控制台。每当相关的事件断点被触发时，探针表达式就会被评估，结果会保存在源文件标签页中详情侧边栏的探针面板中，允许您查看表达式的结果在程序生命周期内如何变化。您可以使用它来观察特定变量（例如 this）的变化，或整个表达式（例如 this.foo === "bar"）的变化。