Chrome DevTools CSS Coverage：如何分组已用/未用CSS并提取已用代码？

Great question—those red/green highlights are helpful but not always the most efficient when you need to clean up unused CSS. Let’s tackle both of your needs step by step:

1. Grouping CSS by Used/Unused Status #

Chrome DevTools doesn’t have a dedicated "group by usage" button, but you can achieve a similar organized view with these tricks:

• After opening the Coverage panel and selecting your target CSS file, you’ll see a line-by-line breakdown of rule usage in the right-hand detail pane.
• Sort to cluster similar statuses: Click the Usage column header in the detail view. This will automatically group all used CSS rules (green) together and unused ones (red) together, creating clear, grouped sections.
• Filter to isolate groups: Use the filter bar at the top of the detail pane to type used or unused—this hides the opposite category entirely, making it easier to focus on one group. You can also use the toggle buttons (Show all, Show only used, Show only unused) at the top of the pane to quickly switch between views.

2. Copying Only Used CSS Efficiently #

There are two quick, reliable ways to grab just the CSS your page actually uses:

Method 1: Right-Click Export (Fastest) #

• In the main Coverage panel (where you see the list of all CSS files), right-click the file you want to extract code from.
• Select the Copy used CSS option from the context menu. This automatically copies all valid, used CSS rules from that file to your clipboard—no manual selection or cleanup needed!

Method 2: Filter & Manual Copy #

• Open the detail view for your CSS file, then click the Show only used toggle at the top of the pane.
• Press Ctrl+A (Windows/Linux) or Cmd+A (Mac) to select all visible used CSS code, then copy it with Ctrl+C/Cmd+C. This works well if you want to review the code before copying.

Bonus tip: If you’re working with multiple files, repeat these steps for each one, or use the Coverage panel’s export icon (top-right corner) to download a JSON report of all unused code—though for direct copying of used CSS, the right-click method is your best bet.

内容的提问来源于stack exchange，提问作者anurag