在 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>

或者，当某些事件被触发时，您可以寻找一种方法来区分所有元素上的计算样式，但我看不出有一种方法计算起来不会非常昂贵。