web-dev-qa-db-ja.com

Chrome要素タブでイベントリスナーブレークポイントを設定するにはどうすればよいですか?

動的に生成されたDOM要素にブレークポイントを設定するのに苦労しています。ここでは、さまざまなイベントハンドラーもJavascriptからバインドされています。これは基本的に、最初に受信したHTTP応答の一部ではなく、純粋にクライアント側で構築された見栄えの良いDOM構造を持っていることを意味します。

問題は、Chromeの[要素]タブでブレークポイントを設定できるのは

  • サブツリーの変更または
  • 属性の変更または
  • ノードの削除

動的に作成されたDOM要素の動的に作成されたイベントリスナーにブレークポイントを設定することは可能ですか? (添付の画像を参照してください。リスナーボディにブレークポイントを設定したい)

enter image description here

最初に受信した静的HTTPコンテンツ応答のみが表示されるため、[ソース/スクリプト]タブも使用できないことに注意してください。また、「イベントリスナー」アコーディオンで参照されているコードでもブレークポイントを設定できません。これは、イベントリスナーが起動されたときではなく、接続されたときにのみ表示されるためです。

何か案は?

14
Captain Fogetti

ソース->イベントリスナーブレークポイントには、イベントのイベントリスナーがトリガーされたときにブレークポイントをアクティブにするためにチェックできる一連のチェックボックスが含まれています。

22
Rob W