关于chrome-devtools:Chrome-DevTools使用CSS概述面板重构和改善样式表

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。