Благодаря статье Филиппа Кригеля (https://www.philkrie.me/2018/07/04/extracting-coverage.html) мне удалось настроить Puppeteer для извлечения CSS покрытия из URL и вывода этого CSS в файл.
Вот как это сделать:
Шаг 1. Глобальная установка node.js
Шаг 2. Создание папки на рабочем столе
Шаг 3. Внутри папки установите Node Package Manager (NPM) имодуль узла Puppeteer
Шаг 4: Создайте файл JavaScript внутри папки, назовите его range.js
Шаг 5: Поместите этот код в этот файл js:
const puppeteer = require('puppeteer');
// Include to be able to export files w/ node
const fs = require('fs');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Begin collecting CSS coverage data
await Promise.all([
page.coverage.startCSSCoverage()
]);
// Visit desired page
await page.goto('https://www.google.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[0]) {
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();
})();
Шаг 6: ОБЯЗАТЕЛЬНО ЗАМЕНИТЕ URL на этом этапе в коде await page.goto('https://www.google.com'); на желаемый URL
Шаг 7: В командной строкеtool (Git Bash) тип node coverage.js
Будет создан файл с именем exported_css.css, который будет содержать весь CSS покрытия для URL-адреса, заданного вами в коде.
CAVEAT: Thisизвлечет CSS покрытия из ВСЕХ CSS-ресурсов, которые загружаются с заданного вами URL.Затем вам придется дополнительно оптимизировать этот CSS (не рассматривается в этом примере).