web-dev-qa-db-ja.com

Chrome DevToolsの要素で発生したイベントを表示する方法

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

Chrome Web Developerを使用してそれを行うにはどうすればよいですか。

javascriptgoogle-chrome-devtools
504
John Hoffman
  • ヒット F12 Dev Toolsを開く方法
  • [ソース]タブをクリックします
  • 右側で、「Event Listener Breakpoints」までスクロールダウンして、ツリーを展開します。
  • 聴きたいイベントをクリックしてください。
  • ターゲット要素と対話します。それらが起動した場合は、デバッガにブレークポイントが表示されます。

同様に、ターゲット要素を右クリックしてください - > "inspect element"を選択してください。devフレームの右側を下にスクロールしてください。下部には 'イベントリスナ'があります。ツリーを展開して、どのイベントが要素に添付されているかを確認します。これがバブリングを通して処理されるイベントに機能するかどうかわからない（私はそうではないと思う）

786
Matt

monitorEvents functionを使用できます。

あなたの要素を調べ（表示されている要素のright mouse click→Inspect、またはChromeデベロッパーツールのElementsタブに行き、欲しい要素を選んでください）、Consoleタブに行き、次のように書いてください：

monitorEvents($0)

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

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

unmonitorEvents($0)

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

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

monitorEvents(document.body, 'mouse')

この利用可能なタイプのリストは ここ です。

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

usage of monitorEvents function

697
Mariusz Pawelski

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

24
arwan

JQuery（少なくともバージョン1.11.2）では、以下の手順がうまくいきました。

  1. 要素を右クリックして[Chromeデベロッパーツール]を開きます。
  2. 「コンソール」に$._data(($0), 'events');と入力します。
  3. 添付されたオブジェクトを展開して、handler:値をダブルクリックします。
  4. これは添付の関数のソースコードを表示し、 '検索'タブを使用してその一部を検索します。

そして、ホイールを作り直すのをやめて、Va​​nilla JSイベントを使い始める時が来ました... :)

how-to-find-jquery-click-handler-function

19
Daniel Sokolowski

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);
 })

});

クロム開発者向けツールのスクリプトの下のイベントパネルには "Something：custom-event-one"は表示されません

15
airtonix