У меня есть простая html-страница:
<body>
<h1>This is my sample page</h1>
<div>This is my sample page content</div>
</body>
и простой файл CSS для этого:
div {
background: red;
color: white;
}
.aqua {
color: aqua;
}
h1 {
color: red;
}
Я использую кукловод для получения покрытия CSS:
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.coverage.startCSSCoverage()
await page.goto('http://localhost:3000', { waitUntil: 'networkidle2' });
const cssCoverage = await page.coverage.stopCSSCoverage();
console.log(JSON.stringify(cssCoverage, null, 2));
await browser.close();
})();
Из вышеприведенного кода я получил вывод наподобие:
[
{
"url": "http://localhost:3000/main.css",
"ranges": [
{
"start": 4,
"end": 58
},
{
"start": 102,
"end": 130
}
],
"text": " div {\n background: red;\n color: white;\n }\n\n .aqua {\n color: aqua;\n }\n\n h1 {\n color: red;\n }\n"
}
]
Знаете ли вы какой-нибудь инструмент / библиотеку, которая может использоваться для приятной визуализации вывода покрытия, который я получил?