我正在尝试编写一个在浏览器中运行的工具(用Javascript(，可以在单个时间点拍摄网站状态的"快照"。它去掉了脚本标记，将图像和字体内联到数据url，并内联CSS。CSS部分在一些网站上给我带来了麻烦。
我首先假设document.styleSheets有一个页面当前样式的权威列表。不过，仅仅按照顺序掌握这些规则似乎并不能让我在一个页面上找到所有活跃的风格。
此外，document.styleSheets中的某些工作表似乎无法访问，因为存在跨源内容。
有没有一种方法可以"走过一个页面的CSSOM"？理想情况下，我可以做到这一点，而无需编写浏览器扩展。最终目标是在长时间运行的e2e测试失败时提供一个可检查的快照。谢谢你的帮助！
我不知道我是否正确理解了你的目标，但有一些很好的工具可以进行css单元测试。
https://github.com/jamesshore/quixote
也许这符合您的需要，您可以通过单元测试来解决问题。
我最近回到这个问题上，找到了(我的特定问题的(解决方案。
我最初的假设是document.styleSheets至少包含为页面加载的样式表的完整列表。不过，在开发人员工具的"网络"选项卡中，我看到其他样式表正在下载(在页面呈现过程中的某个时刻(。起初，我不知道这些是如何加载的，也不知道它们在页面的当前上下文中属于哪里。原来答案是CSS导入
理解了这一点，我就可以获取页面的document.styleSheets的当前列表，并递归地"获取"任何CSS导入。除了抓取内联样式外，这还让我对给定页面上的所有样式都有了一个非常准确的了解。这种方法仍然不适用于跨原点图纸加载，但这可能是一个难以解决的"浏览器内"问题