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>"; ?>

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

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*