デベロッパーツールを使って、Chromeのボタンや要素で実行されるコードを確認する方法

私はChromeと自分のホームページを使っています。

内部から知ったこと。

1)オレンジ色の画像ボタンをクリックしてサインアップしてもらうフォームがあります。

.

2)検査してみると、これだけです。 <img class="formSend" src="images/botoninscribirse2.png">

3) ソースコードの一番上には、大量のスクリプトソースがあります。このボタンがどのスクリプトを呼び出しているかは、私がコーディングしたので知っています。<script src="js/jquery2.js" type="text/javascript"></script>

4) そのファイルの中には、次のようなものがあります。$(".formSend").click(function() { ....);がありますが、これはボタンを押したときに起動されるもの（かなり複雑なフォームの検証と送信を行うもの）で、私が望んでいるのは、どのウェブサイトでもクローム開発ツールを使ってこれを見つけられるようにすることです。

How can I find out where the element does call?

リスナータブではうまくいきませんでした。そこで、クリックイベントのリスナーを探してみたのですが、安全な気がしたのですが......そこにはjquery2.jsがありませんでした（コードがどのファイルにあるのかよくわからないので、全部チェックするのは時間の無駄ですし......）。

.

私の $(".formSend").click(function() { ....}); jquery2.js` ファイル内の関数がありません。

Jesseでは、その理由を説明しています。

最後に、あなたの関数がクリックイベントハンドラに直接バインドされていない理由は、jQueryがバインドされた関数を返すからです。

皆さんからのご提案で、うまくいった方法をまとめてみました下記の回答にまとめました。

Carles Alcolea
編集された質問 20日 11月 2019 в 1:31
プログラミング
google-chrome javascript jquery google-chrome-devtools
5日 5月 2014 в 12:21
7 ビュー

アレクサンダー・パブロフ'の答えは、あなたが望むものに最も近いものを得る。

jQueryの抽象化と機能の拡張のため、イベントの本質にたどり着くためには多くの輪を越えなければなりません。この[jsFiddle](http://jsfiddle.net/PEw7W/1/)は、その作業を実演するために設置したものです。

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

これは惜しかったですね。

1.Chrome Dev Tools (F12)を開き、Sourcesタブに移動します。 2.Mouse -> Clickまでドリルダウンします。 ![Chrome Dev Tools -> Sources tab -> Mouse -> Click]]1. (クリックで拡大)

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

Chrome Dev Toolsは、スクリプトの実行を一時停止して、このような美しいミニマイズされたコードを表示します。

. (クリックで拡大)

3.栄光のコードを探せ!

ここでのコツは、キーを押すことに夢中にならず、画面を見続けることです。

1.F11キー（ステップイン）を押して、ソースコードを探します。 2.ソースコードが表示された

  • 上記の[jsFiddle](http://jsfiddle.net/PEw7W/1/)のサンプルでは、目的のイベントハンドラ/関数にたどり着くまでに、F11を108回も押す必要がありました。
  • イベントをバインドするために使用したjQuery（またはフレームワークライブラリ）のバージョンによっても異なるかもしれません。
  • 充分な努力と時間をかければ、どんなイベントハンドラー/ファンクションでも見つけることができます。

.

4.説明

jQueryがなぜ何層もの抽象化を行うのか、正確な答えや説明はありませんが、コードを実行するブラウザから使用方法を抽象化する仕事をしているからではないかと考えています。

これは、jQueryのデバッグ版（つまり、minifiedされていない）を使った[jsFiddle](http://jsfiddle.net/PEw7W/)です。最初の（ミニマイズされていない）ブレークポイントのコードを見ると、コードがいろいろなことを処理しているのがわかります。

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

試行錯誤で "execution pauses and I jump line by line"と表示されて見逃したと思うのは、Step Inではなく、"Step Over"関数を使用した可能性があるからです。その違いを説明したStackOverflow answerがあります。

最後に、あなたの関数がクリックイベントハンドラに直接バインドされていないのは、jQueryがバインドされた関数を返すからです。

Community
編集した答え 23日 5月 2017 в 12:10
解説 (9)

の部分が間違っているようですね。StepOverかStepInか、また、関連するコールを誤って見逃していないか確認してください。

とはいえ、フレームワークのデバッグは、まさにこのような理由で退屈なものです。この問題を軽減するには、"Enable frameworks debugging support" experimentを有効にします。デバッグが楽しくなりますね。:)

解説 (1)

[findHandlersJS](https://github.com/ruidfigueiredo/findHandlersJS)を使用することができます。

chromeのコンソールで行うことでハンドラーを見つけることができます。

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

すると、クロームのコンソールに次のような情報が出力されます。

  • 要素 イベントハンドラが登録された実際の要素
  • イベント 目的のイベントタイプ(click, changeなど)に対応するjqueryイベントハンドラーの情報を持つ配列
  • ハンドラ 右クリックして Show function definition を選択すると表示される、実際のイベントハンドラメソッド
  • セレクタ 委譲されたイベントに提供されるセレクタです。ダイレクトイベントの場合は空になります。
  • ターゲット このイベントハンドラがターゲットとする要素のリスト。例えば、ドキュメントオブジェクトに登録され、ページ内のすべてのボタンをターゲットとするデリゲートされたイベントハンドラの場合、このプロパティはページ内のすべてのボタンをリストアップします。それらにカーソルを合わせると、クロームでハイライトされて表示されます。

詳細はこちらをご覧ください。また、このサンプルサイトこちらで試すことができます。

Rui
編集した答え 6日 5月 2014 в 9:55
解説 (0)