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

Question

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

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

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

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

Answer 1

可以按照this answer进行操作。它建议使用MutationObserver来监听更改。

或者，由于这个问题是专门针对Chrome Devtools的，因此可以将chrome扩展名挂接到chrome.debugger API中。当然，这意味着检测将仅限于具有扩展名的人员，但可以为您提供很大的灵活性。

Answer 2

出于以下原因，我引用@Bronzdragon答案。

在这种情况下，您必须使用 CSS对象模型（CSSOM）。 关于 CSSStyleSheet界面：

  

由于document.styleSheets列表无法直接修改，因此   没有有用的方法手动创建新的CSSStyleSheet对象（尽管   可以在以下位置将可构造样式表对象添加到Web API：   一点）。要创建新的样式表，请插入或   元素添加到文档中。

因此显然无法定义 setter函数来跟踪 CSSRule 对象的属性更改。

否则，观察对象的现代更好方法似乎是代理，这迫使脚本对代理本身进行更改。因此，无法以某种方式访问​​浏览器行为（在本例中为Chrome Web Tools动作），无法设置 BROWSER → PROXY →< strong> CSSRule 过滤器，用于跟踪更改。

• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

最后机会

我不想毫无理由地深入CSS对象模型的JSON.stringify（）并尝试找出类似这样的字符串差异，并带有很多循环且无法使用JavaScript API。