How do I use this feature
Enable this feature:
- Experiment from “devtools”（Experiments pane）”Enable in paneCSS Overview（Cmd + Shift + P>Show Experiments）
- 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.
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.