如何跟踪 HTML 元素的添加？答案

【问题标题】：How to track addition of HTML element?如何跟踪 HTML 元素的添加？
【发布时间】：2019-10-09 02:53:58
【问题描述】：

即页面上有许多缩小的脚本和 iframe，我想找到负责 HTML 元素外观的脚本的确切部分。

它只是页面正文中的<div style="height:120px;"></div>元素，它会在一段时间后动态出现。

这就是为什么我不能使用 Chrome 开发工具在 elements 选项卡上设置断点。

如果我在此元素出现后设置断点，则此断点将在页面重新加载后丢失。

如果它在一段时间后出现并且我之前无法在其上设置断点，如何定义什么脚本和它的哪个部分在页面上创建这个微小的 DOM 元素？

【问题讨论】：

De-minify 并查找 document.createElement。
我更改了标题，因为它看起来好像您是在说 HTML 元素已添加到 DOM，而不是元素的样式已更改？每个跟踪的方法可能不同；你们很多人都想编辑您的问题主体以使其更清晰。

【解决方案1】：

使用subtree modification DOM change breakpoint。

例如，如果您的页面如下所示：

...
<body>
  <main>
    ...
    <div style="height:120px;"></div>
  </main>
</body>

您需要在<main> 上设置子树修改断点。每当<main> 的子节点被修改（例如您的节点被添加）时，DevTools 就会在导致修改的 JS 行暂停。

【讨论】：

【解决方案2】：

如果元素随时间变化，它可能有一个链接事件 - 要检查它，您可以打开 chrome 的“开发者工具”并单击“事件侦听器”，然后选择该元素以查看绑定到它的内容。您也可以点击“Computed”并点击不同的元素来查看它发生了什么变化。

【讨论】：

【解决方案3】：

使用 Chrome 中的“性能”标签并运行简短的性能记录。然后放大并寻找 DOM 元素在瀑布中发生变化的点。单击瀑布中的那个标记，它将告诉您在 DOM 元素更改时调用了哪个方法。您应该能够通过在脚本中搜索函数调用从那里追踪它。

【讨论】：