Javascriptは、開発者ツールで行われたスタイルの変更をリッスンします

Question

developer-tools（inspect要素）でのみ行われたスタイルの変更を検出する方法はありますか？

ユーザーが管理者としてログインしている場合は、保存することを許可します。

Answer 1

JavaScriptでelement.styleを使用すると、HTMLElementのスタイルにアクセスできます。だから、ページの読み込み時にスタイルを保存し、ユーザーが保存を開始して比較を開始したときに再度確認してください。違いはユーザーの変更です。

すぐにそれらを検出するには、MutationObserverを使用してページの属性の変更を通知できます。これは、Devtools内の特定の要素にスタイルを追加するときに機能しますが、既存のスタイルを編集するのではなく、既存のセレクタにスタイルを追加するときに機能します。これらの変更が発生したときにイベントを取得する方法があるかどうかはわかりません。

編集：実際にはelement.styleのチェックにはMutationObserverと同じ制限があるようです：特定の要素（つまり、DOMのインラインスタイルとして表示されるスタイル）のみが表示されます。実際にすべてのスタイルにアクセスする方法があるかもしれませんが、私はそれを認識していません。

Answer 2

MutationObserverを使用して、DOM要素が変更されたときに通知を受け取ることができます。それが動作することを確認するには、以下のスニペットを参照してください。

あなたのページのJavascriptによって突然変異が引き起こされたのか、開発者ツールによって突然変異が引き起こされたのかはわかりません。したがって、JSが何かを変更したときやユーザーが何かを変更したときに、追跡の負担が増えます。

var target = document.getElementById('targetDiv'); 
 

 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    console.log("New Mutation:"); 
 
    mutation.addedNodes.forEach(function(node) { 
 
     console.log("Added: " + node.nodeName); 
 
    }); 
 

 
    mutation.removedNodes.forEach(function(node) { 
 
     console.log("Removed: " + node.nodeName); 
 
    }); 
 
    }); 
 
}); 
 

 
var config = { 
 
    attributes: true, 
 
    childList: true, 
 
    characterData: true 
 
}; 
 
observer.observe(target, config); 
 

 
function mutate() { 
 
    target.innerHTML += Math.random() + "<br/>" 
 
}

#targetDiv { 
 
    margin: 10px; 
 
    width: 500px; 
 
    padding: 5px; 
 
}

<div id="targetDiv"></div> 
 

 
<button id="mutate" onclick="mutate()">Mutate the Div</button>