Web Inspector 参考 DOM 断点

一旦添加了DOM 断点，它将同时显示在元素选项卡中的DOM 树和源代码选项卡中的导航侧边栏中，并且可以从两者中启用/禁用/移除。就像在源代码选项卡中一样，点击元素选项卡中的DOM 树里的 [DOM 断点] 将切换DOM 断点的启用/禁用状态。

如果DOM 断点已添加到子 DOM 节点，并且元素选项卡中的DOM 树中折叠了某个祖先/父 DOM 节点，则 [后代 DOM 断点] 将显示在最近的可见祖先上。右键单击它（或关联 DOM 节点上的任何位置）将显示启用后代断点 / 禁用后代断点、删除后代断点和显示后代断点的选项。

DOM 断点在 Web Inspector 会话之间是保留的，但只有当当前页面中存在与该DOM 断点的标签路径（即标签名和在父节点中一直到根节点的索引）匹配的 DOM 节点时，它们才会被重新添加（例如，如果<body>的第二个子节点不是<div>，则标签路径为body > div:nth-child(2)的DOM 断点将不会显示）。

DOM 断点有三种不同类型：子树修改、属性修改和节点移除。

子树修改

当任何 DOM 节点被添加/移除到关联 DOM 节点的子树时，此类型的DOM 断点将暂停 JavaScript 执行。

然而，这不限于直接后代，因此在<body>上设置子树修改DOM 断点，将导致每次任何 DOM 节点从<body>的任何后代中添加/移除时，都暂停 JavaScript 执行。

属性修改

当关联 DOM 节点上的任何属性被修改时，此类型的DOM 断点将暂停 JavaScript 执行。

这包括添加新属性时（例如setAttribute）和完全移除现有属性时（例如removeAttribute）。

节点移除

此DOM 断点非常直观，它会在关联 DOM 节点从DOM 树中移除时暂停 JavaScript 执行。

这也包括当关联 DOM 节点的祖先从DOM 树中移除时。

节点移除DOM 断点完全“覆盖”在祖先 DOM 节点上设置的子树修改DOM 断点，这意味着在任何祖先 DOM 节点上设置的任何子树修改DOM 断点都不会触发。

配置

DOM 断点有几个不同的配置选项，通过右键单击并在上下文菜单中选择编辑断点...可以访问。

条件输入允许您限制DOM 断点仅在给定 JavaScript 评估为真值时暂停 JavaScript 执行。这对于您只想在满足特定条件（例如变量具有特定值）时暂停 JavaScript 执行的情况非常有用。请记住，所包含的 JavaScript 在达到DOM 断点时进行评估，并可能根据您作为条件运行的代码引起额外的副作用。

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

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

日志消息

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

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

添加其中一个将导致 Web Inspector 在每次触发DOM 断点时播放系统蜂鸣声。
探测表达式

探测表达式几乎可以被视为一个迷你控制台。每次触发相关的DOM 断点时，探测表达式都会被评估，结果将保存在源代码选项卡中详细信息侧边栏的探测面板中，让您能够看到表达式的结果在程序生命周期中如何变化。您可以使用它来观察特定变量（例如this）的变化，或整个表达式（例如this.foo === "bar"）的变化。