デベロッパー ツールを使用して Chrome のボタンまたは要素によって実行されるコードを見つける方法 質問する

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

jQueryの抽象化と機能の広範さのため、イベントの核心にたどり着くには多くのハードルを乗り越えなければなりません。私はこれを設定しましたjsFiddle作品をデモンストレーションする。

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

これに近かったですね。

1. Chrome 開発ツール (F12) を開き、[ソース] タブに移動します。
2. マウスにドリルダウン -> クリック
   
   (クリックすると拡大します)

2. ボタンをクリックして下さい。

Chrome Dev Tools はスクリプトの実行を一時停止し、縮小されたコードの美しい組み合わせを表示します。

(クリックすると拡大します)

3. 素晴らしいコードを見つけましょう!

ここでのコツは、キーを押すことに夢中にならず、画面に注意を払うことです。

1. F11目的のソースコードが表示されるまでキー（ステップイン）を押します
2. ついにソースコードに到達
   • の中にjsFiddle上記のサンプルでは、​​目的のイベントハンドラ/関数に到達するまでにF11 108回押す必要がありました。
   • イベントをバインドするために使用されるjQuery（またはフレームワークライブラリ）のバージョンに応じて、結果は異なる場合があります。
   • 十分な時間と労力を費やせば、どんなイベントハンドラや関数でも見つけることができる。

4. 説明

jQuery がなぜ多くの抽象化レイヤーを通過するのか、正確な答えや説明はわかりません。私が示唆できるのは、コードを実行するブラウザーから jQuery の使用を抽象化する役割があるためだということです。

がここにありますjsFiddlejQuery のデバッグ バージョン (つまり、縮小されていないバージョン) を使用します。最初の (縮小されていない) ブレークポイントのコードを確認すると、コードがさまざまな処理を行っていることがわかります。

    // ...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...