有没有办法检查网页上使用或未使用的 CSS 样式？答案

【问题标题】：Is there a way to check which CSS styles are being used or not used on a web page?有没有办法检查网页上使用或未使用的 CSS 样式？
【发布时间】：2011-05-20 15:32:24
【问题描述】：

想知道网页上当前使用了哪些 CSS 样式。

【问题讨论】：

使用具有 CSS 检查器的浏览器。 Safari 和 Chrome（又名 Webkit）将此作为开发人员工具的一部分提供。在 Firefox 中，这是由 Firebug 插件提供的。我所知道的 Internet Explorer 没有类似的东西。检查器将允许您选择一个元素，右键单击，然后选择“检查元素”——然后它将显示哪些选择器以及哪些单独的规则应用于您选择的元素。
@Lee ie8 开发者工具栏的行为方式与 css 选择器中的 firebug 相同，您可以在右侧选择并查看应用的样式。
Extracting only the css used in a specific page的可能重复

标签： css

【解决方案1】：

Google Chrome 有两种方法来检查未使用的 CSS。

1.审计选项卡： > 右键单击页面上的+检查元素，找到“审计”选项卡，然后运行审计，确保选中“网页性能”。

列出所有未使用的 CSS 标记 - 见下图。

更新： - - - - - - - - - - - - - 或 - - - - - - - - - - - - -

2。 Coverage Tab： > 页面右键+Inspect Element，找到最右边的三个点（图中圈出）打开Console Drawer（或按Esc），最后点击抽屉左侧的三个点（在图片中圈出）打开覆盖工具。

Chrome 推出了一个工具来查看未使用的 CSS 和 JS - Chrome 59 Update 允许您开始和停止录制（图像中的红色方块），以便更好地覆盖页面上的用户体验。

显示文件中所有使用和未使用的 CSS/JS - 见下图。

【讨论】：

看看哪些也被使用会很棒....但这很棒，谢谢。
据我所知，如果您想知道使用的是什么，最好的办法是安装 Chrome 插件 - 抱歉
新的 Chrome 59 更新允许您查看使用/未使用的 CSS 和 JS
Chrome 使用什么库来执行此操作？
@UMAR multi-page website coverage == (single-page coverage) * n 其中 n = 网站中的每个页面。将工具/这个答案归类为“无用”对任何人都没有好处。

【解决方案2】：

为 Firebug 安装 CSS Usage add-on 并在该页面上运行它。它会告诉您该页面正在使用和未使用哪些样式。

【讨论】：

@Harry ，一旦你安装了这个插件，它就会作为 firebug 的一部分出现在你有 net 和 all//// 的选项卡中，如果你还需要什么，请告诉我
Chrome有这样的东西吗？
这似乎不再起作用，并且不再受支持，很遗憾。
请注意 Firebug 不再维护。我认为这个插件不适用于 Firefox 内置的 DevTools。
您可以在检查时在 chrome 中使用审核选项。这只会显示该特定页面上未使用的 css。

【解决方案3】：

只是为了完整性，因为它是在 cmets 中被问到的 - 现在Chrome 中也有 CSS 审计工具，用于同样的目的。这里有一些细节：

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

【讨论】：

我不确定这个答案所指的“CSS 审计工具”是否与 Chrome 开发者工具中的 Audits 选项卡相同，但这会说明您未使用哪些 CSS 规则（例如“Some.css: 42% is not used by the current page.”）。

【解决方案4】：

看看UnCSS。它有助于创建使用过的 CSS 的 CSS 文件。

【讨论】：

这是一个很棒的程序。谢谢！罗伯
一次性的好网络工具。 ty
这太棒了——UnCSS cannot be run on non-HTML pages, such as templates or PHP files——没关系....
@brian-powell 是的，必须首先生成模板输出。 UnCSS 怎么知道需要什么？

【解决方案5】：

我正在使用CSS Dig。它是为 chrome 制作的，但我认为它是一个很棒的工具！

【讨论】：

我刚刚尝试过 - 它通过调用 cssdig.com 来完成所有操作，因此它无法查看或分析本地托管的任何内容。

【解决方案6】：

无需任何第三方工具和任何应用程序，您就可以使用覆盖选项卡中的 chrome 开发工具找到未使用的 CSS 和 javascript。阅读以下来自谷歌开发者的帖子。 chrome coverage tab

【讨论】：

【解决方案7】：

尝试使用这个工具，它只是一个简单的 js 脚本https://github.com/shashwatsahai/CSSExtractor/ 这个工具有助于从特定页面获取 CSS，列出所有活动样式的来源，并将其保存为 JSON，其中源为键，规则为值。它从 href 链接加载所有 CSS 并告诉它们应用的所有样式您可以修改代码以将所有 css 保存到 .css 文件中。从而结合你所有的 css。

【讨论】：

Shashwat，能否请您更新一下文档，以便更清楚如何使用它？
添加了文档，文档中的所有内容都应该清楚，请在developers.google.com/web/tools/chrome-devtools/console/… 中检查 $0，如有其他疑问，请发送邮件至 ssahai97@gmail.com