Chrome Devtools的适用范围:如何保存或捕获使用过的代码的代码? [英] Chrome Devtools Coverage: how to save or capture code used code?

问题描述

覆盖率工具擅长查找已使用和未使用的代码.但是，似乎没有办法只保存或导出使用的代码.甚至隐藏未使用的代码也将有所帮助.

The Coverage tool is good at finding used and unused code. However, there doesn't appear to be a way to save or export only the used code. Even hiding unused code would be helpful.

我正在尝试减少应用程序中Bootstrap CSS的数量；该文件超过7000行.获得使用的代码的唯一方法是仔细滚动浏览文件，查找绿色部分，然后将该代码复制到新文件中.这既费时又不可靠.

I'm attempting to reduce the amount of Bootstrap CSS in my application; the file is more than 7000 lines. The only way to get just the used code is to carefully scroll thru the file, look for green sections, then copy that code to a new file. It's time-consuming and unreliable.

还有其他方法吗? Chrome 60似乎没有添加此功能.

Is there a different way? Chrome 60 does not seem to have added this functionality.

推荐答案

您可以通过操纵up来做到这一点

You can do this with puppeteer

(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();
})();

这篇关于Chrome Devtools的适用范围:如何保存或捕获使用过的代码的代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！