CSS概览面板（CSS Overview Panel）提供了对于你的CSS的乏味信息。你能够查看高级别的CSS指标，这些指标在重构时特地有用。

如何应用此性能

启用此性能：

  1. 从“DevTools试验（Experiments pane）”窗格中启用CSS Overview（Cmd + Shift + P>Show Experiments）
  2. 从“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。