获取整个网页的“计算”CSS

Question

我们有一些网站，每个网站都引用了3-5个CSS文件。一些CSS文件被多个网站共享，一些则只与一个页面相关。

我们需要重新组织CSS结构，使文件数更少。我们的目标是以这种方式进行重组，以便所有网页上的有效CSS规则保持不变。换句话说，在CSS合并后，网页应该看起来相同。

但是，我们不想在所有浏览器中检查所有网页上的每一个边距和尺寸。

是否有一种方法可以检查在CSS文件合并期间"有效CSS规则"是否已更改？

我正在寻找一种工具，它可以为网站上的每个HTML元素生成有效的CSS规则。这将是Google Chrome在开发工具中使用的相同逻辑：

如果有一种自动生成这些"计算出的CSS规则"的方法，我们就可以生成before.css和after.css文件，然后进行比较。任何有效规则的更改都会显示在这些文件中。当然，这些生成的文件将非常庞大。

有什么提示吗？

- Jonas Sourlier

---

你可以在Chrome开发者工具中运行审核并查看“未使用的CSS规则”作为开始。不过，这需要对每个页面都进行操作。 - Nico O

Answer 1

这段代码将把页面上每个元素的计算出的CSS打印到控制台。

var elms = document.getElementsByTagName("*");

for (var i = 0; i < elms.length; i++) {
     console.log(elms[i].tagName, window.getComputedStyle(elms[i]).cssText)
}

请注意，有许多无用的CSS（每个默认样式）需要过滤掉。

JSFiddle演示

- quw