web-dev-qa-db-ja.com

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

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

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

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

何かアドバイスやアイデア？理想的には、今日DOMを編集する方法と同じように、要素にバインドされたイベントを見て編集したいだけです。

javascriptjqueryjavascript-eventsevent-handlingfirebug
598
Jaanus

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

Visual Event という名前のNiceブックマークレットがあり、これは要素に付随するすべてのイベントを表示することができます。さまざまな種類のイベント（マウス、キーボードなど）に合わせて色分けされたハイライトがあります。カーソルを合わせると、イベントハンドラの本文、添付方法、およびファイル/行番号（WebKitとOperaの場合）が表示されます。手動でイベントをトリガーすることもできます。

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

162
Matthew Crumley

Eventbugエクステンションは昨日リリースされました。参照： http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/ /

73
Jan Odvarko

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

41
Shrikant Sharat

これは与えられた要素/イベントのためのすべてのイベントハンドラをリストすることができるプラグインです：

$.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/ /

26
James

WebKit開発者コンソール（Chrome、Safariなどにあります）を使用すると、要素に添付されたイベントを表示できます。

このStack Overflow問題の詳細

23
Cristian Sanchez

Jquery 1.7以降では$._data(htmlElement, "events")を使ってください。

例：

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

11
Tamás Pap

同僚が示唆しているように、console.log> alert：

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

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

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

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

6
Alex Heyd

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

  1. 最後に選択されたDOM要素のjQueryイベントの一覧表示

    • ページ上の要素を調べる
    • コンソールに次のように入力します。

      $ ._ data（ $ 0 、 "events"）// jQueryを1.7以降と仮定

    • それはそれに関連したすべてのjQueryイベントオブジェクトをリストし、興味のあるイベントを展開し、 "handler"プロパティの機能を右クリックして "Show function definition"を選択します。指定された機能を含むファイルを開きます。

  2. monitorEvents （）コマンドを使用する

5
mateuscb

私は jQuery Debugger をクロムストアで見つけました。 DOMアイテムをクリックすると、それにバインドされているすべてのイベントがコールバック関数とともに表示されます。イベントが正しく削除されていないアプリケーションをデバッグしていたので、数分で追跡できました。明らかにこれはクロムのためのもので、Firefoxのものではありません。

4
Rob

FireBugのクルーがEventBugの拡張機能に取り組んでいるようです。 FireBugにもう1つのパネル - イベントが追加されます。

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

それがいつリリースされるのか、彼らは今は言えませんが。

4
jayarjo

evアイコンの横にあるアイコン

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

まず要素を選択します Ctrl + Shift + C例えば、 Stack Overflowの上向きの矢印。

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

events tooltip

必要なイベントの一時停止記号||シンボルをクリックすると、ハンドラの行にデバッガが開きます。

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

これについては、 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners に記載されています。

残念なことに、私はこれがきれいにうまくいく方法を見つけることができませんでした、それはちょうど縮小行で開くようです： Firefox/FirebugでJavascriptとCSSを美しくする方法は？

Firefox 42でテスト済み.

4
Ciro Santilli 新疆改造中心996ICU六四事件

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

あなたができる最善の方法は、tj111が示唆していることか、あるいはHTMLビューアでその要素を右クリックして "Log Events"をクリックすることです。どのイベントcouldが特定の関数を起動しているのかを見るためにそれを行うことができると思います。

3
Daniel Lew

バージョン2.0では、Firebugは Eventsパネル を導入しました。これは 内で現在選択されている要素のすべてのイベントをリストします_ html _パネル 。

*Events* side panel in Firebug

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

そのパネルで、イベントハンドラーをデバッグするワークフローは次のとおりです。

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

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

2
Sebastian Zartner

Firebug 2 はDOMイベントのデバッグ/検査を組み込んでいます。

0
MRalwasser