侦听在Chrome Devtools中对CSS类所做的更改

Question

我想检查是否有人通过Chrome Devtools修改了元素的CSS规则。通常 MutationObserver 就足够了，但是，MutationObserver 只能观察内联样式属性的更改，并且无法检测元素的 CSS 属性何时通过 devtools 被修改(或者是否将新规则添加到检查器样式表中(。

使用 JavaScript 监听 Chrome Devtools 的 CSS 规则更改的最佳方式是什么？

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);
});

更多信息可在此处获得。

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>

或者，您可以寻找一种方法在触发某些事件时在所有元素上比较计算样式，但我看不出

如何计算成本不高。