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

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 监听开发人员工具中的样式更改

Javascript listen for style changes made in developer-tools

javascript

events

developer-tools

web-inspector