javascript - 侦听Chrome Devtools中对CSS类所做的更改(Listening for changes made to CSS classes in Chrome Devtools)

Question

I want to check if someone has modified the CSS rules of an element through Chrome Devtools.(我想检查是否有人通过Chrome Devtools修改了元素的CSS规则。)

Normally MutationObserver would suffice for this, however, MutationObserver is only able to observe changes to the inline style attribute, and cannot detect when the element's CSS properties have been modified through devtools (or if a new rule is added to the inspector stylesheet).(通常，MutationObserver可以满足此要求，但是，MutationObserver仅能观察到内联样式属性的更改，并且无法检测何时通过devtools修改了元素的CSS属性（或者是否将新规则添加到检查器样式表）。)

What's the best way to listen for Chrome Devtools's CSS rule changes with JavaScript?(用JavaScript侦听Chrome Devtools的CSS规则更改的最佳方法是什么？)

  ask by DataPools translate from so

Answer 1

One indirect way to detect initial changes would be via transition events.(一种检测初始变化的间接方法是通过过渡事件。)

Of course, this can be bypassed, but then again, everything you do on the frontend can.(当然，可以绕开它，但是话又说回来，您在前端执行的所有操作都可以。)

The gist of the idea is to add an incredibly short transition to all elements and listen to any transition events fired by it.(这个主旨是为所有元素添加一个非常短的过渡，并监听由它引发的任何过渡事件。)

 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> 

Alternatively you could look to find a way to diff computed styles on all elements when certain events are fired, but I can't see a way how that wouldn't be prohibitively expensive to compute.(另外，您可能希望找到一种方法，以在触发某些事件时对所有元素的计算样式进行比较，但是我看不到这样的方式来计算成本不会过高。)