web-dev-qa-db-ja.com

デベロッパーツールを使用してChromeのボタン/要素によって実行されているコードを確認する方法

私はChromeと私自身のウェブサイトを使っています。

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

1 ）私は人々がこのオレンジ色の画像ボタンをクリックしてサインアップするフォームがあります：

enter image description here

2 ）調べてみると、これだけです。<img class="formSend" src="images/botoninscribirse2.png">

3 ）ソースコードの先頭には、たくさんのスクリプトソースがあります。 もちろん、ボタンがどれを呼び出すかはわかっているので、それをコーディングしました ：<script src="js/jquery2.js" type="text/javascript"></script>

4 ）そのファイルの中には、次のものがあります。$(".formSend").click(function() { ... });ボタンによってトリガーされるもの（かなり複雑なフォームの検証と送信を行うためのもの）および 必要なものを見つけることができるもの 任意のWebサイトでchrome devツールを使用する。

要素がどこを呼び出しているのか、どうすればわかりますか。

[リスナー]タブが機能しませんでした

それで私は私にとって安全な賭けのように思えたclickイベントリスナーを見てみました...しかしそこにはjquery2.jsがありません（そして私は実際にこれらのファイルをチェックする時間を浪費するでしょう）。 ..）：

enter image description here

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

ジェシー 説明 なぜ 彼の答えの下 ：

"最後に、関数がclickイベントハンドラに直接バインドされていないのは、jQueryがバインドされた関数を返すためです。jQueryの関数は抽象化層をいくつか通過してチェックし、そこで実行します。関数。"

編集： 私はこの質問が出たすべての方法を集めました 以下の一つの答えで あなたの何人かが示唆したように。

javascriptjquerygoogle-chromegoogle-chrome-devtools
264
Carles Alcolea

解決策1：フレームワークのブラックボックス化

ほんの少しだけセットアップするだけで、サードパーティはできません。

編集：このソリューションを書いて以来、Chrome（そして他のブラウザでも大丈夫だと思います）はスクリプトをブラックボックス化するのをより簡単にしました。

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

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

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

更新されたワークフローは次のとおりです。

  1. Chromeデベロッパーツールを開きます（F12 または ⌘+⌥+i）、設定（右上、または F1）左側に「Blackboxing」というタブがあります。

enter image description here

  1. これが、通過を避けたいファイルのRegExパターンを置く場所です。例：jquery\..*\.js（ human 翻訳：jquery.*.js）
  2. 複数のパターンを持つファイルをスキップしたい場合は、jquery\..*\.js|include\.postload\.jsのようにパイプ文字を使ってそれらを追加することができます。または単に「追加」ボタンでそれらを追加し続けてください。
  3. 今すぐ適用 解決策 下記の説明。

ボーナスのヒント： Regex 101 （他にもたくさんあります）を使ってさびた正規表現パターンをすばやくテストし、正規表現のステップバイステップデバッガのどこが悪いのかを調べてください。

ソースパネルで作業するときにコンテキストメニューを使用することもできます。ファイルを表示しているときは、エディタを右クリックすることができます。ファイルナビゲータでファイルを右クリックすることもできます。そこからBlackbox Scriptを選択します。これにより、設定パネルのリストにファイルが追加されます。

enter image description here

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

enter image description here

を持つのは良いツールです。

解決策3：コードを見ていく

この種の痛みを伴うが簡単です（ブラックボックス化は、ここで非常にうれしいことがわかります）。

  1. Dev Tools - > Sourcesタブを開き、右側にEvent Listener Breakpointsを見つけます。

    enter image description here

  2. Mouseを展開し、... clickをクリックします。

  3. 今すぐ要素をクリックして（実行が一時停止する必要があります）、ここでゲームが始まります。 F11 （これは ステップイン ）すべてのコードを通過することです。タイトに座って、トンのジャンプがあるかもしれません。

解決策4：サバイバルモード

私はいつも残っている ⌘+⌥+F または

enter image description here

そして#envioを検索するか、あなたがパーティーを始めようと思っているタグ/クラス/ IDを検索してください すべての発見を読んでコードが実行される可能性があることを考えてみてください ボタンによって何がトリガーされます。

しかし、imgだけでなく、何千ものdivsが重複していることもあるので注意してください。コードが何をトリガーしているのかさえわかりません。おそらくこの方法を使う必要はないはずです。

140
Carles Alcolea

Alexander Pavlov's answer あなたが望むものに最も近いものを取得します。

JQueryの抽象化と機能性の広さのせいで、イベントの本質に到達するためにはたくさんのフープを飛ばさなければなりません。私はこれを設定しました jsFiddle 作品をデモンストレーションするために。

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

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

  1. Chromeデベロッパーツール（F12）を開き、[ソース]タブに進みます。
  2. マウスにドリルダウン - >クリック
    Chrome Dev Tools -> Sources tab -> Mouse -> Click
    （クリックしてズーム）

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

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

Chrome Dev Tools paused script execution（クリックしてズーム）

栄光のコードを見つけよう！

さて、ここでのトリックはキーを押すことに夢中にならず、そして画面を見ないようにすることです。

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

Desired event handler/function

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行ずつジャンプして"としたときに失敗したと思うのは、" Step Over "関数を使用した可能性があるからです。ステップインの代わりに。これが違いを説明する StackOverflow answer です。

最後に、関数がclickイベントハンドラに直接バインドされているnotである理由は、jQueryがバインドされた関数を返すためです。 jQueryの関数は抽象化層をいくつか調べてチェックし、そこにsomewhereがあると関数を実行します。

188
Jesse

"...のように聞こえます..." の部分は間違っています。あなたはStepOverですか、それともStepInですか？また、関連する電話を誤って見逃していないと思いますか。

とはいえ、フレームワークのデバッグはまさにこの理由で面倒なことがあります。問題を軽減するには、 "フレームワークデバッグサポートを有効にする"実験を有効にする _を実行します。ハッピーデバッグ！ :)

14
Alexander Pavlov

findHandlersJSを使用できます。

あなたはクロームコンソールですることによってハンドラを見つけることができます：

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

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

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

より多くの情報 ここ そしてあなたはこの例のサイトでそれを試すことができます ここ 。

6
Rui

このソリューションは jQueryのデータメソッド を必要とします。

  1. Chromeのコンソールを開く
  2. $._data($(".example").get(0), "events")を実行する
  3. 出力をドリルダウンして目的のイベントハンドラを見つけます。
  4. 「ハンドラ」を右クリックして「関数定義を表示」を選択します
  5. コードは[Sources]タブに表示されます。

$._data()は、jQueryのデータメソッドにアクセスしているだけです。もっと読みやすい方法はjQuery._data()です。

this SO answer ：による興味深いポイント

JQuery 1.8以降、イベントデータはデータ用の「public API」から利用できなくなりました。 このjQueryブログ投稿 を読んでください。代わりにこれを使用してください。

jQuery._data( elem, "events" ); elemはjQueryオブジェクトやセレクタではなくHTML要素であるべきです。

注意してください、これは内部の 'プライベート'構造であり、変更するべきではありません。デバッグ目的でのみ使用してください。

古いバージョンのjQueryでは、古いメソッドを使う必要があるかもしれません。

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

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

3
apptaro