質問

Chromeと自分のホームページを使用しています。

内部からわかること

1 ) このオレンジ色の画像ボタンをクリックすると登録されるようなフォームがあります。

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

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

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

要素の呼び出し先を調べるにはどうしたらいいですか？

リスナータブは私の場合、機能しませんでした。そこで、クリックイベントのリスナーを探そうとしたのですが、これは安全策に思えたのですが... jquery2.js というのも、そのコードがどのファイルにあるのかがよく分からないので、これらをすべてチェックするのは時間の無駄だからです。

私の $(".formSend").click(function() { ... }); の中の関数 jquery2.js ファイルが存在しない。

ジェシー 説明 なぜ :

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

---

何人かの方からご提案いただいたように、効果のあった方法を集めてみました。 を1つの回答としてまとめました。 .

どのように解決するのですか？

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

最小限のセットアップとサードパーティを排除した素晴らしい作品です。

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

<ブロッククオート

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

ライブラリコードからスローされる例外 は一時停止しません (Pause on ステップイン/ステップアウト/ステップオーバーはライブラリにバイパスされます。 イベントリスナーブレークポイントはライブラリコードではブレークしません。 デバッガは、ライブラリコードに設定されたブレークポイントでは一時停止しません。そのため 最終結果は アプリケーションのコードをデバッグしている サードパーティーの代わりに のリソースを使用します。

以下は、更新されたワークフローです。

1. Chromeデベロッパーツール( F12 または ⌘ + ⌥ + i )、設定に進みます(右上、または F1 ). 左側にある「"」というタブを探します。 ブラックボックス化 "

1. ここには RegEx のパターンで、デバッグ中に Chrome に無視させたいファイルを指定します。例えば jquery\..*\.js (グロブパターン/ 人間 を翻訳します。 jquery.*.js )
2. を持つファイルをスキップしたい場合 複数のパターン を使用すると、パイプ文字を使用してそれらを追加することができます。 | というように。 jquery\..*\.js|include\.postload\.js (これはいわば、"またはこのパターン"のような役割を果たします。または、"Add"ボタンでどんどん追加してください。
3. では、続けて 解決策3 以下、説明します。

<ブロッククオート

ボーナスチップ 私が使っているのは Regex101 を定期的に使っています（他にもたくさんありますが：）。錆び付いた正規表現パターンを素早くテストし、ステップバイステップの正規表現デバッガでどこが間違っているのかを見つけることができます。 もしあなたがまだ正規表現に精通していないのであれば、次のようなサイトを使い始めることをお勧めします。 http://buildregex.com/ と https://www.debuggex.com/

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

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

持っていると便利なツールです :

<ブロッククオート

Visual Event は、オープンソースの Javascript ブックマークレットで、以下の機能を提供します。 DOM にアタッチされたイベントに関するデバッグ情報 要素で構成されています。ビジュアル・イベントの表示

• どの要素にイベントが付随しているか
• 要素に付随するイベントの種類
• イベントが発生したときに実行されるコード
• 添付関数が定義されたソースファイルと行番号（Webkit ブラウザおよび Opera のみ）。

解決策3：デバッグ

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

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

1. Dev Tools ->Sourcesタブを開き、右側にある Event Listener Breakpoints :

   

2. 拡大する Mouse を選択し click

3. これで、要素をクリックすると（実行は一時停止するはず）、コードのデバッグが開始されます。すべてのコードに対して F11 (これは ステップイン ). あるいは、スタックを数ジャンプ分戻す。がある場合があります。 トン・ジャンプ

解決策4：キーワードを釣る

Dev Toolsを有効にすると、コードベース全体（全ファイルの全コード）を検索するために ⌘ + ⌥ + F または

と検索する #envio または、パーティを開始すると思われるタグ/クラス/IDを指定すると、予想より早くどこかにたどり着けるかもしれません。

のみが存在するわけではないことに注意してください。 img が、たくさんの要素が重なっていて、どれがトリガーになるのかわからない場合があります。

もし、これがあなたの知識から少し外れたものであれば、次のものを見てみてください。 Chromeのデバッグに関するチュートリアル .