October 29, 2018
阅读puppeteer example的代码，看到了里面有使用Coverage的使用，由于API中没有其目的的详细介绍，花了点时间研究了一下。
Puppeteer的目的其实是对Chrome DevTools API的封装，而Coverage其实是对Chrome DevTools中的检查CSS 和 JS 代码覆盖率的功能的封装。
调用顺序：
分析结果为数组，没项包含了按url统计的js/css分析结果。
下面为一个完整的列子，用来分析某个网站的覆盖率数据。
url <string> StyleSheet URL
text <string> StyleSheet content
ranges <Array<Object>> StyleSheet ranges that were used. Ranges are sorted and non-overlapping.
start <number> A start offset in text, inclusive
end <number> An end offset in text, exclusive
class: Coverage
coverage.startCSSCoverage(options)
coverage.startJSCoverage(options)
coverage.stopCSSCoverage()
coverage.stopJSCoverage()
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulate(iPhone);
//Begin collecting CSS coverage data
await Promise.all([
page.coverage.startCSSCoverage()
]);
//Visit desired page
await page.goto('http://www.baidu.com/');
//Stop collection and retrieve the coverage iterator
const [cssCoverage] = await Promise.all([
page.coverage.stopCSSCoverage(),
]);
//Investigate CSS Coverage and Extract Used CSS
const css_coverage = [...cssCoverage];
let css_used_bytes = 0;
let css_total_bytes = 0;
let covered_css = "";
for (const entry of css_coverage) {
css_total_bytes += entry.text.length;
console.log(`Total Bytes for ${entry.url}: ${entry.text.length}`);
for (const range of entry.ranges){
css_used_bytes += range.end - range.start - 1;
covered_css += entry.text.slice(range.start, range.end) + "\n";
}
}
console.log(`Total Bytes of CSS: ${css_total_bytes}`);
console.log(`Used Bytes of CSS: ${css_used_bytes}`);
fs.writeFile("./exported_css.css", covered_css, function(err) {
if(err) {
return console.log(err);
}
console.log("The file was saved!");
});
await browser.close();
})();