推荐一个Chrome DevTools实用小插件：CSS Overview Panel

文章2022-05-1490 人已阅来源：网络

本篇文章给大家推荐一个实用Chrome DevTools小插件：CSS Overview Panel（CSS概览面板），使用它重构和改善样式表。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

CSS概览面板（CSS Overview Panel）提供了关于你的CSS的有趣信息。你可以查看高级别的CSS指标，这些指标在重构时特别有用。

如何使用此功能

启用此功能：

从“DevTools实验（Experiments pane）”窗格中启用CSS Overview（Cmd + Shift + P>Show Experiments）
从“DevTools”Command Menu中选择“Show CSS Overview”（Cmd + Shift + P）

在CSS Overview面板中，您可以导航到不同的部分：

概述摘要（Overview Summary）-CSS上有趣的指标，例如元素数量，样式表，类vs ID选择器，复杂选择器等等。
颜色（Colors）-可视化预览背景色、文字色、填充色和边框色。颜色本身是可以点击的，所以你可以准确地查看哪些元素使用了这些颜色。
字体信息（Font info） -衡量字体的使用情况以及它们在样式表中出现的频率。包括字体重量和行高指标。可以选择字体指标来显示受影响的元素。
未使用的声明（Unused declarations）-未使用的CSS声明，可以照常单击。
媒体查询（Media queries）-CSS媒体查询的细节（如最小/最大宽度值）以及它们在样式表中出现的频率。你可以点击这些来直接跳到源面板。如果你启用了源映射，你将能够看到原始样式，例如Sass。

推荐一个Chrome DevTools实用小插件：CSS Overview Panel