logo标签列表

如何从Chrome Dev工具中获取“覆盖率”数据

google-chrome
8
我正在使用Chrome Dev Tools的Coverage选项卡，我有一个非常大的文件，在使用Coverage进行模拟按钮按下、悬停菜单等操作后，清楚地发现只有15%的CSS代码被使用。
问题是如何将这15%的代码从Coverage中取出。我不敢相信这个非常好的功能背后的开发人员没有考虑到一种简单的方法让最终用户仅复制代码中绿色部分。请参见附图。
你有任何想法吗？我读到了一些关于使用Puppeteers的内容，但需要做很多准备工作。在最新的Canary版本中，似乎可以导出JSON，但需要编写解析器才能提取所需部分。

enter image description here

4个回答
5

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

以下是操作步骤：

第一步：全局安装node.js

第二步：在您的桌面上创建一个文件夹

第三步：在文件夹内安装Node Package Manager（NPM）和Puppeteer节点模块

第四步：在文件夹内创建一个JavaScript文件，命名为coverage.js

第五步：将以下代码放入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替换URL：await page.goto('https://www.google.com'); 步骤7：在命令行工具(Git Bash)中键入node coverage.js 将创建一个名为exported_css.css的文件，其中包含您在代码中设置的URL的所有覆盖CSS。
注意：这将从您设置的URL加载的所有CSS资源中提取覆盖CSS。然后，您需要进一步优化该CSS(本示例未涵盖)。
0
打开Chrome标签页 --> 检查元素 (F12) --> 按下Esc键 enter image description here
0

我正在创建一个PHP脚本，解析覆盖范围JSON导出文件，并仅输出提取的已使用CSS / JS。不幸的是，我遇到了一个问题，在某些时候，JSON解析器会失去正确的字符数，导致我得到损坏或不正确的CSS / JS语法。它只有几个字符的偏差，但它偏离的字符数量是可变的，因此在解析期间几乎不可能预测。

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

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

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接