如何从 Chrome 开发工具中获取“覆盖率”数据答案

【问题标题】：How to get "Coverage" data out from the Chrome Dev Tools如何从 Chrome 开发工具中获取“覆盖率”数据
【发布时间】：2019-02-03 13:47:25
【问题描述】：

我在 Chrome 开发工具中使用 Coverage 选项卡，我有一个非常大的文件，在使用 Coverage 玩了很多之后，很明显我的 CSS 代码只有 15% 被使用（我模拟了按钮按下、悬停菜单...）。

问题是 15% 的代码超出了 Coverage 选项卡。我不敢相信这个非常好的功能背后的开发人员没有想到一个简单的方法让最终用户只复制代码的绿色部分。检查附上的图片。

你知道我该怎么做吗？我读过一些关于使用 Puppeteers 的文章，但它需要大量的准备工作。在最新的 Canary 版本上，我似乎可以导出 JSON，但需要一些时间来为该 JSON 编写解析器，以便仅提取所需的部分。

【问题讨论】：

标签： google-chrome

【解决方案1】：

感谢 Phillip Kriegel (https://www.philkrie.me/2018/07/04/extracting-coverage.html) 的一篇文章，我设法设置 Puppeteer 从 URL 中提取覆盖 CSS 并将该 CSS 输出到文件中。

这是怎么做的：

第 1 步：全局安装 node.js

第 2 步：在桌面上创建一个文件夹

第 3 步：在文件夹中安装 Node Package Manager (NPM) 和 Puppeteer 节点模块

第 4 步：在文件夹中创建一个 JavaScript 文件，将其命名为 coverage.js

第 5 步：将此代码放入该 js 文件中：

const puppeteer = require('puppeteer');
// Include to be able to export files w/ node
const fs = require('fs');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // Begin collecting CSS coverage data
    await Promise.all([
        page.coverage.startCSSCoverage()
    ]);

    // Visit desired page
    await page.goto('https://www.google.com');
  
    //Stop collection and retrieve the coverage iterator
    const cssCoverage = await Promise.all([
        page.coverage.stopCSSCoverage(),
    ]);

    //Investigate CSS Coverage and Extract Used CSS
    const css_coverage = [...cssCoverage];
    let css_used_bytes = 0;
    let css_total_bytes = 0;
    let covered_css = "";
    
    for (const entry of css_coverage[0]) {
        
        css_total_bytes += entry.text.length;
        console.log(`Total Bytes for ${entry.url}: ${entry.text.length}`);

        for (const range of entry.ranges){
            css_used_bytes += range.end - range.start - 1;
            covered_css += entry.text.slice(range.start, range.end) + "\n";
        }       
    }

    console.log(`Total Bytes of CSS: ${css_total_bytes}`);
    console.log(`Used Bytes of CSS: ${css_used_bytes}`);
    fs.writeFile("./exported_css.css", covered_css, function(err) {
        if(err) {
            return console.log(err);
        }
        console.log("The file was saved!");
    }); 

    await browser.close();
})();

第 6 步：务必将代码 await page.goto('https://www.google.com'); 中此时的 URL 替换为您想要的 URL

第7步：在命令行工具（Git Bash）中输入node coverage.js

将创建一个名为exported_css.css 的文件，它将包含您在代码中设置的URL 的所有覆盖CSS。

CAVEAT：这将从您设置的 URL 加载的所有 CSS 资产中提取覆盖范围 CSS。然后，您必须进一步优化该 CSS（本示例中未涉及）。

【讨论】：

【解决方案2】：

打开 Chrome 选项卡 --> 检查元素 (F12) --> 按 Escape 按钮

【讨论】：

【解决方案3】：

我正在创建一个 PHP 脚本来解析 Coverage JSON 导出文件，并仅输出提取的使用 CSS/JS。不幸的是，我遇到了一个障碍，在某些时候 JSON 解析器丢失了正确的字符编号，我最终得到了损坏或不正确的 CSS/JS 语法。它只是偏离了几个字符，但偏离的字符数量是可变的，因此在解析过程中几乎无法预测。

我不肯定，但我认为问题是由于 PHP 在服务器上运行造成的，并且服务器读取原始 CSS 文件中的字符的方式可能与浏览器不同。我将尝试用 JavaScript 编写 Coverage JSON 解析器。当我这样做时，我一定会在此处发布代码以供所有人使用。

抱歉，我无法提供更多帮助，我只是想警告人们不要使用 PHP 来执行此操作，因为它似乎无法正确读取大型 CSS 文件中的字符编号。

【讨论】：