☰

Firebug または類似のツールを使用して JavaScript / jQuery イベントバインディングをデバッグするにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript jquery event-handling firebug jquery-events
Firebug または類似のツールを使用して JavaScript / jQuery イベントバインディングをデバッグするにはどうすればよいでしょうか? 質問する

jQueryを使ってかなり複雑で面倒なことを行うWebアプリケーションをデバッグする必要があります。DOM操作。ある時点で、特定の要素にバインドされたイベントの一部は発生せず、動作を停止します。

アプリケーションソースを編集する機能があれば、ドリルダウンしてたくさんのファイアバグ console.log()ステートメントとコード部分のコメント/コメント解除を行って、問題を正確に特定します。ただし、アプリケーション コードを編集できず、Firebug または同様のツールを使用して Firefox で完全に作業する必要があると仮定します。

Firebug は、DOM をナビゲートして操作するのに非常に優れています。しかし、これまでのところ、Firebug でイベントをデバッグする方法がわかりません。具体的には、特定の時間に特定の要素にバインドされたイベント ハンドラーのリストを表示したいだけです (Firebug JavaScript ブレークポイントを使用して変更をトレースします)。しかし、Firebug にはバインドされたイベントを表示する機能がないか、私がそれを見つけるのが下手すぎます。:-)

何か推奨事項やアイデアはありますか? 理想的には、現在の DOM を編集する方法と同様に、要素にバインドされたイベントを表示および編集したいだけです。

ベストアンサー1

見るDOMノード上のイベントリスナーを見つける方法。

簡単に言うと、ある時点でイベント ハンドラーが要素にアタッチされていると仮定します (例):$('#foo').click(function() { console.log('clicked!') });

次のように検査します:

  • jQuery 1.3.x

    var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
  console.log(value) // prints "function() { console.log('clicked!') }"
})

  • jQuery 1.4.x

    var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})

見るjQuery.fn.data(jQuery がハンドラーを内部的に格納する場所)。

  • jQuery 1.8.x

    var clickEvents = $._data($('#foo')[0], "events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})

おすすめ記事