Chrome Devtools Coverage: how to save or capture code used code?

Question

The Coverage tool is good at finding used and unused code. However, there doesn\'t appear to be a way to save or export only the used code. Even hiding unused code would b

Answer 1

I downloaded the latest version of canary and the export button was present.

I then used this PHP script to parse the json file returned. (Where key '6' in the array is the resource to parse). I hope it helps someone!

$a = json_decode(file_get_contents('coverage3.json'));
$sText = $a[6]->text;
$sOut = "";
foreach ($a[6]->ranges as $iPos => $oR) {
    $sOut .= substr($sText, $oR->start, ($oR->end-$oR->start))." \n";
}
echo '<style rel="stylesheet" type="text/css">' . $sOut . '</style>';

Answer 2

You can do this with Headless Chrome and puppeteer:

1. In a new folder install puppeteer using npm (this will include Headless Chrome for you):

npm i puppeteer --save

2. Put the following in a file called csscoverage.js and change localhost to point to your website.

:

const puppeteer = require('puppeteer');
const util = require('util');
const fs    = require("fs");

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.coverage.startCSSCoverage();
 await page.goto('https://localhost'); // Change this
 const css_coverage = await page.coverage.stopCSSCoverage();
 console.log(util.inspect(css_coverage, { showHidden: false, depth: null }));
 await browser.close();

let final_css_bytes = '';
let total_bytes = 0;
let used_bytes = 0;

for (const entry of css_coverage) {
  final_css_bytes = "";

  total_bytes += entry.text.length;
  for (const range of entry.ranges) {
    used_bytes += range.end - range.start - 1;
    final_css_bytes += entry.text.slice(range.start, range.end) + '\n';
  }

  filename = entry.url.split('/').pop();

  fs.writeFile('./'+filename, final_css_bytes, error => {
    if (error) {
      console.log('Error creating file:', error);
    } else {
      console.log('File saved');
    }
  });
}
})();

3. Run it with node csscoverage.js

This will output all the CSS you're using into the separate files they appear in (stopping you from merging external libraries into your own code, like the other answer does).