Javascript、動的なイベントのトリガーを特定するには？

Puppeteerでサイトへアクセスし、スクリーンショットを保存するというコードを書いています。

Javascript
1const element = document.getElementById('xxx');
2element.parentNode.removeChild(element);

上記のようなコードで、広告などの不要な要素を削除しているのですが
削除してもすぐに同じ要素が復活してしまうものがあります。

サイト側のJavascriptでイベントリスナーなどで要素を監視していて、動的に要素を追加しているのだと思います。

Puppetterではなく、普通のChromeブラウザでデベロッパーツールを開き、Elementsタブから要素を右クリックして「Delete Element」を実行した場合も現象は再現します。

・どのように要素の変更を監視しているのか？
・イベントが発火した時に具体的にどのようなコードが走り削除した要素が復活するのか
を特定したいです。

「PuppeteerとDOMの削除」に限らず、
たとえば、「ボタンをクリックしたらモーダルが開く」みたいな動きがあったときに
・どこでクリックの有無を監視しているのか？
・クリックが発生した時にモーダルが開くのはコードのどの部分が該当するのか？
・そのコードはhtmlに<script>タグでベタ書きされているのか、外部のjsファイルを読み込んで実行しているのか？
みたいなことを、第三者が作成したサイトに対して調べることは可能でしょうか？

yambejp

2021/05/31 08:18

広告の削除自体が規約違反なのでは？

Lhankor_Mhy

2021/05/31 08:34

クリックイベントなんかは、デベロッパーツールに書いてませんでしたっけ？

teraha

2021/05/31 09:31

トリガーになっているDOMが特定できていれば、デベロッパーツールのElements で該当DOMを選択すれば Event Listenersというのが確認できます。しかし、トリガーになっているDOMが特定できていないとこの手段は使えません。たとえば「ボタンをクリックするとモーダルが開く」の例だと、ボタン自体にクリックイベントが設定されていれば確認できます。しかし、ボタンの親の親の親要素にクリックイベントが設定されているみたいなケースだとボタンのDOM自体を調べてもどこからイベントを継承しているのか特定が難しいです。

Lhankor_Mhy

2021/05/31 09:59

回答にあるような、祖先にさかのぼってリスナを見たり、ブレイクポイントを置くやり方がダメとなると、他には難しいでしょうね。