Extract Used CSS From a Chrome Coverage Export
Drop the JSON from the Coverage panel and get back one stylesheet with only the rules the page applied, still inside their media queries.
Coverage JSON to CSS
The Coverage panel in Chrome DevTools shows how much of each stylesheet a page really uses, and its Export button saves that as JSON. On its own the file is not much use: it holds the full text of every file plus lists of character positions. This page opens the Unused CSS Remover on its Coverage JSON tab, which turns the export into a stylesheet you can ship.
Record it so nothing goes missing
The result is only as complete as the recording. Start the recording with the reload button in the panel, so the rules used during page load are included, then use every part of the page a visitor might: the mobile menu, dropdowns, tabs, accordions, pop-ups and forms with their error states. Resize the window through your breakpoints while it records. Whatever you do not trigger is treated as unused.
What happens to each part of the stylesheet
| In the stylesheet | In the result |
|---|---|
| A rule the page used | Kept, exactly as written |
A used rule inside @media, @supports, @container or @layer | Kept inside the same block |
| A block with no used rule left | Removed with its rules |
@font-face, @keyframes, @import, @charset | Always kept |
| A rule the page never used | Removed |
Inline styles and scripts in the export
A page's own HTML appears in the export too, with the ranges of its inline <style> and <script> blocks. The tool reads each style block out of the document, keeps its used rules, and lists it in the results table as an inline style. JavaScript files are skipped, and the summary says how many entries were left out.
Using the result
The output starts each stylesheet with a comment naming its address, so you can split it again or keep it as one file. Replace the page's stylesheet links with the new file, test the page at every width, and keep the original files until you are sure. For a page builder site, the guide to turning an Elementor page into HTML and CSS covers the rest of the move, and PurgeCSS online is the way to go when you have the HTML and the CSS rather than a recording.