如何从 Chrome Dev Tools 中获取“Coverage”数据

Question

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

问题是从 Coverage 选项卡中删除了 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 步：请务必将代码中此时的 URL 替换await page.goto('https://www.google.com');为您想要的 URL

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

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

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

Answer 2

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