web-dev-qa-db-ja.com

Chromeを使用して、どのイベントが要素にバインドされているかを見つける方法

私のページにリンクがあるとしましょう：

<a href="#" id="foo">Click Here</a>

他には何も知りませんが、リンクをクリックすると、アラート（「バー」）が表示されます。だから私はどこかで、いくつかのコードが#fooにバインドされていることを知っています。

アラート（「バー」）をクリックイベントにバインドしているコードを見つけるにはどうすればよいですか？ Chromeのソリューションを探しています。

追伸：この例は架空のものであるため、「XXXXXXを使用してプロジェクト全体で「alert（\ "bar \"）」を検索するなどの解決策は探していません。本当のデバッグ/トレースソリューションが必要です。

javascriptdebugginggoogle-chromejavascript-eventsinspector
130
FMaz008

Chrome 15.0.865.0 devを使用します。 [要素]パネルには[イベントリスナー]セクションがあります。

enter image description here

また、スクリプトパネルの「イベントリスナーブレークポイント」。マウスを使用->ブレークポイントをクリックし、呼び出しスタックを監視しながら「次の関数呼び出しにステップイン」して、どのユーザーランド関数がイベントを処理するかを確認します。理想的には、ステップインする必要がなく、常に可能な場合はステップオーバー。

enter image description here

126
Ionuț G. Stan

次のように、Chromeのインスペクターを使用して、添付されたイベントを別の方法で見つけることもできます。

  1. 検査する要素を右クリックするか、「要素」ペインで見つけます。
  2. 次に、「イベントリスナー」タブ/ペインで、イベントを展開します（「クリック」など）
  3. さまざまなサブノードを展開して目的のサブノードを見つけ、「ハンドラー」サブノードの場所を探します。
  4. Wordの「関数」を右クリックし、「関数定義を表示」をクリックします

これにより、次の画像に示すようにハンドラーが定義された場所に移動し、Paul Irishがここで説明します： https://groups.google.com/forum/#!topic/google-chrome-developer -tools/NTcIS15uigA

'Show Function definition'

43
Matty J

インストール後、次の手順に従って、jQuery Audit拡張機能（ https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ）を試してください：

  1. 要素を検査する
  2. 新しい[jQuery Audit]タブで、[イベント]プロパティを展開します。
  3. 必要なイベントを選択してください
  4. ハンドラープロパティから、関数を右クリックし、「関数定義を表示」を選択します
  5. イベントバインディングコードが表示されます。
  6. 「Pretty print」ボタンをクリックして、コードをより読みやすく表示します
15
Javier Armendariz

バージョンChromeバージョン71.0.3578.98（2019年現在）：

Chrome Developer Tools - Event Listener

  1. 検査する要素を選択します

  2. [イベントリスナー]タブを選択します

  3. フレームワークリスナーを確認して、jquery関数の代わりに実際のjavascriptファイルを表示してください。

7
lovelyramos

Edit：私自身の答えの代わりに、これはかなり優れた： Firebug（または同様のツール）でJavaScript/jQueryイベントバインディングをデバッグする方法

Google Chrome開発者ツールには、スクリプトセクションに検索機能が組み込まれています

このツールに慣れていない場合：（念のため）

  • ページ上の任意の場所を右クリック（クロムで）
  • 「要素の検査」をクリックします
  • 「スクリプト」タブをクリックします
  • 右上の検索バー

#IDのクイック検索を行うと、最終的にバインディング関数に移動するはずです。

例：#fooを検索すると、

$('#foo').click(function(){ alert('bar'); })

enter image description here

6
Michael Jasper

2018アップデート-将来の読者に役立つかもしれません：

これが最初にChromeで導入されたのかどうかはわかりません。ただし、これをChromeで実行できる別の（簡単な）方法は、コンソールコマンドを使用することです。

例：（in chrome console type）

getEventListeners($0)

一方、$ 0はDOMで選択された要素です。

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

enter image description here

3
Kris Hollenbeck

findEventHandlersはjqueryプラグインです。未処理のコードは次のとおりです。 https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

手順

  1. 生のコードを直接Chromeのコンソールに貼り付けます（注：jqueryが既にロードされている必要があります）

  2. 次の関数呼び出しを使用します：findEventHandlers(eventType, selector);
    対応するセレクタの指定された要素のeventTypeハンドラを検索します。

例：

findEventHandlers("click", "#clickThis");

次に、使用可能なイベントハンドラーが表示されたら、展開してハンドラーを見つけ、関数を右クリックして[show function definition]を選択する必要があります。

参照： https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

3
UniFreak

Chromeバージョン52.0.2743.116の場合：

  1. Chromeのデベロッパーツールで、Ctrl + Shift + Fを押して[検索]パネルを表示します。

  2. 検索しようとしている要素の名前を入力します。

バインドされた要素の結果がパネルに表示され、それらが配置されているファイルが示されます。

2
Ghost Echo