3

私は、DOM を操作することでほぼ 100% 完成したクレイジーなアプリをいくつか持っています。神のみぞ知るスクリプトはおそらく 100 種類ほどあるので、変更を加えるためにどのファイルを参照すればよいかわかりません。ですから、特定の html が生成された場所を知る方法 (おそらく Firebug などを使用) はありますか? 私は C 開発者なので、これはあまり得意ではありません。頭がおかしくなりそうです。

4

4 に答える 4

4

ページの読み込み時にすべての要素が追加されますか、それともユーザー入力への応答で部分的に追加されますか? （クリックなど）

  • アクションへの応答で追加されたものについては、[スクリプト] タブにある Firebug の [Break On Next] ボタンを使用できます。BON をアクティブにするには、それをクリックするか、出荷されたばかりの Firebug 1.10.0a8では、キーボード ショートカット ALT-CTRL-B を使用します (イベント リスナーがマウスの動きにバインドされている場合に便利です)。次に、クリックなどに反応してJSの一部が実行されると、ブレークポイントにヒットします。
  • ページの読み込み時に追加されるものについては、ネイティブ関数を拡張するトリックを使用できます (これはクレイジーに聞こえるかもしれません-そうです、本番環境では行わないでください!) appendChild、insertBefore、replaceChild のように。メインの HTML ファイルの一番上に適切なコードを挿入するだけで、以下のすべてのコードが変更を「認識」します。残念ながら、これはバグにより Firefox では機能しません。しかし、Opera で動作し、Chrome でも動作すると思います。ネイティブ関数を拡張すると、実際にノードをページに追加する前に任意のコードを挿入できます。たとえばconsole.log、ブレークポイントを呼び出すか作成して、現在のページの状態を調べます。ブレークポイントを試して、これらの関数内で使用可能な変数のプロパティを確認し、console.log にプッシュする内容を調整できます。

このコードの場合:

<!doctype html>
<html>
   <head>
      <script type="text/javascript">

      // this should work in Firefox but it does not -- https://bugzilla.mozilla.org/show_bug.cgi?id=618379
      // works at least in Opera, probably Chrome too
      Node.prototype._appendChild = Node.prototype.appendChild;
      Node.prototype.appendChild = function(child) {
         console.log("appending " + child + " to " + this);
         return this._appendChild(child); // call the original function with the original parameters
      }

      // this works in Firefox
      document._createElement = document.createElement;
      document.createElement = function(tagName){
         console.log("creating " + tagName);
         return this._createElement(tagName);
      }

      </script>
   </head>

   <body>
      <script type="text/javascript">
         var p = document.createElement("p");
         p.appendChild( document.createTextNode("abc"));
         document.body.appendChild(p);
      </script>
   </body>
</html>

オペラの出力:

creating p                                                           appendChild.html:14
appending [object Text] to [object HTMLParagraphElement]             appendChild.html:7
appending [object HTMLParagraphElement] to [object HTMLBodyElement]  appendChild.html:7

Firefox の弱点 (オーバーライドできないappendChild) を克服するには、次のトリックを使用できます。代わりに、以下のコードを HTML の先頭に配置します。

<script>
      Node.prototype._appendChild = function(child) {
         console.log("appending " + child + " to " + this);
         return this.appendChild(child)
      };
</script>

次に、自動レスポンダーを作成してFiddler プロキシを使用します(WMV チュートリアル、9.9 MB)。.appendChild._appendChild（「開いているすべてのファイルで置換を見つける」にはNotepad ++を使用できます）。自動レスポンダーの作成と手動での改ざんリクエストはありふれた作業ですが、非常に強力です。自動応答ルールをすばやく作成するには、Fiddler がアクティブなときにページを読み込み、下の図のようにファイルをドラッグ アンド ドロップします。各ファイルについて、右クリックしてメニューから「Generate File」を選択するか (デスクトップにファイルが作成されます)、別の場所に自分でファイルを作成します。(Fiddler で生成されたファイルを開いて、それらから応答ヘッダーを削除することをお勧めします。ところで、「ファイルの生成」は、応答ヘッダーが 200 の場合にのみ実際のコンテンツを配置するため、必ず CTRL-F5 でページをロードしてキャッシュをスキップしてください)。

フィドラー

于 2012-05-12T00:08:40.157 に答える
2

Chrome では、要素を調べて右クリックできます。このメニューには、要素の下の何かが変更されたとき、または要素自体の属性が変更されたときに中断するオプションがいくつかあります。おそらく、これらのブレークポイントの 1 つが探しているものを見つけるでしょうか?

于 2012-05-11T21:05:52.213 に答える
1

生の (できれば縮小化/難読化されていない) JS ファイルにアクセスできると仮定すると、DOM 操作に関連するテキスト文字列や作成しようとしているノードの属性を検索するだけでよいでしょうか? 「appendChild」「createElement」やノードの ID/クラス名などを試してみます。

また、スクリプト ファイル全体にブレーク ポイントを設定し、ページの読み込み時にブレーク ポイントをステップ実行して、参照する場所を絞り込むこともできます。JS の実行を「一時停止」し、最初からステップスルーすることから始めると役立つ場合があります。

コードを共有していただければ(ライブ サイトへのリンクで問題ありません)、喜んでご覧いただけます。

于 2012-05-11T21:53:42.347 に答える
0

JavaScript で jQuery フレームワークを使用して DOM を変更している場合、firefox ブラウザのFireBug 用の fireQuery プラグインが必要な情報を取得することがあります。

例： ここに画像の説明を入力

追加の jquery 要素情報を表示に重ねることで、標準の HTML ビューに追加情報を追加し、javascript がページ コンテンツをどのように修正しているかについてより深い洞察を提供します。

それがあなたを助けることを願っています。

于 2012-05-11T21:16:55.377 に答える