どのjQueryスクリプトが要素に影響を与えているかを調べるには？

Question

どのjQueryスクリプトがページ上の特定の要素に影響しているかを知ることができるかどうかは疑問です。

jQueryがdivに影響するのが分かりますが、どのスクリプトがdivを操作しているのかわかりません - 見つけ出す方法はありますか？

Answer 1

コードを検索してオブジェクトに影響するようなコードを見つける以外に、どのコードがオブジェクトを変更するのかを簡単に見つける方法はありません。ブレークポイントを設定し、コードを実行してといつ。

通常、コードのどの部分が特定のdivをターゲットにする可能性のあるセレクタを使用しているかを知ることができます。すべてのコードを検索して、さまざまなid値またはクラス名を検索すると、コードの一般的な領域が見つかることがよくあります。

コード内にonclick = "xxx（）"のようなHTMLイベントハンドラがある場合は、コード内のそれらの関数の位置を明示的に追跡できます。コードがjavascriptを介して割り当てられたイベントハンドラを使用している場合、ドキュメントの準備が整ったときに実行される初期化コードを見つけて、割り当てられているイベントハンドラを確認し、それらのコールバックにブレークポイントを設定しようとします。

本当にあなたが興味を持っている効果をどのコードが担当しているかを調べるためにJavaScriptを調べる以外に方法はありません。これを真剣に実行するには、サイトのすべてのスクリプトを1つの大きなファイルにコピー/ http://jsbeautifier.org/のような美化器を使用して、それを一様かつ読みやすい形でフォーマットし、それを調べます。私は、コードのコピーを別のファイルに作成し、コードの部分を削除することで、私が探しているものとは何の関係もないことを確信しています。ゆっくりと時間がたつにつれて、コードが残ってしまいます。そのうち1つは私が探しているものです。干し草の中で針を探しているようなものですが、最終的に乾草を投げ捨て続けると、針が入るための乾草はあまりありません。コードを学び始めると、関連するものも見つけることができます残りのコードを検索して検索を高速化します。

Answer 2

Firebugを使用します。要素を調べ、HTMLのdivを右クリックし、ログイベントまたはブレークオプションの1つを選択します。