Chrome Devtools覆盖范围:如何保存或捕获代码使用的代码？

Question

Coverage工具擅长查找已使用和未使用的代码.但是,似乎没有办法只保存或导出使用过的代码.即使隐藏未使用的代码也会有所帮助

我正在尝试减少应用程序中的Bootstrap CSS数量; 该文件超过7000行.获取所用代码的唯一方法是仔细滚动文件,查找绿色部分,然后将该代码复制到新文件.这是耗时且不可靠的.

有不同的方式吗？Chrome 60似乎没有添加此功能.

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

Answer 2

您可以使用 Headless Chrome 和puppeteer执行此操作：

1. 在一个新文件夹中，使用 npm 安装 puppeteer（这将为您提供 Headless Chrome）：

npm i puppeteer --save

2. 将以下内容放入名为的文件中csscoverage.js，并将 localhost 更改为指向您的网站。

：

const puppeteer = require('puppeteer');
const util = require('util');
const fs    = require("fs");

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.coverage.startCSSCoverage();
 await page.goto('https://localhost'); // Change this
 const css_coverage = await page.coverage.stopCSSCoverage();
 console.log(util.inspect(css_coverage, { showHidden: false, depth: null }));
 await browser.close();

let final_css_bytes = '';
let total_bytes = 0;
let used_bytes = 0;

for (const entry of css_coverage) {
  final_css_bytes = "";

  total_bytes += entry.text.length;
  for (const range of entry.ranges) {
    used_bytes += range.end - range.start - 1;
    final_css_bytes += entry.text.slice(range.start, range.end) + '\n';
  }

  filename = entry.url.split('/').pop();

  fs.writeFile('./'+filename, final_css_bytes, error => {
    if (error) {
      console.log('Error creating file:', error);
    } else {
      console.log('File saved');
    }
  });
}
})();

3. 运行它 node csscoverage.js

这会将您使用的所有 CSS 输出到它们出现的单独文件中（阻止您将外部库合并到您自己的代码中，就像其他答案一样）。

Answer 3

我和拥有此功能的工程师交谈过.从Chrome 64开始,仍无法导出覆盖率分析的结果.

明星问题#717195,以帮助团队优先考虑此功能请求.

Answer 4

1. 首先，您需要下载并安装“ Google Chrome开发者版”。
2. 在Google Chrome开发者版上，转到检查元素>源> Ctrl + shift + p
3. 输入“ coverage”，然后选择“开始检测覆盖率并重新加载页面”
4. 然后使用导出图标 这将为您提供一个json文件。

您还可以访问：Chrome DevTools：导出原始代码覆盖率数据

Answer 5

我下载了最新版本的 canary，并且出现了导出按钮。

然后我使用这个 PHP 脚本来解析json返回的文件。（其中数组中的键“6”是要解析的资源）。我希望它能帮助别人！

$a = json_decode(file_get_contents('coverage3.json'));
$sText = $a[6]->text;
$sOut = "";
foreach ($a[6]->ranges as $iPos => $oR) {
    $sOut .= substr($sText, $oR->start, ($oR->end-$oR->start))." \n";
}
echo '<style rel="stylesheet" type="text/css">' . $sOut . '</style>';

Answer 6

我喜欢这个简单的解决方案。它可与 Chrome 中的 Coverage 工具配合使用，无需进一步安装。您可以简单地使用 Coverage 工具允许您导出的 json 文件：

https://nachovz.github.io/devtools-coverage-css-generator/