web-dev-qa-db-ja.com

Firefoxを使用して、発生したすべてのイベントを監視するにはどうすればよいですか？

イベントを多用するWebページをデバッグしようとしているため、発生するすべてのイベントを監視する必要があります。

ほとんどのイベントはjQueryを使用してバインドされます。したがって、これらのイベントのみを具体的に監視する方法があれば、特に役立ちます。

javascriptjqueryfirefox-addonjquery-eventsjavascript-debugger
45
gsharp

もちろん、 Firebug 、ブレークポイントとウォッチを追加できるコンソールとスクリプトタブでうまくできますが、明らかに賢く/簡単にしたいです。

EventBug と呼ばれるきちんとしたFirebugプラグインがあります。これはすべてのイベントをログに記録し、イベントタイプごとにグループ化するので、展開してトリガーの原因を確認できます。

EventBug Screenshot

EventBugはリアルタイムではありませんが、更新する必要があります。

もう1つの方法は、FirebugのDOM要素に対して「ログイベント」機能を使用することです。これはリアルタイムで行われ、どの順序イベントが発生/トリガーされるかを確認できます。

これを試して：

  • Firebugを開く
  • HTMLタブで要素を右クリックし、すべてのイベントを表示する場合は、<body>を右クリックします
  • コンテキストメニューからLog Eventsを選択します
  • [コンソール]タブが有効になっていることを確認します
  • 「コンソール」タブで「持続」モードを有効にするためにクリックします（そうでない場合、ページがリロードされると「コンソール」タブがクリアされます）
  • Closedを選択する必要がある場合があります（手動）
  • 出来上がり！コンソールタブでイベントストリームを見る

これは、ログイベントで表示されるものです。

enter image description here

また、Firebugの FireQuery アドオンを試して、DOMのどの要素にjQueryイベントがアタッチされているか、そしてそれらが何であるかを確認する価値があります。

そして、benvieの答えが述べているように、これはwebkitの開発者ツールでも同様に可能です。

51
Moin Zaman

これはいくつかのバージョン前に導入されましたが、Firefox 35現在、要素に関連付けられたイベントはインスペクターで見ることができます：イベントを表示したい要素の隣（ある場合） EV 'の手紙。クリックすると、その要素のイベントを示す小さなポップアップウィンドウが表示されます。

Firefox events inspector

詳細： http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/

11
AxeEffect

これはFirebugには存在せず、根本的な問題は、APIレベルでのサポートの欠如または露出の欠如です。代わりに、DOMイベントをサブスクライブする方法はいくつかあります：Element.prototype.addEventListener（およびwindow.addEventListenerとdocument.addEventListenerとXMLHttpRequest.addEventListenerおよび他のいくつか）は、観察可能でインターセプト可能な「onevent」プロパティを除きます。

しかし現実的には、WebKitデバッガーとChromiumのデバッガー（Webkitの追加ポイント）により、接続されたリスナーをデバッグおよび監視できます。ブラウザーがバグを示さない場合でも、あるブラウザーのバグを別のブラウザーでデバッグする方が、アプリケーション/実行時の状態をより適切にデバッグする方が簡単な場合があります。

enter image description here

https://developers.google.com/chrome-developer-tools/docs/elements

4
user748221