Chrome DevTools: Export your raw Code Coverage Data

The Code Coverage tool visually shows you which lines of code in your CSS and JavaScript are used and unused. You can now export your raw Code Coverage data which then opens up possibilities for tooling integration, such as a tool which can modify your CSS/JS based on its used/unused code.

To try this feature:

1. Open up the Coverage pane by clicking the three dots in the drawer and selecting Coverage
2. Select Start Instrumenting coverage and reload Page
3. Click the Export button

Raw Code Coverage data looks like this:

[{
    "url": "https://example.com/main.css",
    "ranges": [{
            "start": 0,
            "end": 106
        },
        {
            "start": 531,
            "end": 787
        }
    ],
    "text": "body{margin:0;font-family:\"Helvetica Neue\",\"Helvetica\",Helvetica,Arial,sans-serif}*{box-sizing:border-box}.header{background-color:#efefef;padding:10px 30px;display:flex;justify-co...."
}]

💡️ Tip: If you're looking to improve your Node.js skills, consider how you'd parse raw Code Coverage data similar to the above. How would you export a new resource containing only the code which is marked as used?