Couverture de Chrome Devtools: comment sauvegarder ou capturer le code utilisé?
l'outil de couverture est bon pour trouver le code utilisé et non utilisé. Cependant, il ne semble pas y avoir de façon de sauvegarder ou d'exporter seulement le code utilisé. Même cacher le code non utilisé serait utile.
j'essaie de réduire la quantité de CSS Bootstrap dans mon application; le fichier est de plus de 7000 lignes. La seule façon d'obtenir juste le code utilisé est de bien faire défiler le fichier, recherchez les sections vertes, puis copiez ce code dans un nouveau fichier. C'est beaucoup de temps et peu fiable.
y a-t-il une autre façon? Chrome 60 ne semble pas avoir ajouté cette fonctionnalité.
2 réponses
Vous pouvez faire cela avec marionnettiste
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage()
//Start sending raw DevTools Protocol commands are sent using `client.send()`
//First off enable the necessary "Domains" for the DevTools commands we care about
const client = await page.target().createCDPSession()
await client.send('Page.enable')
await client.send('DOM.enable')
await client.send('CSS.enable')
const inlineStylesheetIndex = new Set();
client.on('CSS.styleSheetAdded', stylesheet => {
const { header } = stylesheet
if (header.isInline || header.sourceURL === '' || header.sourceURL.startsWith('blob:')) {
inlineStylesheetIndex.add(header.styleSheetId);
}
});
//Start tracking CSS coverage
await client.send('CSS.startRuleUsageTracking')
await page.goto(`http://localhost`)
// const content = await page.content();
// console.log(content);
const rules = await client.send('CSS.takeCoverageDelta')
const usedRules = rules.coverage.filter(rule => {
return rule.used
})
const slices = [];
for (const usedRule of usedRules) {
// console.log(usedRule.styleSheetId)
if (inlineStylesheetIndex.has(usedRule.styleSheetId)) {
continue;
}
const stylesheet = await client.send('CSS.getStyleSheetText', {
styleSheetId: usedRule.styleSheetId
});
slices.push(stylesheet.text.slice(usedRule.startOffset, usedRule.endOffset));
}
console.log(slices.join(''));
await page.close();
await browser.close();
})();
j'ai parlé avec l'ingénieur qui possède cette fonctionnalité. Depuis Chrome 64, Il n'y a toujours pas de possibilité d'exporter les résultats d'une analyse de couverture.
Étoile problème n ° 717195 pour aider l'équipe à prioriser cette demande de fonctionnalité.