Javascript 如何跟踪HTML元素的添加？

也就是说，页面上有许多缩小的脚本和iFrame，我想找到脚本中负责HTML元素外观的确切部分

它只是页面主体中的

元素，在一段时间后动态显示

这就是为什么我不能用Chrome开发工具在

elements

选项卡上设置断点

如果我在这个元素出现后设置断点，那么这个断点将在页面重新加载后丢失

---

如果这个小DOM元素在一段时间后出现，而我以前无法在其上设置断点，如何定义该脚本及其哪个部分会在页面上创建它？

使用Chrome中的“性能”选项卡并运行一个简短的性能录制。然后放大并查找DOM元素在瀑布中更改的点。在瀑布中单击该标记，它将告诉您在DOM元素更改时调用了什么方法。通过在脚本中搜索函数调用，您应该能够从那里跟踪它。

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

使用

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

。。。
...

---

您需要在

上设置子树修改断点。每当

的子节点被修改时（例如您正在添加的节点），DevTools就会在导致修改的JS行上暂停。

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