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中提取coverage 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

将创建一个名为export_css.css的文件，该文件将包含您在代码中设置的URL的所有coverage CSS。

CAVEAT：这将从所有从您设置的URL加载的CSS资源中提取coverage CSS。然后，您将不得不进一步优化该CSS（本示例中未介绍）。

Answer 2

打开Chrome标签页->检查元素（F12）->按下退出键

Answer 3

我正在创建一个PHP脚本，该脚本分析Coverage JSON导出的文件，并仅输出提取的使用过的CSS / JS。不幸的是，我遇到了一个麻烦，有时JSON解析器会丢失正确的字符数，并且最终会导致CSS / JS语法损坏或不正确。它只有几个字符，但是它被关闭的字符数量是可变的，因此在解析期间几乎不可能预测到它。

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

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

如何从Chrome浏览器开发工具获得“覆盖”数据出

3 个答案: