Chromeと自分のウェブサイトを使用しています。

私が内側から知っていること：

1）このオレンジ色の画像ボタンをクリックして登録するフォームがあります。

2）検査しましたが、これがすべてです。 <img class="formSend" src="images/botoninscribirse2.png">

3）ソースコードの一番上には、たくさんのスクリプトソースがあります。ボタンをコーディングしたので、ボタンがどれを呼び出すかがわかります。<script src="js/jquery2.js" type="text/javascript"></script>

4）そのファイル内で見つけることができます：$(".formSend").click(function() { ... });これは、ボタンによってトリガーされるもの（かなり複雑なフォーム検証を実行して送信するため）であり、私が欲しいのは、任意のWebサイトでChrome開発ツールを使用してそれを見つけられるようにすることです。

要素がどこを呼び出しているかを知るにはどうすればよいですか？

[リスナー]タブが機能しませんでした。それで、私は安全な賭けのように思われたクリックイベントリスナーを探してみましたがjquery2.js、そこには何もありません（そして、コードがどのファイルであるか本当にわからないので、これらすべてをチェックするのに時間を費やしました。 。）：

ファイル$(".formSend").click(function() { ... });内の私の機能jquery2.jsはありません。

ジェシーはその理由を説明します：

「最後に、関数がクリックイベントハンドラーに直接バインドされない理由は、jQueryがバインドされる関数を返すためです。jQueryの関数は、いくつかの抽象化レイヤーとチェックを通過し、そこのどこかで、関数を実行します」

あなたの一部が示唆したように、私は下の1つの答えで機能する方法を集めました。

アレクサンダーパブロフの答えはあなたが望むものに最も近くなります。

jQueryの抽象化と機能は広範囲に及ぶため、イベントの要点にたどり着くには、多くのフープを飛ばす必要があります。このjsFiddleを設定して、作業をデモンストレーションしました。

1.イベントリスナーブレークポイントの設定

あなたはこれに近かった。

1. Chrome Dev Tools（F12）を開き、[Sources]タブに移動します。
2. マウスにドリルダウン->クリック（クリックしてズーム）
   
   

2.ボタンをクリックしてください！

Chrome Dev Toolsはスクリプトの実行を一時停止し、縮小されたコードのこの美しい絡みを提示します：

（クリックしてズーム）

3.見事なコードを見つけてください！

ここでの秘訣は、キーを押しても夢中にならず、画面に目を離さないことです。

1. 押してF11所望のソースコードが表示されるまでキー（ステップ）
2. ようやくソースコードに到達
   • 上記のjsFiddleサンプルでは、目的のイベントハンドラー/関数に到達する前に、F11 108回押す必要がありました。
   • イベントのバインドに使用されるjQuery（またはフレームワークライブラリ）のバージョンによって、走行距離は異なる場合があります
   • 十分な献身と時間があれば、あらゆるイベントハンドラー/関数を見つけることができます

4.説明

正確な答え、またはjQueryが抽象化の多くの層を通過する理由についての説明はありません-私が提案できるのは、コードを実行するブラウザーからその使用を抽象化するために行う仕事が原因であるということです。

以下はjQueryのデバッグバージョンを備えたjsFiddleです（つまり、縮小されていません）。最初の（縮小されていない）ブレークポイントのコードを見ると、コードが多くのことを処理していることがわかります。

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

「実行が一時停止し、1行ずつジャンプする」という試みで失敗したと思うのは、ステップインではなく「ステップオーバー」機能を使用した可能性があるためです。ここでStackOverflowの応答の違いを説明するが。

最後に、関数がクリックイベントハンドラーに直接バインドされない理由は、jQueryがバインドされる関数を返すためです。次にjQueryの関数はいくつかの抽象化レイヤーとチェックを通過し、そこでどこかで関数を実行します。

ソリューション1：フレームワークのブラックボックス化

優れた最小限の設定で機能し、サードパーティはありません。

Chromeのドキュメントによると：

スクリプトをブラックボックス化するとどうなりますか？

ライブラリコードからスローされた例外は一時停止しません（[例外の一時停止]が有効になっている場合）、ステップイン/アウト/オーバーはライブラリコードをバイパスします。イベントリスナーのブレークポイントはライブラリコードで中断しません。デバッガーはライブラリに設定されたブレークポイントで一時停止しません。コード。最終結果は、サードパーティのリソースではなくアプリケーションコードをデバッグすることです。

1. Chromeデベロッパーツールを開いて（F12または⌘+ ⌥+ i）、設定に移動します（右上またはF1）。左側の「Blackboxing」というタブを見つけます

2. ここに、デバッグ中にChromeで無視するファイルのRegExパターンを配置します。たとえば、次のjquery\..*\.js（グロブパターン/ 人間の翻訳：jquery.*.js）
3. 複数のパターンを持つファイルをスキップする場合は、パイプ文字を使用して次の|ように追加できますjquery\..*\.js|include\.postload\.js（いわば「またはこのパターン」のように機能します。または、「追加」ボタンでファイルを追加し続けます。
4. 次に、以下で説明するソリューション3に進みます。

