css - 有没有办法检查网页上正在使用或未使用哪些 CSS 样式？

Question

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

Answer 1

更新于 2022 年 7 月 - Google 似乎删除了下面的选项 #1(“审核”选项卡已删除，并添加了 Lighthouse 和记录器)

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

<强>1。审核选项卡:> 右键单击​​并检查页面上的元素，找到“审核”选项卡，然后运行审核，确保选中“网页性能”。

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

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

<强>2。 Coverage Tab:> 在页面上右击+Inspect Element，找到最右边的三个点(图中圈出)，打开Console Drawer(或者按Esc)，最后点击抽屉左边的三个点(在图像中圈出)打开覆盖工具。

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

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

• 见下图。