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/
Mentions