8

私はウェブサイトを見ていて、何か面白いものを見ました。面白い方法でアニメーション化されたDOM要素です。それがどのように行われたかを知りたかったので、ソースコードを掘り下げ始めました。これを行ったコードを追跡するのに何年もかかりました。

DOM要素を「追跡」して、操作されているコードを検出できるようにする方法を知っている人はいますか？

4

2 に答える 2

8

Chromeでは、DOMブレークポイントを追加できます。より詳細な説明はここにあります。

つまり、[要素]パネルで検査するDOM要素を選択し、Break On...->を選択しますSubtree Modifications。DOM要素がその構造を変更すると、それを行うJSコードが示されます。

ただし、特にアニメーションを実行するJSコードを探している場合は、要素のCSSのみを変更できます。私が知る限り、これを破る方法はありません。

一方、Chromeは、ブラウザで発生するJavaScriptイベントを中断できるようにするという点でも非常に柔軟性があります。jfrejが提案したように、どのアクションがアニメーションをトリガーし、それを中断するかを確認できます。

Attributes modification同じ要素メニュー（）からブレークポイントをに設定できBreak On...、CSSの変更時にもブレークします。コメントで提案してくれたBergiに感謝します。ここで簡単な例を試してみました。

于 2012-10-23T09:08:57.790 に答える
3

ほとんどの場合、JavaScript は何らかのセレクターを使用して HTML 構造を変更したり、CSS を適用したりする必要があります。セレクターが何であるかを考えてみてください。通常は ID またはクラスです。

Firebug は複数のファイルを検索できます。[スクリプト] タブに移動し、検索フィールドにフォーカスして、 [複数のファイル] をオンにします。このようにして、DOM 要素をターゲットにしているコードを見つけることができるはずです。

または、マウス クリックなどのイベントによってアニメーションがトリガーされる場合は、Chrome の開発者ツールを使用して、 [ソース] タブにイベント リスナー ブレークポイントを追加できます。これは、 Alexが説明した DOM ブレークポイントと同じように機能します。

于 2012-10-23T09:21:29.133 に答える