web-dev-qa-db-ja.com

どのJavaScriptが要素のスタイルを変更しているかを見つけるにはどうすればよいですか？

JavaScriptを介してスタイルを適用する要素があります。正確な場所はわかりません。 Firebugをチェックして、「element.style」が実際にどこから来ているのかを示す方法はありますか？

javascriptjquerycssdebuggingfirebug
34
Andy

スタイルシートルールの結果ではなく、インラインstyleに設定されていることが確実な場合は、非標準のMozilla watch（） メソッドを使用して変更を検出できます。

document.body.style.watch('color', function(name, v0, v1) {
    alert(name+': '+v0+'->'+v1);
});
document.body.style.color= 'red';

ウォッチャー関数にdebugger;を配置し、Firebugでコールスタックを検索して、変更がトリガーされた場所を確認できます。

26
bobince

スタイルを設定する前にHTMLパネルの要素を右クリックして、[属性の変更]で[ブレーク]を選択することもできます。スクリプトパネルを有効にする必要があります。

18
johnjbarton

この質問 からの要求に応じて：

Firefoxを使用している場合は、[HTML]タブの[属性の変更時に中断]オプションを確認できます。ターゲット要素を右クリックするだけで、メニューがポップアップ表示されます。その後、ウィンドウのサイズを変更すると、属性が変更されたスクリプト行で中断されます。 use firebug

11
Simon

スクリプトビューを開いて、検索ボックスで「.style」を検索できます。

0
Felix Kling

デバッグ機能が制限されていますが、これがジョブのデフォルトツールだと思います： https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

また、AdBlockerが責任を負わないことを確認してください。

0
Marko