DevTools“子树修改中断”未在 github.com 上触发

Question

分叉的 GitHub 存储库的网页显示诸如“此分支落后 10 次提交”之类的信息。过去是静态 HTML，但现在文本出现延迟。具体来说，一个

<span>

是新添加的，里面有一个

<span>

，有时还有

<a>

。

我正在尝试查找哪些代码添加了该信息（以及该信息在特定情况下来自何处）。

我在 DevTools 中对父/祖先元素使用“子树修改中断”。重新加载页面后，该断点在某些情况下仍然存在（可能取决于我将其添加到哪个 HTML 元素）。但由于某种原因，当添加

<span>

时，断点不会被触发。

为什么没有触发“子树修改中断”，以及如何找出哪些代码添加了额外的 DOM 元素？

Answer 1

DOM 突变断点目前无法在页面重新加载后继续存在。这意味着，您必须在修改祖先元素之前设置“子树修改中断”。如果内容在页面加载后立即加载，就像在这种情况下，你必须要快。 在这种情况下，您可以限制网络速度，以便有更多时间设置断点。您可以在“网络”面板中执行此操作。

在 Chrome DevTools 中，此选项如下所示：

在 Firefox DevTools 中它看起来像这样：

将网络速度降低到一些较慢的连接，例如“慢 3G”/“好 2G”，然后切换回 Elements/Inspector 面板，并设置选项以中断祖先元素上的子树修改（带有

data-testid="branch-info-bar"

的元素） ）在这种情况下。

然后脚本执行将在元素被追加到 DOM 的行处停止。

对于这种情况，这会在脚本remove-child-patch.ts处停止（使用Firefox调试器和源映射进行检查以查看原始源）：