Chrome DevTools：使用CSS概述面板重构和改善CSS

Original 张张前端全栈开发者 2022-07-09

收录于合集 #资源和工具 33个

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。

当重构你的代码，或规范各页面的品牌风格时，请使用此功能。例如，如果你注意到一种『颜色』的轻微变化散布在你的CSS中，概览面板中的这个颜色面板（Colors pane）是识别这种东西的好地方。

您还可以使用CSS概览面板中的媒体查询面板来检查您是否针对预期的媒体查询断点集，并确保您的页面在各种屏幕尺寸上看起来都很好。

未使用的声明面板可能会通过告知您可以删除哪些CSS来帮助改善网络和渲染性能。

最后，你可以使用CSS概览面板向你的前端团队的其他成员，特别是新入职者传达CSS代码的状态信息，包括可能需要重点关注的领域。

CSS概览面板可以提供关于CSS的有价值的指标，而Lighthouse面板则提供整个网站的指标，包括JavaScript。

临走前留下，今天的福利