56

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

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

4

3 に答える 3

55

もちろん、Firebug、コンソール、およびブレークポイントとウォッチを追加できるスクリプトタブで問題なく実行できますが、明らかによりスマート/簡単に実行したいと考えています。

EventBugと呼ばれるきちんとした Firebug プラグインがあります。これは、すべてのイベントをログに記録し、イベントの種類ごとにグループ化するだけなので、展開して何がそれらをトリガーしたかを確認できます。

イベントバグのスクリーンショット

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

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

これを試して：

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

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

ここに画像の説明を入力

また、Firebug 用のFireQueryアドオンを試して、DOM 内のどの要素に jQuery イベントが関連付けられているか、およびそれらが何であるかを確認する価値があります。

また、ベンビーの回答が言及しているように、これは webkit の開発者ツールでも可能です。

于 2012-06-19T08:33:53.390 に答える
4

これは Firebug には存在しないと思います。根本的な問題は、API レベルでのサポートの欠如または公開の欠如です。別の方法として、DOM イベントをサブスクライブする方法はいくつかあります: Element.prototype.addEventListener (および window.addEventListener と document.addEventListener と XMLHttpRequest.addEventListener など) は、観察可能でインターセプト可能な「onevent」プロパティを除きます。

しかし、現実的には、WebKit デバッガーと Chromium のデバッガー (追加のポイントを備えた Webkit のデバッガー) を使用すると、アタッチされたリスナーをデバッグして観察できます。場合によっては、あるブラウザーのバグを別のブラウザーでデバッグする方が簡単で、そのブラウザーでバグが発生しない場合でも、アプリケーション/ランタイムの状態をより適切に公開できます。

ここに画像の説明を入力

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

于 2012-07-04T05:44:16.007 に答える