有没有一种方法来检查哪些 CSS 样式正在使用或没有在网页上使用？

想知道哪些 CSS 样式目前正在网页上使用。

120102 次浏览
小开
最佳答案

为 Firebug 安装 CSS 用法附加组件并在该页面上运行它。它将告诉您该页正在使用和未使用哪些样式。

小开

仅仅是为了完整性，并且因为它在评论中被问到——现在在 铬合金中也有用于同样目的的 CSS 审计工具。详情请浏览此网页:

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

小开

我使用 CSS Dig。它是为铬制造的，但我认为它是一个伟大的工具！

小开

更新于2022年7月-看起来谷歌已经删除了下面的选项 # 1(审计标签已经被删除，灯塔和记录器已经被添加)

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

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

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

Screen Shot of Chrome's Audit Tool

更新: --------- 或------------------------------------------------------------------------------------------------------

2.Coverage Tab: > 右击 + 检查页面上的元素，找到最右边的三个点(图中圈出) ，打开控制台抽屉(或者按 Esc) ，最后点击抽屉左边的三个点(图中圈出) ，打开 Coverage 工具。

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

在文件中显示所有已使用和未使用的 CSS/JS

  • 见下图。

Example of Coverage tool in Chrome

小开

看一下 联合国社会科学院，它有助于创建一个用过的 CSS 的 CSS 文件。

小开

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

小开

没有任何第三方工具和任何应用程序，您可以找到未使用的 CSS 和 javascript 通过使用铬开发工具在覆盖标签。阅读以下来自谷歌开发者的帖子。 铬覆盖率标签


提交答案