Chrome DevToolsの要素で発生したイベントを表示するにはどうすればよいですか？

ライブラリのページにカスタマイズ可能なフォーム要素があります。使用するイベントハンドラーを見つけようとしているので、それとやり取りするときにどのJavaScriptイベントが発生するかを確認したいと思います。

Chrome Web Developerを使用してどうすればよいですか？

• ヒットF12して開発ツールを開く
• [ソース]タブをクリックします
• 右側で、[イベントリスナーブレークポイント]までスクロールし、ツリーを展開します。
• 聞きたいイベントをクリックします。
• ターゲット要素を操作します。ターゲット要素が起動すると、デバッガーにブレークポイントが表示されます

同様に、ターゲット要素を右クリックして、「要素の検査」を選択できます。開発フレームの右側を下にスクロールします。下部にあるのは「イベントリスナー」です。ツリーを展開して、要素に関連付けられているイベントを確認します。これがバブリングによって処理されるイベントで機能するかどうかはわかりません（私はそうではないと思います）

monitorEvents関数を使用できます。

要素を確認し（right mouse click→ Inspect表示されている要素で→ またはElementsChromeデベロッパーツールのタブに移動して必要な要素を選択）、Consoleタブに移動して次のように記述します。

monitorEvents($0)

この要素の上にマウスを移動するか、要素にフォーカスまたはクリックすると、発生したイベントの名前とそのデータが表示されます。

このデータの取得を停止するには、これをコンソールに書き込むだけです。

unmonitorEvents($0)

$0Chromeデベロッパーツールによって選択された最後のDOM要素です。そこに他のDOMオブジェクトを渡すことができます（たとえば、getElementByIdまたはの結果querySelector）。

イベントの「タイプ」を2番目のパラメータとして指定して、監視対象のイベントを事前定義されたセットに絞り込むこともできます。例えば：

monitorEvents(document.body, 'mouse')

この利用可能なタイプのリストはここにあります。

この機能がどのように機能するかを示す小さなgifを作成しました。

ビジュアルイベントは、要素のイベントハンドラーを表示するために使用できる素敵な小さなブックマークレットです。オンラインデモはこちらからご覧いただけます。

jQuery（少なくともバージョン1.11.2）の場合、次の手順でうまくいきました。

1. 要素を右クリックして「Chrome Developer Tools」を開きます
2. タイプ$._data(($0), 'events');「コンソール」で
3. アタッチされたオブジェクトを展開し、handler:値をダブルクリックします。
4. これは、添付された関数のソースコードを示しています。[検索]タブを使用して、その一部を検索します。

そして、車輪の再発明をやめて、バニラJSイベントの使用を開始する時が来ました... :)

jqueryプラグインの場合、スクリプトが作成するようなカスタムイベントは表示されません。例えば ​​：

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Chrome開発ツールのスクリプトの下にあるイベントパネルに「Something：custom-event-one」と表示されない