Chromeの開発ツールでどのクラススタイルが変更されたかを検出するためのポーリング以外の方法はありますか？

インラインスタイルにはMutationObserverを使用できますが、外部クラスのスタイルがchromeの開発ツールで変更されたかどうか、そしてその変更内容を検出する方法があるかどうかは疑問です。この例では、緑の木陰にフォントの色を変更する：Chromeの開発ツールでどのクラススタイルが変更されたかを検出するためのポーリング以外の方法はありますか？

これは私が思い付くことができた最高です。 https://jsfiddle.net/cotssc7e/

var elem1 = document.getElementById("elemId"); 
var this_id = $('#elem-container').attr('id'); 
var style = window.getComputedStyle(document.getElementById(this_id), "") 

    function getTheStyle(){ 
    var elem = document.getElementById("elem-container"); 
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("color"); 
    document.getElementById("output").innerHTML = theCSSprop; 
    } 
    setInterval(function() { getTheStyle() }, 1000)

私はこのようなMutationObserverを使用しました：

var MutationObserver = window.MutationObserver; 

var target = document.querySelector('#page'); 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation); 
    });  
}); 
var config = { attributes: true, childList: true, characterData: true, attributeOldValue: true, subtree:true, attributeOldValue:true, characterDataOldValue:true } 
observer.observe(target, config);

しかし、あなたは元の写真を見れば、私が思うので、MutationObserverは、開発ツールからのクラススタイルの変更を検出しません。 DOM htmlは変更されません。私はcss自体でMutationObserverを実行しようとしましたが、クロムは文字通りCSSを変更しませんでした。それらはcomputedStyleを変更するだけです。どのように変化したのか、私が把握しようとしていることです。

出典

2016-09-07 Squirrl

それでは、正確に何が問題なのですか？あなたはMutationObserverを使うことができ、毎秒ポーリングするコードを持っていることを知っています....あなたは実際に何を解決しようとしていますか？ – epascarello

ポーリングが最適ですか？ – Squirrl

私は、クラスがどのように変更されたのか、どのようなクラスになったのかを単純に戻そうとしています。 – Squirrl

Chromeの開発ツールにノード/属性が変更されているかどうかをチェックするメカニズムがあるのであれば、答えはイエスです！ Elementsペインに移動し、目的のノードを右クリックし、Break on ...> Attributes Modificationsを選択します。

var target = document.getElementById('example'); 
 
    
 
// create an observer instance 
 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    if(mutation.attributeName === 'class') { 
 
    \t console.log('Class changed!!', target.classList.value) 
 
    } 
 
    });  
 
}); 
 
    
 
// configuration of the observer: 
 
var config = { attributes: true, childList: false, characterData: false }; 
 

 
// pass in the target node, as well as the observer options 
 
observer.observe(target, config); 
 

 
setTimeout(function() { 
 
\t target.classList.add('two'); 
 
}, 3000);

.one { 
 
    width: 200px; 
 
    padding: 20px; 
 
    background-color: green; 
 
} 
 

 
.two { 
 
    color: white; 
 
}

<div id="example" class="one"> 
 
    Hello 
 
</div>

：

あなたはプログラムでこれをやりたいと思っているならば、あなたはMutationObserverを使用することができますが、ここでMDN exampleを少し変更したバージョンです

スタイルの変更をポーリングする代わりに、親要素の一部にMutationObserverを設定できます（例： <body>）、ポーリングの代わりに{ subtree: true, attributes: true }を設定に追加してください。 100ミリ秒ごとにポーリングするのではなく、突然変異イベントを使用して（attributesタイプの突然変異を監視して）コードをトリガすることができます。

出典

2016-09-08 16:41:56

javascriptでこれを検出する方法はありますか？私は最終的には、要素を返す関数とプロパティが変更されるようになります。（つまり、 '.dog {'height'： '200％'} ' – Squirrl

プログラマティックチェンジ検出の例で私の答えが更新されました。 –

これはDOM内の物理的変化を検出するだけなので、インラインスタイルやクラスuは、https://jsfiddle.net/0c99dbkw/のようにしましたが、MutationObserverはchromeがやっている方法であると思われるcomputedStylesの変更を検出しません。私は変更を検出することしかできないと思います。someClass {'color'： 'red'}私が開発ツールの拡張機能を作成した場合、または変更を探しているすべてのクラス属性をループする場合。本当？ – Squirrl

Chromeの開発ツールでどのクラススタイルが変更されたかを検出するためのポーリング以外の方法はありますか？

答えて

関連する問題