ボーナスチップ！私はRegex101を定期的に使用していますが（他にもたくさんあります:)、さびたregexパターンをすばやくテストし、段階的なregexデバッガーのどこが間違っているかを見つけます。正規表現にまだ慣れていない場合は、http：//buildregex.com/やhttps://www.debuggex.com/などのサイトの作成と視覚化に役立つサイトを使用することをお勧めします。

[ソース]パネルでの作業時にコンテキストメニューを使用することもできます。ファイルを表示するときは、エディターを右クリックして、「ブラックボックススクリプト」を選択できます。これにより、[設定]パネルのリストにファイルが追加されます。

解決策2：ビジュアルイベント

これは優れたツールです。

Visual EventはオープンソースのJavascriptブックマークレットで、DOM要素に添付されたイベントに関するデバッグ情報を提供します。ビジュアルイベントショー：

• イベントが関連付けられている要素
• 要素に添付されたイベントのタイプ
• イベントで実行されるコードがトリガーされます
• 添付関数が定義されたソースファイルと行番号（WebkitブラウザとOperaのみ）

解決策3：デバッグ

ページのどこかをクリックしたとき、またはDOMが変更されたときにコードを一時停止することができます... 知っておくと便利な他の種類のJSブレークポイント。悪夢を避けるために、ここでブラックボックスを適用する必要があります。

この例では、ボタンをクリックしたときに何が起こっているのかを正確に知りたいのです。

1. Dev Tools-> Sourcesタブを開き、右側で以下を見つけますEvent Listener Breakpoints：

   

2. 展開Mouseして選択click

3. 要素をクリックし（実行は一時停止するはずです）、コードをデバッグします。すべてのコードを押すことができますF11（これはのステップです）。または、スタック内のいくつかのジャンプに戻ります。ジャンプがたくさんあります

解決策4：釣りのキーワード

開発ツールをアクティブ化すると、⌘+ ⌥+ Fまたは次のコマンドでコードベース全体（すべてのファイルのすべてのコード）を検索できます。

そして、#envioあなたが考えているタグ/クラス/ IDを検索したり、パーティーを開始したりすると、予想よりも速くどこかに行く可能性があります。

時々imgスタックされている要素だけでなく多くの要素があることに注意してください、そしてあなたはどれがコードをトリガーするかわからないかもしれません。

これがあなたの知識から少しずれている場合は、デバッグに関するChromeのチュートリアルをご覧ください。

以下のように聞こえる「...と私は行ずつジャンプ...」の部分が間違っています。ステップオーバーですか、ステップインですか？関連する電話を誤って逃さないようにしていますか？

そうは言っても、まさにこの理由でフレームワークのデバッグは退屈なものになる可能性があります。この問題を緩和するには、「フレームワークのデバッグサポートを有効にする」実験を有効にします。幸せなデバッグ！:)

あなたはfindHandlersJSを使用することができます

ハンドラーは、Chromeコンソールで次のようにして見つけることができます。

findEventHandlers("click", "img.envio")

Chromeのコンソールに次の情報が表示されます。

• element
  イベントハンドラが登録された実際の要素
• 
  関心のあるイベントタイプ（クリック、変更など）のjqueryイベントハンドラーに関する情報を含むevents 配列
• ハンドラ
  右クリックして[関数定義の表示]を選択すると表示される実際のイベントハンドラメソッド
• selector
  委任されたイベントに提供されるセレクター。直接イベントの場合は空になります。
• ターゲット
  このイベントハンドラーがターゲットとする要素を含むリスト。たとえば、ドキュメントオブジェクトに登録され、ページ内のすべてのボタンを対象とする委任イベントハンドラの場合、このプロパティはページ内のすべてのボタンをリストします。それらにカーソルを合わせると、クロムで強調表示されます。

詳細についてはこちらをご覧ください。こちらのサンプルサイトでお試しいただけます。

このソリューションには、jQueryのデータメソッドが必要です。

1. Chromeのコンソールを開きます（ただし、jQueryがロードされているブラウザであれば動作します）
2. 走る $._data($(".example").get(0), "events")
3. 出力をドリルダウンして、目的のイベントハンドラーを見つけます。
4. 「ハンドラー」を右クリックして、「関数定義を表示」を選択します
5. コードは[ソース]タブに表示されます

$._data()jQueryのデータメソッドにアクセスしているだけです。より読みやすい代替案が考えられますjQuery._data()。

このSO回答による興味深い点：

jQuery 1.8以降、データの「パブリックAPI」からイベントデータを利用できなくなりました。このjQueryブログ投稿を読んでください。代わりにこれを使用する必要があります：

jQuery._data( elem, "events" ); elemは、jQueryオブジェクトやセレクターではなく、HTML要素である必要があります。

これは内部の「プライベート」構造であり、変更しないでください。これはデバッグ目的でのみ使用してください。

古いバージョンのjQueryでは、次の古いメソッドを使用する必要がある場合があります。

jQuery( elem ).data( "events" );

バージョンに依存しないjQueryは次のようになります。 (jQuery._data || jQuery.data)(elem, 'events');