Google chrome devtools ChromeDevTools覆盖范围：如何保存或捕获使用过的代码？

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

我试图减少我的应用程序中引导CSS的数量；该文件有7000多行。获得所用代码的唯一方法是仔细地滚动文件，查找绿色部分，然后将代码复制到新文件中。这既费时又不可靠

---

还有别的办法吗？Chrome 60似乎没有添加此功能。

我与拥有此功能的工程师交谈过。截至Chrome64，仍然无法导出覆盖率分析的结果

---

Star帮助团队确定此功能请求的优先级。

您可以使用Puppeter来完成此操作

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

---

铬金丝雀73可以做到这一点。您将需要Windows或Mac操作系统。记录和清除按钮旁边有一个导出功能（向下箭头图标）。您将获得一个json文件，然后可以使用该文件以编程方式删除未使用的行

首先，你需要下载并安装“谷歌浏览器开发”

在GoogleChromeDev上，进入Inspect element>Sources>Ctrl+shift+p

输入“覆盖率”并选择“开始检测覆盖率并重新加载页面”

然后使用导出图标 这将为您提供一个json文件

---

您也可以访问：

我下载了最新版本的金丝雀，并且出现了导出按钮

然后，我使用这个PHP脚本来解析返回的

json

file。（其中数组中的键“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>';

$a=json\u decode（文件获取内容（'coverage3.json'）；
$sText=$a[6]->text；
$sOut=“”；
foreach（$a[6]->范围为$IPO=>$oR）{
$sOut.=substr（$sText$oR->start，（$oR->end-$oR->start））。“\n”；
}
回显“”$"苏特",；

您可以使用无头镀铬和：

在新文件夹中，使用npm安装Puppeter（这将包括无头Chrome）：

npm i木偶演员--保存

将以下内容放入名为

csscoverage.js

的文件中，并将localhost更改为指向您的网站

:

使用

节点csscoverage.js运行它

---

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

更实用的基于Atoms的版本

改进后可以在没有任何文件的情况下工作

PHP沙箱

要转换为1行的JSON格式化程序

把它分解

$jsont=$oR）{
$sOut.=substr（$sText$oR->start，（$oR->end-$oR->start））。“\n”；
}
回显“”$"苏特",；

以下是一个基于克里斯托弗·希弗（Christopher Schiefer）的版本，用于保存媒体查询：

$jsont = <<<'EOD'
{ "url":"test"} 
EOD;

$a = json_decode($jsont);
$sText = $a->text;
preg_match_all('(@media(?>[^{]|(?0))*?{)', $sText, $mediaStartsTmp, PREG_OFFSET_CAPTURE);
preg_match_all("/\}(\s|\\n|\\t)*\}/", $sText, $mediaEndsTmp, PREG_OFFSET_CAPTURE);
$mediaStarts = empty($mediaStartsTmp) ? array() : $mediaStartsTmp[0];
$mediaEnds = empty($mediaEndsTmp) ? array() : $mediaEndsTmp[0];
$sOut = "";
$needMediaClose = false;
foreach ($a->ranges as $iPos => $oR) {
    if ($needMediaClose) { //you are in a media query
        //add closing bracket if you were in a media query and are past it
        if ($oR->start > $mediaEnds[0][1]) {
            $sOut .= "}\n";
            array_splice($mediaEnds, 0, 1);
            $needMediaClose = false;
        }
    }
    if (!$needMediaClose) {
        //remove any skipped media queries
        while (!empty($mediaEnds) && $oR->start > $mediaEnds[0][1]) {
            array_splice($mediaStarts, 0, 1);
            array_splice($mediaEnds, 0, 1);
        }
    }
    if (!empty($mediaStarts) && $oR->start > $mediaStarts[0][1]) {
       $sOut .= "\n" . $mediaStarts[0][0] . "\n";
       array_splice($mediaStarts, 0, 1);
       $needMediaClose = true;
    }
    $sOut .= mb_substr($sText, $oR->start, ($oR->end-$oR->start))." \n";
}
if ($needMediaClose) { $sOut .= '}'; }
echo '<style rel="stylesheet" type="text/css">' . $sOut . '</style>';

