717

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

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

4

5 に答える 5

992
  • ヒットF12して開発ツールを開きます
  • [ソース] タブをクリックします。
  • 右側で、[Event Listener Breakpoints] まで下にスクロールし、ツリーを展開します。
  • リッスンするイベントをクリックします。
  • ターゲット要素と対話します。それらが起動すると、デバッガーでブレークポイントが取得されます

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

于 2012-04-18T16:29:12.267 に答える
975

monitorEvents関数を使用できます。

要素を検査するだけで（right mouse click→Inspect表示されている要素で、またはElementsChrome 開発者ツールのタブに移動して必要な要素を選択します）、Consoleタブに移動して次のように記述します。

monitorEvents($0)

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

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

unmonitorEvents($0)

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

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

monitorEvents(document.body, 'mouse')

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

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

monitorEvents 関数の使用法

于 2013-04-10T10:50:36.873 に答える
26

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

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

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

jquery クリック ハンドラ関数の検索方法

于 2016-07-14T15:11:53.707 に答える
16

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」が表示されない

于 2012-07-15T23:42:22.130 に答える