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

或者，當某些事件被觸發時，您可以尋找一種方法來區分所有元素上的計算樣式，但我看不出有一種方法計算起來不會非常昂貴。