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

问题描述 投票:0回答:1

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

<span>
是新添加的,里面有一个
<span>
,有时还有
<a>

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

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

<span>
时,断点不会被触发。

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

javascript dom google-chrome-devtools firefox-developer-tools
1个回答
0
投票

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

在 Chrome DevTools 中,此选项如下所示:

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

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

data-testid="branch-info-bar"

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.