2

ページの特定の DOM 要素で特定のイベントをトリガーする Javascript コード行を知ることは可能ですか?

たとえば、http: //www.gamempire.it/にアクセスすると、ページのロゴをドラッグ可能にするコード行は何ですか ( class="brand master")。

4

2 に答える 2

6

これは、純粋にコンソールを介して Firebug でデバッグする方法です。

  • コマンドライン API 機能を備えた Firebug 1.12b1 以降をダウンロードしgetEventListenersます (Chrome にもあります)。

  • HTML パネルで要素を選択して、 として使用できるようにします$0。

  • getEventListeners($0)--> オブジェクト { click=[1], mousedown=[1], remove=[1]}

    (ああ、それで mousedown リスナーがあります。いいね。)

  • getEventListeners($0).mousedown[0].listener + ""--> "function (e){return typeof jQuery!==core_strundefined&&(!e||jQuery.event.triggered!==e.type)?jQuery.event.dispatch.apply(eventHandle.elem,arguments):undefined ;}"

    (内部 jQuery ラッパー。それを回避しましょう。)

  • $._data($0, 'events')--> オブジェクト { remove=[1], mousedown=[1], click=[1]}

  • f = $._data($0, 'events').mousedown[0].handler

  • f + ""--> 「関数 (e){return t._mouseDown(e)}」

    (うーんt、グローバルではないように見えますが、Firebug の (非常に非標準的な) クロージャー アクセサー構文を使用して、それを回避できます。)

  • f.%t._mouseDown + ""--> "関数 (){var i,s=this._super,a=this._superApply; return this._super=e,this._superApply=t,i=n.apply(this,arguments),this._super =s,this._superApply=a,i}"

  • f.%._mouseDown.%n + ""-> ... 巨大なコードの山。

ある時点で、プロセスを停止し、代わりにブレークポイントの設定を開始し、ロゴをドラッグしてから、関連するコードにステップインすることが可能になるはずですが、このコンソールのみのプロセスは、慣れた後は非常に簡単に感じられます。それ。

.%Chromeでは、コンソールでオブジェクトを展開して をクリックする構文に置き換える必要があることを除いて、ほぼ同じ方法を適用できます<function scope>。残念ながら、コンソールで関数を操作することはできませんが、必要な関数にアクセスしてブレークポイントを設定することはできます。(補足: Firebug でこれに相当するのは、DOM パネルでオブジェクトを開き、後者の [Show Closures] オプションをオンにして、[(closure)] を展開することです。その後、右クリックしてコンソールに戻ることができます -> [use]コマンドラインで」ですが、代替のIMOよりもまだ不器用です。）

Chrome のもう 1 つの方法は、「ソース」パネルに移動し、「マウスダウン」の「イベント リスナー ブレークポイント」を設定し、ロゴをクリックしてから、目的の機能に到達するまでステップ イン/オーバーすることです (プリティ プリンティングを有効にした状態で実行することをお勧めします)。下部の {} アイコン)。これは簡単かもしれません。:)

または、実際にイベント リスナーを追加したコードを尋ねた場合: 最も簡単な方法は、見つけたばかりの関数の周りのコードを調べることです。ライブラリの add-event-listener 関数のブレークポイントも機能します。

于 2013-07-07T12:20:11.047 に答える
2

Vista で FireFox 経由でFirebug を使用する1.12.6...

1) 問題:

問題

チェックボックスをクリックすると、ラベルが非表示になります。その要素を Firebug で検査すると、クリック時にインライン スタイルが適用されていることがわかります (これらのスタイルを適用する JavaScript がどこかにあると想定しても安全です)。

2) Firebug の「スクリプト」パネルを有効にします。

脚本

...そして、ブラウザを更新する必要があるかもしれません。

3）「変異時にブレークを有効にする」：

Firebug HTML パネルで、問題のある特定の DOM 要素を選択し、「Enable Break on Mutate」をオンにします (パネルの右上にある Firebug アイコンの下のオレンジ色の一時停止ボタン) ...

ここに画像の説明を入力

... そして、問題を繰り返すための手順を実行します (この場合、チェック ボックスをクリックする必要があります)。

4) スタック タブを確認します。

最後に、ブレーク イベントでコードが停止したので、[スクリプト] セクションの [スタック] タブをクリックします ...

ここに画像の説明を入力

... そこから、問題のある JavaScript の出所を追跡できるはずです。

これが最善の方法かどうかはわかりませんが、この 1 つのケースではうまくいきました。

于 2014-02-21T23:49:49.173 に答える