私のページにリンクがあるとしましょう：
<a href="#" id="foo">Click Here</a>他には何も知りませんが、リンクをクリックすると、 alert("bar")とが表示されます。ですから、どこかにコードがバインドされていることを知ってい#fooます。
バインドしているコードを見つけるにはどうすればよいですか alert("bar")クリックイベントにですか？Chromeでの解決策を探しています。
追伸：この例は架空のものなので、「XXXXXXを使用してプロジェクト全体で「alert（\ "bar \"）」を検索するようなソリューションは探していません。実際のデバッグ/トレースソリューションが必要です。
回答:
Chrome 15.0.865.0 devの使用。要素パネルには「イベントリスナー」セクションがあります。
また、スクリプトパネルの「イベントリスナーブレークポイント」。マウスを使用->ブレークポイントをクリックし、コールスタックを監視しながら「次の関数呼び出しにステップイン」して、どのユーザーランド関数がイベントを処理しているかを確認します。理想的には、jQueryの縮小バージョンを非縮小バージョンに置き換えて、常にステップインする必要がなく、可能な場合はステップオーバーを使用するようにします。
{ }jsを表示するときに、左下隅の記号をクリックするだけです。マジック。
インストール後、jQuery監査拡張機能（https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg）を試してみてください。インストール後、次の手順に従います。
編集：私自身の答えの代わりに、これは非常に優れています：Firebug（または同様のツール）でJavaScript / jQueryイベントバインディングをデバッグする方法
Google Chrome開発者ツールには、スクリプトセクションに組み込まれた検索機能があります
このツールに慣れていない場合：（念のため）
#IDのクイック検索を実行すると、最終的にバインディング関数に移動するはずです。
例：を検索する#fooと、
$('#foo').click(function(){ alert('bar'); })
2018年の更新-今後の読者に役立つかもしれません：
これが最初にChromeで導入された時期はわかりません。ただし、Chromeでこれを行うことができる別の（簡単な）方法は、コンソールコマンドを使用することです。
例：（Chromeコンソールタイプの場合）
getEventListeners($0)一方、$ 0はDOMで選択された要素です。
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
findEventHandlersはjqueryプラグインです。未加工のコードはこちらです：https ://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
手順
生のコードを直接Chromeのコンソールに貼り付けます（注：jqueryがすでにロードされている必要があります）
次の関数呼び出しを使用して findEventHandlers(eventType, selector);
、対応するセレクタの指定された要素のeventTypeハンドラを検索します。
例：
findEventHandlers("click", "#clickThis");次に、使用可能なイベントハンドラーが下に表示されます。展開してハンドラーを見つけ、関数を右クリックして選択する必要があります。 show function definition
参照：https : //blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/