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

「突然変異オブザーバー」を使用できると思います。

Answer 3

Web インスペクター (または Chrome 開発者ツール) を使用して、BODY 要素 (または要素が実際に追加されるより具体的な要素) を右クリックし、コンテキスト メニューで [サブツリーの変更で中断] を選択します。JS コードは、選択した要素のサブツリーが変更される (要素が追加/削除される) たびに壊れます。