$jsont=范围为$iPos=>$oR）{
如果（$needMediaClose）{//您正在进行媒体查询
//如果您在媒体查询中并且已通过，请添加结束括号
如果（$oR->start>$mediaEnds[0][1]）{
$sOut.=“}\n”；
阵列拼接（$mediaEnds，0,1）；
$needMediaClose=false；
}
}
如果（！$needMediaClose）{
//删除所有跳过的媒体查询
而（！empty（$mediatends）&&$oR->start>$mediatends[0][1]）{
阵列拼接（$mediaStarts，0，1）；
阵列拼接（$mediaEnds，0,1）；
}
}
如果（！empty（$mediaStarts）&&$oR->start>$mediaStarts[0][1]）{
$sOut.=“\n”。$mediaStarts[0][0]。“\n”；
阵列拼接（$mediaStarts，0，1）；
$needMediaClose=true；
}
$sOut.=mb\u子字符串（$sText、$oR->start、（$oR->end-$oR->start））。“\n”；
}
如果（$needMediaClose）{$sOut.='}'；}
回显“”$"苏特",；

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

---

这是我提取代码的python代码：

import json

code_coverage_filename = 'Coverage-20210613T173016.json'
specific_file_url = 'https://localhost:3000/b.css'

with open(code_coverage_filename) as f:
  data = json.load(f)
  
for entry in data:
    pass # print entry['url']
    if entry['url'] == specific_file_url:
        text = ""
        for range in entry['ranges']:
            range_start = range['start']
            range_end = range['end']
            text += entry['text'][int(range_start):int(range_end)]+"\n"
                
        print text

然而，有一个问题。Chrome调试器不会标记这些行

@media (min-width: 768px) {

---

所以使用这种技术有点问题

这个问题似乎是相关的。关于这个问题，有更好的选择吗。这有一个警告

此功能是实验性的，在Firefox中尚不可用。

在Firefox ESR 45.8.0中，可以通过按下

SHIFT F2

来激活它，打开GCLI Christian Heilmann上传的一个我打赌你可以编写一个chrome扩展来导出数据伟大的问题，同样的问题，您使用哪个版本的

node

运行您的解决方案？@dryleaf nodejs 8.6Thanks。在看过木偶演员的文档后，我能够在8.0.0上运行。这是一个不错的CSS破解+谢谢你给了我一个很好的回答。我该如何进行JS黑客攻击？我想我们可以

过滤
并获取未使用的规则，将它们分开，并将未使用的规则作为延迟样式加载。也许它们在其他内部页面中使用。如果我只想专注于bootstrap.css，而让其他页面保持原样呢？我需要如何更改上面的编码？非常感谢！但是，您有一个小错误（或者coverage.json的生成方式可能与当时不同），substr的第三个参数应该是长度，但在coverage.json中显示了结尾字符，因此应该是：$sOut.=substr（$sText，$or->start，（$or->end-$or->start））；此外，您可能希望使用mb_substr（）而不是substr（）来解释多字节字符（有时用于CSS中的图标）。如果您只需要从json获取文件的覆盖率文本，您可以使用以下js代码：
var file=json[N]；var覆盖率_file=“”；file.ranges.forEach（range=>coverage_file+=file.text.substring（range.start，range.end））。其中
N
是JSON中的文件数“下载并安装”Google Chrome Dev是什么意思？F12不够？Google Chrome Dev！=Google Chrome
import json

code_coverage_filename = 'Coverage-20210613T173016.json'
specific_file_url = 'https://localhost:3000/b.css'

with open(code_coverage_filename) as f:
  data = json.load(f)
  
for entry in data:
    pass # print entry['url']
    if entry['url'] == specific_file_url:
        text = ""
        for range in entry['ranges']:
            range_start = range['start']
            range_end = range['end']
            text += entry['text'][int(range_start):int(range_end)]+"\n"
                
        print text

@media (min-width: 768px) {