Chrome 开发者工具 - 有什么方法可以查看当前页面使用了什么 CSS？答案

【问题标题】：Chrome developer tools - any way to see what CSS is used by the current page?Chrome 开发者工具 - 有什么方法可以查看当前页面使用了什么 CSS？
【发布时间】：2014-05-02 03:49:46
【问题描述】：

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

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

【问题讨论】：

我不相信 Chrome 开发工具有办法做到这一点，不。不过，有人可能已经编写了一个单独的工具来执行此操作。
我认为 Google Page Speed 会告诉你未使用的 CSS 规则。也许这与您所要求的相反。至少它在 Firefox 中是这样工作的。
@Michael - 是的，恰恰相反。 Chrome 工具已显示未使用的 CSS 列表。

标签： css browser google-chrome

【解决方案1】：

我知道这可能有点晚了，但万一其他人像我一样偶然发现了这个并且很好奇我发现 Firefox 的 Dust-Me Selectors 插件会告诉你页面上使用的每个样式表的已使用和未使用的选择器。

希望对你有帮助

【讨论】：

【解决方案2】：

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

【讨论】：

这并没有回答 neXib 的问题。我在问如何找出当前页面正在使用的特定 CSS 规则，而不是加载了哪些样式表。
对不起。但是显示未使用的样式是明智的，因为它们不存在于样式表中，但是由于层次结构的原因，显示哪些已使用会混淆使用，所以对我来说显示它没有意义。如果它说使用了 li.horse 样式，但后来你定义了 li.horse .mane ，那将不是很有用。

【解决方案3】：

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

截图

//=== 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);

【讨论】：