在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

我想你可以使用「突變觀察者」。