Javascript 在网站上快照所有CSS

我正在尝试编写一个在浏览器中运行的工具（Javascript），它可以在单个时间点对网站的状态进行“快照”。它将脚本标记、图像和字体内联到数据URL以及CSS内联。CSS部分在一些网站上给我带来了麻烦

我首先假设document.styleSheets有一个页面当前样式的权威列表。但是，似乎仅仅按照顺序选择这些规则并不能获得页面上所有的活动样式

此外，document.styleSheets中的某些工作表似乎由于跨来源的内容而无法访问

---

有没有一种方法可以“浏览CSSOM”页面？理想情况下，我不需要编写浏览器扩展就可以做到这一点。最终目标是在长时间运行的e2e测试失败时提供可检查的快照。谢谢你的帮助

我不知道我是否正确理解了您的目标，但是有一些很好的工具可以进行css单元测试

---

也许这符合您的需要，您可以通过单元测试来解决您的问题。

我最近回到这个问题，并找到了解决方案（针对我的特定问题）

我最初的假设是document.styleSheets至少包含为页面加载的样式表的完整列表。不过，在开发人员工具的“网络”选项卡中，我看到正在下载其他样式表（在页面呈现过程中的某个时刻）。起初，我不知道这些内容是如何加载的，也不知道它们在当前页面上下文中属于何处。原来答案是

---

理解了这一点，我就能够获取页面当前的document.styleSheets列表，并递归地“获取”任何CSS导入。除了删除内联样式外，这还为我提供了给定页面上所有样式的非常准确的图片。这种方法仍然不适用于跨原点图纸加载，但这可能是“在浏览器中”解决的一个难题。

感谢链接。但这不是我想要的。这个问题的动机是，我偶尔会编写一个需要一段时间才能执行的端到端测试（我们已经确定了一个（糟糕的）测试框架）。如果测试最后因为找不到元素而失败（例如，通过css选择器），我想使用开发工具在页面中进行深入研究，看看发生了什么。有了这种工具，我就不必再担心复制精确的测试步骤了。