Node/Puppeteer/ChromeDevTools：Shell 说变量的属性未定义，即使已定义！为什么？答案

【问题标题】：Node/Puppeteer/ChromeDevTools: Shell says variable's property undefined even though defined! Why?Node/Puppeteer/ChromeDevTools：Shell 说变量的属性未定义，即使已定义！为什么？
【发布时间】：2021-03-31 03:00:52
【问题描述】：

尝试使用 puppeteer/node 仅将使用的 CSS 和 JS 提取到单独的 .css 和 .js 文件中，但 powershell 不断返回以下错误，我似乎无法弄清楚它为什么这样做，因为变量应该清楚地有一个长度，因为脚本应该已经向它提供了一些数据。也许它之前的过程之一导致了这种情况？我不确定是什么问题。

shell返回：

       css_total_bytes += entry.text.length;
                                     ^

TypeError: Cannot read property 'length' of undefined

const puppeteer = require('puppeteer');
//Include to be able to export files w/ node
const fs = require('fs');
const iPhone = puppeteer.devices['iPhone 6'];

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.emulate(iPhone);

    //Begin collecting CSS coverage data
    await Promise.all([
        page.coverage.startCSSCoverage(),
        page.coverage.startJSCoverage()
    ]);

    //Visit desired page
    await page.goto('http://127.0.0.1:5500/index.html');
  
    //Stop collection and retrieve the coverage iterator
    const [cssCoverage, jsCoverage] = await Promise.all([
        page.coverage.stopCSSCoverage(),
        page.coverage.stopJSCoverage()
    ]);

    //Investigate CSS Coverage and Extract Used CSS
    var css_coverage = [...cssCoverage];
    var css_used_bytes = 0;
    var css_total_bytes = 0;
    var covered_css = "";
    for (var entry in css_coverage[0]) {
        css_total_bytes += entry.text.length;
        console.log(`Total Bytes for ${entry.url}: ${entry.text.length}`);
        for (var range in entry.ranges){
            css_used_bytes += range.end - range.start - 1;
            covered_css += entry.text.slice(range.start, range.end) + "\n";
        }       
    }

    //Investigate JS Coverage and Extract Used JS
    var js_coverage = [...jsCoverage];
    var js_used_bytes = 0;
    var js_total_bytes = 0;
    var js_css = "";
    for (var entry in js_coverage[0]) {
        js_total_bytes += entry.text.length;
        console.log(`Total Bytes for ${entry.url}: ${entry.text.length}`);
        for (var range in entry.ranges){
            js_used_bytes += range.end - range.start - 1;
            js_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 CSS file was saved!");
    }); 

    console.log(`Total Bytes of JS: ${js_total_bytes}`);
    console.log(`Used Bytes of JS: ${js_used_bytes}`);
    fs.writeFile("./exported_js.js", covered_js, function(err) {
        if(err) {
            return console.log(err);
        }
        console.log("The JS file was saved!");
    });

    await browser.close();
})();

【问题讨论】：

标签： javascript node.js google-chrome-devtools puppeteer code-coverage

【解决方案1】：

如果我对the docs 的理解正确，这些是一些问题：

var css_coverage = [...cssCoverage]; — 这似乎是多余的，因为 cssCoverage 已经是一个数组。
for (var entry in css_coverage[0]) {:
- css_coverage[0] 是一个覆盖条目，你不需要遍历它的内容。
- for ... in 循环迭代对象属性，您需要 for ... of 循环迭代数组条目（范围迭代相同）。

所以尝试这样的事情（对于 JS 覆盖同样如此）：

    //Investigate CSS Coverage and Extract Used CSS
    var css_used_bytes = 0;
    var css_total_bytes = 0;
    var covered_css = "";
    for (var entry of cssCoverage) {
        css_total_bytes += entry.text.length;
        console.log(`Total Bytes for ${entry.url}: ${entry.text.length}`);
        for (var range of entry.ranges){
            css_used_bytes += range.end - range.start - 1;
            covered_css += entry.text.slice(range.start, range.end) + "\n";
        }
    }

【讨论】：