händelser - Javascript lyssnar på stiländringar som görs i utvecklarverktyg

Finns det ett sätt att upptäcka stiländringar som endast gjorts i utvecklarverktygen (inspektera element)?

Jag vill tillåta att spara dem om användaren är inloggad som administratör.

Svar #1

Du kan komma åt stilarna för ett HTMLElement med element.style i JavaScript. Så du skulle förmodligen kunna spara stilarna när sidan laddas, kontrollera dem igen när användaren initierar en sparning och jämföra -- skillnaden skulle vara användarens ändringar.

När det gäller att upptäcka dem så snart de inträffar kan du använda MutationObserver för att bli meddelad om attributändringar på sidan. Detta fungerar när du lägger till stilar på ett specifikt element i Devtools, men inte för att redigera befintliga stilar och (tror jag) lägga till stilar till befintliga selektorer. Jag är inte säker på om det finns ett sätt att få ett event när dessa ändras.

Redigera: faktiskt verkar det som om att kontrollera element.style har samma begränsningar som att använda MutationObserver: endast stilar som har lagts till för det specifika elementet (det vill säga stilar som visas som inline-stilar i DOM:en) visas. Det kan finnas ett sätt att faktiskt komma åt alla stilar, men jag känner inte till det.

Svar #2

Du kan använda MutationObserver för att få meddelande när DOM-elementen ändras. Se exemplet nedan för att se det i arbete.

Observera att det inte berättar för dig om mutationen utlösts av Javascript på din sida eller genom utvecklarverktygen. Så du har den extra bördan av att spåra när din JS ändrar något och när användaren ändrar något.

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>