How to export Chrome CSS code coverage

Google Chrome allows you to export the code coverage as JSON but not as the file.

At least not that I could find how to do it. It was easier, however, to find how to generate a new CSS file based on the JSON export.

Use this small PHP script to output the used CSS based on the Chrome Code Coverage.

⚠️ Media queries don't seem to be exported. I didn't need it for my use case but it's something to consider exploring further.

<?php

$target_css = '/path/to/my/style.css';
$json_string = 'Coverage-XXXXX.json';

$jsondata = file_get_contents($json_string);
$obj = json_decode($jsondata,true);
$output_css = '';

foreach( $obj as $arr ) {
    if( strpos( $arr['url'], $target_css ) ) {
        
        foreach ($arr['ranges'] as $name => $value) {
            $length = $value['end'] - $value['start'];
            $output_css .= substr($arr['text'], $value['start'], $length) . PHP_EOL;
        }
        
        break;
    }
}

echo "<pre>";
echo $output_css;
echo "</pre>";
?>Code language: PHP (php)

Kudos: https://www.tring-web-design.co.uk/2019/04/chrome-devtools-code-coverage-parser/