如何获得“覆盖"?数据从Chrome开发工具中输出 [英] How to get "Coverage" data out from the Chrome Dev Tools

问题描述

我正在使用Chrome开发人员工具上的Coverage标签，并且文件很大，使用Coverage玩了很多之后，很明显，只有15％的CSS代码正在使用(我模拟了按钮按下，将鼠标悬停了菜单...).

I am using the Coverage tab at my Chrome Dev Tools and I have a really big file and after playing a lot with Coverage it's clear enough that only 15% enough of my CSS code is being used (I simulated button presses, hover menus...).

问题是得到覆盖率"选项卡的代码输出的15％.我不敢相信这个非常好的功能背后的开发人员没有想到最终用户仅复制代码绿色部分的简便方法.检查附件中的图像.

The problem is getting hat 15% of code OUT of the Coverage tab. I cant believe the Devs behind this really nice feature didnt think an easy way for the end user copy only the green part of the code. Check image attached.

您知道我该怎么做吗?我阅读了一些有关使用Puppeteers的内容，但需要大量准备.在最新的Canary版本上，我可以导出JSON，但是要提取解析器以对该JSON进行编码，以便仅提取所需的部分.

Do you have any idea how I could do that? I read something about using Puppeteers but it requires lots of preparation. On latest Canary version it looks like I can export a JSON but it would require some time to code a parser to that JSON in order to extract only the needed part.

推荐答案

感谢Phillip Kriegel的文章(

Thanks to an article by Phillip Kriegel (https://www.philkrie.me/2018/07/04/extracting-coverage.html) I managed to setup Puppeteer to extract the coverage CSS from a URL and output that CSS into a file.

方法如下:

第1步:全局安装node.js

Step 1: Install node.js globally

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

Step 2: Create a folder on your desktop

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

Step 3: Inside the folder install the Node Package Manager (NPM) and the Puppeteer node module

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

Step 4: Create a JavaScript file inside the folder, name it coverage.js

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

Step 5: Put this code inside that js file:

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

Step 6: BE SURE TO REPLACE the URL at this point in the code await page.goto('https://www.google.com'); with your desired URL

步骤7:在命令行工具(Git Bash)中，键入node coverage.js

Step 7: In the command line tool (Git Bash) type node coverage.js

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

A file called exported_css.css will be created, it will contain all your coverage CSS for the URL you set in the code.

CAVEAT:这将从从您设置的URL加载的所有CSS资产中提取coverage CSS.然后，您将不得不进一步优化该CSS(本示例中未介绍).

CAVEAT: This will extract the coverage CSS from ALL the CSS assets that are loaded from the URL you set. You will then have to further optimize that CSS (not covered in this example).

这篇关于如何获得“覆盖"?数据从Chrome开发工具中输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！