google-chrome - 如何从 Chrome 开发工具中获取 "Coverage"数据

Question

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

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

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

Answer 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'); 替换为您所需的网址

第 7 步:在命令行工具 (Git Bash) 中输入 nodecoverage.js

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

警告:这将从您设置的 URL 加载的所有 CSS 资源中提取覆盖 CSS。然后，您必须进一步优化该 CSS(本示例中未涉及)。