Firebugまたは同様のツールを使用してJavaScript / jQueryイベントバインディングをデバッグする方法

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

アプリケーションのソースを編集する機能がある場合は、ドリルダウンして一連のFirebug console.log()ステートメントとコメント/コメント解除コードを追加して、問題を特定します。しかし、アプリケーションコードを編集できず、Firebugまたは同様のツールを使用してFirefoxで完全に作業する必要があると仮定します。

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

要素に関連付けられたすべてのイベントを表示できるVisual Eventと呼ばれる便利なブックマークレットがあります。さまざまなタイプのイベント（マウス、キーボードなど）の色分けされたハイライトがあります。それらにカーソルを合わせると、イベントハンドラーの本体、接続方法、およびファイル/行番号（WebKitおよびOpera上）が表示されます。イベントを手動でトリガーすることもできます。

要素にアタッチされているイベントハンドラーを検索する標準的な方法がないため、すべてのイベントを見つけることができませんが、jQuery、Prototype、MooTools、YUIなどの一般的なライブラリで動作します。

FireQueryを使用できます。Firebugの[HTML]タブのDOM要素に関連付けられているイベントが表示されます。また、を介して要素にアタッチされたデータも表示されます$.data。

以下は、特定の要素/イベントのすべてのイベントハンドラーをリストできるプラグインです。

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

次のように使用します。

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});

Src：（私のブログ）-> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

WebKit Developer Console（Chrome、Safariなどにあります）を使用すると、要素の添付イベントを表示できます。

このスタックオーバーフローの質問の詳細

$._data(htmlElement, "events")jquery 1.7以降で使用します。

例：

$._data(document, "events") または $._data($('.class_name').get(0), "events")

同僚が示唆したように、console.log>アラート：

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

jQueryは次の場所にイベントを格納します。

$("a#somefoo").data("events")

を実行するconsole.log($("a#somefoo").data("events"))と、その要素に関連付けられているイベントが一覧表示されます。

最新のChrome（v29）でDevToolsを使用するこれらの2つのヒントは、イベントのデバッグに非常に役立ちます。

1. 最後に選択されたDOM要素の jQueryイベントのリスト

   • ページの要素を検査する
   • コンソールで次のように入力します。

     $ ._ data（$ 0、 "events"）// jQuery 1.7+を想定

   • 関連付けられているすべてのjQueryイベントオブジェクトを一覧表示し、対象のイベントを展開して、「handler」プロパティの関数を右クリックし、[Show function definition]を選択します。指定した関数を含むファイルを開きます。

2. monitorEvents（）コマンドの利用

FireBugのクルーがEventBugの拡張に取り組んでいるようです。FireBug-Eventsに別のパネルを追加します。

「イベントパネルには、ページ上のすべてのイベントハンドラがイベントタイプ別にグループ化されて表示されます。各イベントタイプを開くと、リスナーがバインドされている要素と関数ソースの概要を確認できます。」EventBug Rising

いつリリースされるかは現時点ではわかりませんが。

ChromeストアでもjQueryデバッガーを見つけました。domアイテムをクリックすると、それにバインドされているすべてのイベントとコールバック関数が表示されます。イベントが適切に削除されていないアプリケーションをデバッグしていたため、数分でそれを追跡できました。もちろん、これはFirefoxではなくChrome用です。

ev 要素の横のアイコン

Firefox開発ツールのインスペクタパネル内には、要素にバインドされたすべてのイベントが一覧表示されます。

最初にCtrl+ Shift+ Cで要素を選択します（例：Stack Overflowの上向き矢印）。

ev要素の右側にあるアイコンをクリックすると、ダイアログが開きます。

||目的のイベントの一時停止記号をクリックすると、ハンドラーの行にデバッガーが開きます。

行の左マージンをクリックすることにより、デバッガーで通常どおりにそこにブレークポイントを配置できます。

これについては、https：//developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listenersで言及されています。

残念ながら、私はこれがprettyficationでうまく機能する方法を見つけることができませんでした。縮小された行で開かれているようです。Firefox / FirebugでJavaScriptとCSSを美化する方法は？

Firefox 42でテスト済み。

このスレッドによると、Firebugには、DOM要素のリスナーにアタッチされているイベントを表示する方法はありません。

あなたができる最善のことは、tj111が示唆すること、またはHTMLビューアで要素を右クリックして[イベントのログ]をクリックすることで、特定のDOM要素に対して発生しているイベントを確認できるようです。私は、特定の関数を発火させることができるイベントを確認するためにそれを行うことができると思います。

バージョン2.0では、Firebugはイベントパネルを導入しました。このパネルには、HTMLパネル内で現在選択されている要素のすべてのイベントが一覧表示されます。

また、[ ラップされたリスナーを表示 ]オプションがチェックされている場合は、jQueryイベントバインディングにラップされたイベントリスナーを表示できます。このオプションは、[ イベント ]パネルのオプションメニューからアクセスできます。

このパネルを使用すると、イベントハンドラーをデバッグするワークフローは次のようになります。

1. デバッグするイベントリスナーを持つ要素を選択します
2. [ イベント]サイドパネル内で、関連するイベントの下の関数を右クリックし、[ ブレークポイントの設定]を選択します
3. イベントをトリガーする

=>スクリプトの実行はイベントハンドラー関数の最初の行で停止し、ステップデバッグできます。

Firebug 2には、DOMイベントのデバッグ/検査が組み込まれています。