カバレッジ ツールは、使用されているコードと使用されていないコードを見つけるのに優れています。ただし、使用されているコードのみを保存またはエクスポートする方法はないようです。使用されていないコードを非表示にすることも役立ちます。
アプリケーション内の Bootstrap CSS の量を削減しようとしています。ファイルは 7000 行を超えています。使用されているコードだけを取得する唯一の方法は、ファイルを注意深くスクロールし、緑色のセクションを探し、そのコードを新しいファイルにコピーすることです。これは時間がかかり、信頼性も低いです。
別の方法はありますか? Chrome 60 ではこの機能は追加されていないようです。
ベストアンサー1
これはパペッティアでできます
(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();
})();