Javascript侦听开发人员工具中所做的样式更改

有没有办法检测仅在开发人员工具(检查元素)中进行的样式更改？

如果用户以管理员身份登录,我想允许保存它们.

解决方法:

您可以使用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>

标签：web-inspector,developer-tools,events,javascript
来源： https://codeday.me/bug/20191025/1930471.html