Chrome开发者工具-有没有办法查看当前页面使用了哪些CSS？

Question

使用谷歌的Chrome开发者工具，我有时会对我的代码进行审核，以查看它如何组合。这些工具总是建议“删除未使用的CSS规则”。然后点击箭头，通常会显示一个庞大的CSS规则列表，这些规则当前页面没有使用。

是否有一种方法可以查看当前页面正在使用的CSS规则列表？

- sscirrus

---

我不相信Chrome开发者工具有这样的功能。但是可能有人编写了一个单独的工具来完成这个任务。 - Amber

我认为Google Page Speed会告诉你未使用的CSS规则。也许这与你所要求的相反。至少在Firefox中是这样工作的。 - Michael Mao

@Michael - 是的，相反的情况。Chrome工具已经显示了未使用的CSS列表。 - sscirrus

Answer 1

我知道可能有点晚了，但如果还有其他人像我一样偶然发现这个问题并且想知道，Dust-Me选择器是火狐浏览器的插件，它可以告诉你每个样式表中使用和未使用的选择器。

希望这能帮到你。

- sbditto85

Answer 2

开发者工具是开源的，因此您可以创建补丁。
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);

- GDmac

Answer 3

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

- plebksig

---

那并没有回答问题，neXib。我问的是如何找出当前页面正在使用哪些特定的CSS规则，而不是加载了哪些样式表。 - sscirrus

啊，抱歉。但是显示未使用的样式是有意义的，因为它们不存在于样式表中，但是显示哪些样式被使用会因为层次结构而令人困惑，所以对我来说没有意义。如果它说使用了样式li.horse，但稍后你定义了li.horse .mane，那么这将不太可用。 - plebksig