156

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

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

他に何もわかりませんが、リンクをクリックすると、alert("bar")が表示されます。だから私は、どこかで、いくつかのコードが にバインドされていることを知ってい#fooます。

alert("bar")クリックイベントにバインドしているコードを見つけるにはどうすればよいですか? Chromeで解決策を探しています。

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

4

8 に答える 8

147

Chrome 15.0.865.0 devを使用しています。Elements パネルには「Event Listeners」セクションがあります。

ここに画像の説明を入力

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

ここに画像の説明を入力

于 2011-09-07T17:54:17.987 に答える
17

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

  1. 要素を検査する
  2. 新しい「jQuery Audit」タブで、Events プロパティを展開します。
  3. 必要なイベントに合わせて選択
  4. ハンドラー プロパティから、関数を右クリックし、[関数定義の表示] を選択します。
  5. イベントバインディングコードが表示されます
  6. コードをより読みやすく表示するには、[プリティ プリント] ボタンをクリックします。
于 2015-05-27T16:00:07.743 に答える
5

findEventHandlers は jquery プラグインです。未加工のコードはこちら: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

手順

  1. 生のコードをクロムのコンソールに直接貼り付けます（注：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/

于 2015-07-11T06:10:08.093 に答える
3

Chrome バージョン 52.0.2743.116 の場合:

  1. Chrome の開発者ツールで、Ctrl+ Shift+を押して「検索」パネルを表示しFます。

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

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

于 2016-08-25T17:31:16.733 に答える