Chrome devtools: Refactoring and improving style sheets using CSS overview panels

Time:2021-10-16

CSS overview panelCSS Overview Panel)Provides interesting information about your CSS. You can view high-level CSS metrics, which are particularly useful in refactoring.

Chrome devtools: Refactoring and improving style sheets using CSS overview panels

How do I use this feature

Enable this feature:

  1. Experiment from “devtools”(Experiments pane)”Enable in paneCSS Overview(Cmd + Shift + P>Show Experiments)
  2. From “devtools”Command MenuMedium selection“Show CSS Overview”(Cmd + Shift + P)

In the CSS overview panel, you can navigate to different sections:

  • Overview summary-Interesting indicators on CSS, such as number of elements, style sheets, class vs ID selectors, complex selectors, and so on.
  • Colors-Visual preview background color, text color, fill color and border color. The colors themselves are clickable, so you can see exactly which elements use these colors.
  • Font info-Measures the use of fonts and how often they appear in style sheets. Including font weight and line height indicators. You can select a font indicator to display the affected elements.
  • Unused declarations-Unused CSS declarations can be clicked as usual.
  • Media queries-Details of CSS media queries (such as minimum / maximum width values) and how often they appear in the stylesheet. You can click these to jump directly to the source panel. If you enable source mapping, you will be able to see the original style, such as sass.

Chrome devtools: Refactoring and improving style sheets using CSS overview panels

When to use this feature

WhenrestructurePlease use this function when your code or standardizing the brand style of each page. For example, if you notice a slight change in “color” scattered in your CSS, this in the overview panelColors paneIt’s a good place to identify this kind of thing.

You can also use the media query panel in the CSS overview panel to check whether you query the breakpoint set for the expected media and ensure that your page looks good on all screen sizes.

Unused declarationPanels may help improve networking and rendering by telling you which CSS can be removedperformance

Finally, you can use the CSS overview panel to communicate the status of CSS code to other members of your front-end team, especially new recruits, including areas that may need to focus on.

The CSS overview panel can provide valuable indicators about CSS, while the lighthouse panel provides indicators for the whole website, including JavaScript.