0

テンプレートのspan要素を制御するjQueryコードを見つけようとしています。

例えば：

<span class="ccontent"
  • そのクラスにカーソルを合わせると、情報ウィンドウが開きます。

Chromeを使用しているテンプレートとそれが存在するファイルでこれに関連するjQueryコードを見つけるにはどうすればよいですか？

4

3 に答える 3

4

ビジュアルイベント2を使用してみてください

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

  • イベントが関連付けられている要素
  • 要素に関連付けられているイベントのタイプ
  • イベントで実行されるコードがトリガーされます
  • アタッチされた関数が定義されたソースファイルと行番号（WebkitブラウザーとOperaのみ）
于 2013-01-09T16:07:34.903 に答える
1

Chromeで、右クリックして[要素の検査]を選択し、検査官を開きます。Macでは、Command + Option+Iを使用できます

その後、[リソース]タブをクリックし、次にCommand + Fをクリックします（ここでも、Mac、PCについてはわかりません）。検索ボックスにccontentと入力すると、そのクラス名への参照の数が表示されます。コード内で言及されているすべての場所が表示されるまでクリックします。

于 2013-01-09T16:13:20.333 に答える
1

Matthew Davis からの回答は、問題の ID (例: "#ccontent") をコードで検索できる場合は機能しますが、要素がクラスや要素タイプなどによって間接的に参照されている場合はうまく機能しません。

Visual Events ブックマークレットも役に立ちますが、要素にバインドされたイベントの縮小された JQuery コードをリストするだけの場合もあります。

マウスオーバーなどで DOM が変更されたり、ホバーしているオブジェクトの属性が変更されたりして、最初の 2 つの (簡単な方法で) オプションが失敗する場合は、次の方法を試してください。

  • Chrome 開発者ツール (CTRL+SHIFT+I) の [要素] タブに移動します。
  • 要素の属性の変更を追跡することに関心がある場合は、要素を右クリックして、[Break On] > [Attributes modified] をクリックします。

属性変更

  • DOM の変更 (モーダルの表示など) に関心がある場合は、ドキュメントの本文または関連するコンテナー div を右クリックし、[Break On > Subtree modified] をクリックします。

サブツリー変更

  • 次に、マウスオーバーを行うか、要素で興味のあるイベントをトリガーします。
  • Chrome デバッガーが起動し、右側にコール スタックが表示されます。

コールスタック

  • コール スタックのさまざまな項目をクリックして、[ソース] タブでコールがトリガーされた場所を確認できます。
于 2013-01-09T17:12:18.237 に答える