chrome 提取覆盖率报告作为构建过程的一部分

Question

在chrome中，您可以生成css和所用js的覆盖率报告，我如何在构建过程中获得此报告，以便相应地自动拆分和加载我的文件？（未与网站进行任何交互的报道报告）。

Answer 1

不要说这种做法有用，我会解释：

如果您使用的是动态内容，这会破坏动态元素的样式或动态元素本身。

我发现处理此问题的最佳方法是使用 parcel js 作为包管理器，并正确地将 js 和 scss 设置到视图中每个组件的每个 .html 中。这将为每个视图创建一个样式的“虚拟树”，并将在每个视图上创建一个 insert a js 和 css。当然，您可能会得到一些额外的 css 和 js，具体取决于您的需求和最佳实践。

对于动态内容：如果您处于可以动态创建元素的视图中，则需要预加载其 js 和 css 以及 [=35= 的其余部分] 和 js，即使用户不与将动态创建此其他元素的元素交互。
对于静态内容：如果您正在处理静态内容，那么 parcel.js 并为每个视图专门编写 css 和 js 将是可行的方法。刮掉覆盖范围并获取您现在需要的东西没有多大意义，因为您可以在开发时间使用最佳实践。

如果您仍然想这样做，可以使用 puppeteer (npm i puppeteer --save)。

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

Source

chrome 提取覆盖率报告作为构建过程的一部分

chrome extract coverage report as part of build process

javascript

css

code-coverage

google-chrome

build