[解決済み] JavaScript / jQuery のイベントバインディングを Firebug などでデバッグするには？

質問

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

もし私がアプリケーションのソースを編集する能力を持っていたら、ドリルダウンして、たくさんの ファイアバグ console.log() ステートメントやコードのコメント/アンコメントの一部を使用して、問題を特定しようとします。しかし、アプリケーションのコードを編集することができず、Firefox で Firebug または同様のツールを使用して完全に作業する必要があると仮定します。

Firebugは、DOMをナビゲートして操作するのに非常に優れています。しかし、これまでのところ、Firebugでイベントデバッグを行う方法を見つけ出すことができません。具体的には、ある時点で特定の要素にバインドされているイベントハンドラの一覧を表示したいだけです（Firebug の JavaScript ブレークポイントを使って変更をトレースします）。しかし、Firebugはバインドされたイベントを見る機能を持っていないか、私がそれを見つけるにはあまりにも間抜けです。）

何かお勧めの方法やアイデアがあれば教えてください。理想的には、今日のDOMを編集できるのと同じように、要素にバインドされたイベントを見たり編集したりしたいです。

どのように解決するのですか？

参照 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!') }"
  })