web-dev-qa-db-ja.com

DOM要素を変更しているJavaScriptを見つける

どのJavaScriptがHTML要素を変更しているかを見つけるために使用できるテクニックはありますか？特定の要素がdisplay:noneのインラインスタイルをロード時に追加する方法を見つけるのに苦労しています。最終的にこれを行うスクリプトを見つけることは知っていますが、そのプロセスをもっと簡単にしたいのです。

私の理想的な解決策は、DOM要素が変更されるとすぐにJavaScriptの実行を中断する何らかの方法です。要素を右クリックして[ブレークオン]> [属性の変更]を選択するChromeの開発ツール機能を認識しています。ただし、これはページのロード中にいつか発生するため、「クラスXYZを持つ要素を監視する」というスクリプトを他のすべてのスクリプト宣言の前に挿入し、要素の変更時にJSの実行を中断できたら、本当にうれしいです。その後、JSの実行は、要素を変更したJSを見ることができる場所で中断するか、コールスタックを調べることで見つけることができますが、いずれにしても、ブレークをトリガーしたスクリプトを確認できます。 Chrome dev tools/Firebugを使用してそれを行う方法を教えてくれるいくつかの答えを見つけましたが、私が言ったように、この質問はプログラム的なアプローチに関するものです。

javascripthtmldomdom-manipulation
48
p e p

DOM要素を右クリック>ブレーク>属性の変更

http://www.elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/ の＃3経由

86
Nighto

あなたが使用できます：-

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

これを見てください：-

Jqueryを使用してcssプロパティが変更されたときのイベント検出

6
Alok