javascript - 在 Chrome Devtools 中检测和观察对样式表所做的更改

Question

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

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

我应该澄清一下——我不想使用开发工具本身将更改保存为完整文件。我想跟踪 仅个别更改 并且在来自 javascript 的应用程序本身的上下文中。 这不是链接问题的副本。

所以用户打开开发工具，对样式进行更改，在我的应用程序中运行的 javascript 想要知道更改了什么样式以及如何更改，而无需任何额外的最终用户步骤。

Answer 1

可以按照 this answer 这样做.它建议使用 MutationObserver监听变化。

或者，由于这个问题专门针对 Chrome Devtools，因此制作一个连接到 chrome.debugger API 的 chrome 扩展可能是有意义的。 .这当然意味着检测将仅限于拥有扩展名的人，但可以为您提供很大的灵 active 。