DOM属性の変更デバッグ

Question

何とか私のコードのどこかのページの要素の1つが、私はそれが期待されないスタイル属性を取得します。つまり、style = "position：fixed"を取得します。私はこれがFirebugのHTMLタブで起こっているのを見ることができますが、コード内で見つけることはできません。アプリケーションはかなり大きく、場所を見つけるためのコードをすべて調べるだけではなく、サードパーティのライブラリが使用されています（jQueryもその1つです）。

私の質問は、何とかこのスタイルを変更してトレースを取得することは可能ですか？

Answer 1

まあ、グーグルや実験の数時間後に、最高の1セットアップこのようなMutationEventハンドラ（Firefoxはそれらをサポートしている）、それを行うことができますようだ：

var node_modified = function(evt) { 
    if(evt.attrName == 'style') { 
     alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue); 
    } 
} 
var test_close = document.getElementById('test_close'); 
test_close.addEventListener('DOMAttrModified', node_modified, false); 

Anはその後、設定をコード全体に何らかのログを記録し、このイベントがいつトリガーされるかを確認します。残念ながら、イベントハンドラのスタックトレースにはイベントがトリガされたコード内の場所に関する情報がないため、突然変異イベントハンドラにブレークポイントを設定してスタックトレースを見るだけでは不十分です。論理の種類は、私はいくつかのハッキングでこの機能をFirebugで実装できると思います。

ありがとうございました！

Answer 2

実際にはデバッガが必要ですね。 Firebug has one built in、それ以外の場合はVenkmanを試してみてください。少し面倒ですが、おそらくより効果的です。

幸運を祈ってください！ :)

Answer 3

Google Chromeでは、ページ内の要素を右クリックして[要素の検査]を選択します。開発者ツールウィンドウまたはペインが開き、ソースビューで選択された要素が表示されます。選択したタグを右クリックし、「属性の変更を中断」を選択することができます。

Answer 4

Firebugのhtmlインスペクタでノードを右クリックすると、属性の変更を中断するオプションがあります。

ブレークポイントはページリロードによって保持され、コールスタックを参照することもできます。