检测并观察Chrome Devtools中样式表所做的更改

Question

我想要做的是检测使用Chrome devtools(通过修改现有规则或创建规则)所做的样式更改,以便在我的Web应用程序中,我可以通过保存它们来保留这些更改.

到目前为止,我能想到的唯一方法是循环遍历所有元素并获得它们的计算样式,但是这种方法对于类不适用.除非有某种方法来获取类的样式信息而不将其实际分配给元素 - 或者循环遍历所有已知的类,将它应用于元素并使用其计算的样式？无论哪种方式,这似乎是一个非常hacky解决方案,我想知道是否有更好的方法来处理这个问题.

我应该澄清一下 - 我不想使用devtools本身将更改保存为完整文件.我想仅从javascript 跟踪应用程序本身的上下文中的各个更改.这不是链接问题的重复.

因此,用户打开开发工具,对样式进行更改,在我的应用程序中运行的javascript想要知道哪些样式已更改以及如何在没有任何额外的最终用户步骤的情况下.

Answer 1

按照这个答案是可以这样做的。它建议使用MutationObserver来监听变化。

或者，由于这个问题专门与 Chrome Devtools 有关，因此制作一个挂钩到chrome.debugger API 的chrome 扩展可能是有意义的。这当然意味着检测仅限于具有扩展名的人，但可以为您提供很大的灵活性。