如何在 github.com 上的 DevTools 中中断*稍后*子树修改

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 调试器和源映射进行检查以查看原始源）：

由于这是删除原始内容的代码，但您想要添加新内容的代码，因此您必须忽略该行。在火狐浏览器中 您可以通过右键单击该行并选择“忽略行”来完成此操作。

当您忽略该行时，您可以继续执行脚本，然后脚本将在添加新内容的脚本处停止（react-dom.production.min.js，启用源映射）：