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

Question

想知道网页上当前使用的CSS样式。

Answer 1

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

<强> 1。审核标签：＆gt;右键单击页面上的+检查元素，找到“审核”选项卡，然后运行审核，确保选中“网页性能”。

列出所有未使用的CSS标记 - 请参阅下面的图片。

<强>更新 - - - - - - - - - - - - - - 或 - - - - - - - - - - - - - -

<强> 2。覆盖率标签：＆gt;右键单击+检查页面上的元素，找到最右边的三个点（在图像中圈出）并打开控制台抽屉（或点击Esc），最后点击抽屉左侧的三个点（图中圈出）打开Coverage工具。

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

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

Answer 2

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

Answer 3

仅仅为了完整性而且因为评论中提到了这一点 - Chrome中的CSS审核工具现在也出于同样的目的。这里有一些细节：

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

Answer 4

我正在使用CSS Dig。它是为镀铬而制造的，但我认为它是一个很棒的工具！

Answer 5

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

Answer 6

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

Answer 7

没有任何第三方工具和任何应用程序，您可以使用Coverage标签中的chrome dev工具找到未使用的CSS和javascript。阅读以下Google开发人员的帖子。 chrome coverage tab