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

Posted 2023-03-05

【中文标题】在 Chrome Devtools 中检测和观察对样式表所做的更改

【英文标题】：Detecting and observing changes made to stylesheets in Chrome Devtools

【发布时间】：2017-06-16 02:38:15

【问题描述】：

我想要做的是检测使用 Chrome 开发工具所做的样式更改（通过修改现有规则或创建规则进行），以便在我的 Web 应用程序中通过保存这些更改来保持这些更改。

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

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

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

【问题讨论】：

好像已经回答了***.com/questions/6843495/…

@AnanthuRV 不，这不是重复的 - 我不想使用 chrome 开发工具来保存更改，我希望 我的应用 来检测更改并注意它们，而不仅仅是通过开发工具愚蠢地保存更改，以便应用程序本身知道更改是什么。

您可以使用差异工具轻松查看更改并比较原始文件和修改后的文件。

我需要从我的应用程序中的 javascript 检测更改，在浏览器中运行的 javascript 的上下文中NOT 外部！跨度>

同意——这不是骗人的；目标问题没有询问如何跟踪，那里的答案也没有告诉您如何跟踪/观察，仅记录/保存到文件以供以后更改。

【参考方案1】：

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

另外，由于这个问题专门针对 Chrome Devtools，因此制作一个与 chrome.debugger API 挂钩的 chrome 扩展程序可能是有意义的。这当然意味着检测将仅限于使用扩展程序的人，但可以为您提供很大的灵活性。

【参考方案2】：

我引用@Bronzdragon 的回答，原因如下。

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

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

显然没有办法定义 setters 函数 来跟踪 Cs-s-rule 对象的属性变化。

否则，观察对象的现代更好的方式似乎是代理，它强制脚本对代理本身进行更改。因此，如果无法以某种方式访问​​浏览器行为（在本例中为 Chrome Web 工具操作），就无法设置 BROWSER → PROXY → Cs-s-rule 用于跟踪更改的过滤器。

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() 并试图找出某种字符串 diff o 之类的东西，有很多循环，没有办法使用JavaScript API。