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