javascript - Safari 上的调试功能以了解何时将元素添加到页面

Question

Safari 上是否有可用的工具来确定何时将新元素添加到页面。我有一个页面，其中添加了不可见的元素，导致页面滚动。我认为原因所在的元素，似乎不是。我想知道是否有办法找出来。

Answer 1

Safari 的内置调试工具仅限于 Chrome 和 Firefox 提供的工具，据我所知，您无法设置断点来检测何时插入节点。

如果你真的坚持使用 Safari 进行调试，你可以使用如下事件监听器：

document.addEventListener('DOMNodeInserted', function (event) {
    console.log('This element was added to the page:', event.target);
});

Answer 2

使用 Web Inspector（或 Chrome 开发人员工具），右键单击 BODY 元素（或更具体的元素，实际添加元素的位置），然后在上下文菜单中选择“中断子树修改”。只要选定元素的子树被修改（添加/删除元素），您的 JS 代码就会中断。

Answer 3

我认为您可以使用“突变观察者”。