监听 Chrome Devtools 中 CSS 类更改的方法

Question

我想确认是否有人通过Chrome Devtools修改了元素的CSS规则。通常，MutationObserver足以胜任此任务，但是MutationObserver只能观察到内联style属性的更改，不能检测到通过开发工具修改元素CSS属性（或者添加到检查器样式表的新规则）。有什么最好的方法使用JavaScript监听Chrome Devtools的CSS规则更改？

- DataPools

Answer 1

我的目标是在Chrome扩展中使用它。我刚刚发现，通过Devtools监听用户修改是可能的：

//This will only work in the devtools.js file in a Chrome extension
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
 alert(resource.url);
 alert(content);
});

更多信息可在这里找到。

- DataPools

Answer 2

检测初始变化的一种间接方法是通过转换事件。当然，这可以被绕过，但是前端所做的一切都可以被绕过。

这个想法的要点是为所有元素添加一个极短的过渡，并监听由它触发的任何过渡事件。

let timeout = null;

Array.from(document.querySelectorAll('*')).forEach(element => {
  element.addEventListener('transitionstart', () => {
    if (timeout) return;
    timeout = setTimeout(() => {
      console.log('styles changed');
      timeout = null;
    }, 0);
  });
});

* {
  transition: all 0.0001s;
}

<p>Edit my styles in the console to see messages</p>

或者你可以寻找一种方法，在特定事件触发时对所有元素的计算样式进行差异比较，但我无法想象这不会成为计算上的极大负担。

- Etheryte