Chrome开发者工具 - 以何种方式查看当前页面使用的CSS？

Question

使用Google的Chrome开发者工具，我有时会对我的代码进行审核，以了解它是如何结合在一起的。这些工具总是提出的建议之一是“删除未使用的CSS规则”。单击箭头，然后显示当前页面未使用的CSS规则的大量列表。

有没有办法查看当前页面使用的CSS规则列表？

Answer 1

我知道这可能有点晚了但是万一其他人偶然发现了这个并且我也很好奇我发现 Dust-Me Selectors附加功能for firefox 会告诉你两个页面上使用和未使用的选择器用于每个使用的样式表。

希望这有助于

Answer 2

按CTRL-SHIFT-J访问Chrome的开发工具。在那里，您可以选择资源选项卡，选择在左侧启用它们，并在必要时刷新页面。它将显示所有已加载的文件，包括样式表。

Answer 3

开发人员工具是开源的，因此您可以创建补丁 http://dev.bootstraponline.com/2011/11/automatically-remove-unused-css-rules.html

snipp

//=== modified file 'AuditRules.js'
if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText])
{
    usedCss += "\n" + rule.selectorText + " {" + rule.style.cssText + "}\n";
    continue;
}
//...
// Save only used css rules.
InspectorFrontendHost.saveAs("used.css", usedCss);