Question

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

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

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>

Javascript监听开发人员工具中的样式更改

2 个答案: