Puppeteer/node.js/ChromeDevTools coverage export script help -_-

Syrinj

BuSo Pro
Joined
Mar 31, 2017
Messages
24
Likes
38
Points
0
trying to use puppeteer/node to extract only the used CSS and JS into separate .css and .js files for a downloaded lander that I want to tear down and renovate but powershell keeps returning the following error and I cannot seem to figure out why it's doing this as the variable should clearly have a length since the script should have fed some data to it. Perhaps one of the processes preceding it is causing this? I'm not sure what the problem is.

The shell returns:
Code:
css_total_bytes += entry.text.length;
TypeError: Cannot read property 'length' of undefined

Once I figure out the problem with this variable, I'm fully expecting to experience the same from js_total_bytes as well since it mimicks the action seen here, so the solution will be the same, I'm sure. ANYWAY...

For context, my full script is pasted below:

JavaScript:
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();
})();
 

Ryuzaki

お前はもう死んでいる
Moderator
Joined
Sep 3, 2014
Messages
4,783
Likes
9,215
Points
9
Shot in the dark here since I'm not familiar with Puppeteer or node.js and can't see the entry object being created, but I think it's expecting the entry object to have an array called text or a property within entry called that, which makes sense.

Me and you would expect length in this case to get either the number of items in the array or the length of the string associated with the text:string name: pair. But it may be looking for a length key within the array called text. (doubtful here, that should be a protected name in this context)

Another possibility is that entry or entry.text isn't initialized (doesn't exist) or it's there's some other issue like it not pulling any data at all and that's causing the variable to be undefined or null.

You can try console.log(typeof entry.text); and see what type of variable it is or even log the contents of it to make sure something is there, tracing the problem back in time till you find the source.
 
Joined
Jul 26, 2019
Messages
81
Likes
53
Points
0
@Syrinj

@see line 2 & 3

JavaScript:
const puppeteer = require("puppeteer");
//Using Puppeteer >=5.0 here...
const devices = puppeteer.devices;
//Include to be able to export files w/ node
const fs = require("fs");
const iPhone = 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()]);

  //Visit desired page
  await page.goto(
    "https://www.buildersociety.com/threads/puppeteer-node-js-chromedevtools-coverage-export-script-help-_.5724/"
  );

  //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();
})();

Output:
CSS:
.bbCodeBlock{margin:.5em 0;background:#fcfcff;border:1px solid #ededed;border-left:3px solid #4582bf}
.bbCodeBlock-title{padding:10px 12px;font-size:13px;color:#4582bf;background:#fff}.bbCodeBlock-title:before,.bbCodeBlock-title:after{content:" ";display:table}.bbCodeBlock-title:after{clear:both}
.bbCodeBlock-content{position:relative;padding:10px 12px}.bbCodeBlock-content:before,.bbCodeBlock-content:after{content:" ";display:table}.bbCodeBlock-content:after{clear:both}
.bbCodeBlock--screenLimited .bbCodeBlock-content{max-height:300px;max-height:70vh;overflow:auto;-webkit-overflow-scrolling:touch}
.bbCodeCode{margin:0;padding:0;font-family:Monaco,Menlo,Consolas,'Roboto Mono','Andale Mono','Ubuntu Mono',monospace;font-size:13px;line-height:1.7;text-align:left;direction:ltr;white-space:pre;position:relative;-moz-tab-size:4;tab-size:4}.has-hiddenscroll .bbCodeCode{padding-bottom:12px}.bbCodeCode code{font-family:inherit}.bbCodeCode .prism-token.prism-comment,.bbCodeCode .prism-token.prism-prolog,.bbCodeCode .prism-token.prism-doctype,.bbCodeCode .prism-token.prism-cdata{color:#a50}
.bbCodeCode .prism-token.prism-symbol,.bbCodeCode .prism-token.prism-atrule,.bbCodeCode .prism-token.prism-keyword{color:#708}.bbCodeCode .prism-token.prism-selector,.bbCodeCode .prism-token.prism-function{color:#05a}
.bbCodeCode .prism-token.prism-string,.bbCodeCode .prism-token.prism-attr-value{color:#a11}.bbCodeCode .prism-token.prism-number{color:#164}
.bbCodeInline{margin:0;font-size:80%;background:#fcfcff;border:1px solid #ededed;border-radius:0px;padding-top:1px;padding-right:5px;padding-bottom:1px;padding-left:5px;font-family:Monaco,Menlo,Consolas,'Roboto Mono','Andale Mono','Ubuntu Mono',monospace;line-height:1.7;box-decoration-break:clone;-webkit-box-decoration-break:clone;white-space:pre-wrap}
.message+.message,.message.message--bordered{border-top:1px solid #dedede}
.message-inner{display:flex}
.message-cell{display:block;vertical-align:top;padding:12px}
.message-cell.message-cell--user,.message-cell.message-cell--action{position:relative;background:#fcfcff;border-right:1px solid #dedede;min-width:0}
.message-cell.message-cell--user{flex:0 0 164px}
.message-cell.message-cell--main{flex:1 1 auto;width:100%;min-width:0}
.message-main{height:100%;display:flex;flex-direction:column}.message-content{flex:1 1 auto;min-height:1px}.message-footer{margin-top:auto}
.message:not(.message--forceColumns) .message-inner{display:block}.message:not(.message--forceColumns) .message-cell{display:block}.message:not(.message--forceColumns) .message-cell:before,.message:not(.message--forceColumns) .message-cell:after{content:" ";display:table}.message:not(.message--forceColumns) .message-cell:after{clear:both}.message:not(.message--forceColumns) .message-cell.message-cell--user{width:auto;border-right:none;border-bottom:1px solid #dedede}
.message:not(.message--forceColumns) .message-cell.message-cell--main{padding-left:12px}
.message-userArrow{position:absolute;top:24px;right:-1px;border:12px solid transparent;border-left-width:0;border-right-color:#dedede}.message-userArrow:after{position:absolute;top:-11px;right:-12px;content:"";border:11px solid transparent;border-left-width:0;border-right-color:#fcfcff}.message-avatar{text-align:center}.message-avatar .avatar{vertical-align:bottom}.message-avatar-wrapper{position:relative;display:inline-block;vertical-align:bottom;margin-bottom:.5em}
.message-name{font-weight:700;font-size:inherit;text-align:center;margin:0}.message-userTitle{font-size:12px;font-weight:normal;text-align:center;margin:0}.message-userBanner.userBanner{display:block;margin-top:3px}.message-userExtras{margin-top:3px;font-size:12px}
.message:not(.message--forceColumns) .message-userArrow{top:auto;right:auto;bottom:-1px;left:24px;border:none;border:12px solid transparent;border-top-width:0;border-bottom-color:#dedede}.message:not(.message--forceColumns) .message-userArrow:after{top:auto;right:auto;left:-11px;bottom:-12px;border:none;border:11px solid transparent;border-top-width:0;border-bottom-color:#fcfcff}
.message:not(.message--forceColumns) .message-user{display:flex}.message:not(.message--forceColumns) .message-avatar{margin-bottom:0}.message:not(.message--forceColumns) .message-avatar .avatar{width:48px;height:48px;font-size:29px}
.message:not(.message--forceColumns) .message-userDetails{flex:1;min-width:0;padding-left:12px}.message:not(.message--forceColumns) .message-name{text-align:left}.message:not(.message--forceColumns) .message-userTitle,.message:not(.message--forceColumns) .message-userBanner.userBanner{display:inline-block;text-align:left;margin:0}.message:not(.message--forceColumns) .message-userExtras{display:none}
.message-content{position:relative}.message-content .js-selectToQuoteEnd{height:0;font-size:0;overflow:hidden}
.message-attribution{color:#9d9d9d;font-size:12px;padding-bottom:3px;border-bottom:1px solid #ededed}.message-attribution:before,.message-attribution:after{content:" ";display:table}.message-attribution:after{clear:both}
.message-attribution.message-attribution--split{display:flex;align-items:flex-end}.message-attribution.message-attribution--split .message-attribution-opposite{margin-left:auto}.message-attribution-main{float:left}.message-attribution-opposite{float:right}.message-attribution-opposite.message-attribution-opposite--list{display:flex;list-style:none;margin:0;padding:0}.message-attribution-opposite.message-attribution-opposite--list>li{margin-left:14px}.message-attribution-opposite.message-attribution-opposite--list>li:first-child{margin-left:0}.message-attribution-opposite a{color:inherit}
.message-attribution-gadget{display:inline-block;margin:-3px -7px;padding:3px 7px}
.message-body{margin:12px 0;font-family:'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif}.message-body:before,.message-body:after{content:" ";display:table}.message-body:after{clear:both}
.message-body:last-child{margin-bottom:0}
.message-signature{margin-top:12px;font-size:12px;color:#848484;border-top:1px solid #ededed;padding-top:12px}
.message .reactionsBar{margin-top:12px;padding:10px}.message-historyTarget{margin-top:12px}
.message:not(.message--forceColumns) .message-content{min-height:1px}
.message-signature{display:none}
.block--messages .block-container{background:none;border:none}.block--messages .message,.block--messages .block-row{color:#1d1d1d;background:#fcfcff;border-width:0px;border-style:solid;border-top-color:#ededed;border-right-color:#ededed;border-bottom-color:#ededed;border-left-color:#ededed;border-radius:0px}.block--messages .message+.message,.block--messages .block-row+.message,.block--messages .message+.block-row,.block--messages .block-row+.block-row{margin-top:10px}
.block--messages .message-inner .message-cell{border-radius:0}.block--messages .message-inner:first-of-type .message-cell:first-child{border-top-left-radius:0px}.block--messages .message-inner:first-of-type .message-cell:last-child{border-top-right-radius:0px}.block--messages .message-inner:last-of-type .message-cell:first-child{border-bottom-left-radius:0px}.block--messages .message-inner:last-of-type .message-cell:last-child{border-bottom-right-radius:0px}
.block--messages .message-inner .message-cell{border-radius:0}.block--messages .message-inner:first-of-type .message-cell:first-child{border-top-left-radius:0px;border-top-right-radius:0px}.block--messages .message-inner:last-of-type .message-cell:last-child{border-bottom-left-radius:0px;border-bottom-right-radius:0px}
.block--messages .message,.block--messages .block-row,.block--messages .block-filterBar{border-left:none;border-right:none;border-radius:0}.block--messages .message .message-inner .message-cell{border-radius:0}.block--messages .message .message-inner .message-cell:first-child,.block--messages .message .message-inner .message-cell:last-child{border-radius:0}
.p-nav-inner .p-nav-smallLogo{display:inline-block}.p-header-logo--image,.p-nav-smallLogo{font-size:36px;color:#fcfcff;font-weight:400;padding-top:10px;padding-bottom:10px}.XenBase .p-nav-smallLogo{padding:0;max-width:none}
.p-nav-smallLogo a{font-size:16px;color:#fcfcff;padding:10px;vertical-align:middle;display:block}
.p-nav-opposite .p-navgroup-link{padding-right:10px;padding-left:10px}
a[data-nav-id="forums"]:before{content:"\f086";width:1.28571429em;display:inline-block;text-align:center}
.p-nav-list a.p-navEl-link:before{display:none}
.block--messages .block-container{box-shadow:none}.block--messages article.message{padding-top:10px}.block--messages article.message .message-userArrow:after{border-right-color:}
.message-main .message-attribution{padding-bottom:12px}
.XenBase .block--messages .message .message-content a{color:#4582bf}
footer.p-footer{padding:0;background:none}.layout-default .footer-stretched .p-footer-inner,.layout-classic .footer-stretched .p-footer-inner,.layout-canvas .footer-stretched .p-footer-inner,.layout-default .footer-stretched .p-footer-inner,.layout-classic .footer-stretched .p-footer-inner,.layout-canvas .footer-stretched .p-footer-inner{padding-right:15px;padding-left:15px}.p-footer-default{font-size:13px;color:#fff;background:#1e1e1e;padding:12px 15px}.p-footer-default a{color:#fff}
.p-footer-default .p-footer-row{margin-bottom:0}.p-footer-default .p-footer-row>div{margin-bottom:0}.p-footer-inner{max-width:960px;padding:0 10px;margin:0 auto}
.p-footer-copyright{font-size:11px;color:#fff;background:#121212;padding-top:15px;padding-right:15px;padding-bottom:15px;padding-left:15px;margin-top:0;text-align:center}
.p-footer--container:before,.p-footer--container:after{content:" ";display:table}.p-footer--container:after{clear:both}.p-footer-row-main{margin-right:.5em}
.p-footer--container .p-footer-default,.p-footer--container .p-footer-custom,.p-footer--container .p-footer-copyright{padding-left:10px;padding-right:10px;font-size:12px}.p-footer--container .p-footer-default .p-footer-inner,.p-footer--container .p-footer-custom .p-footer-inner,.p-footer--container .p-footer-copyright .p-footer-inner{padding-right:0;padding-left:0}.p-footer--container .p-footer-default .p-footer-linkList>li a,.p-footer--container .p-footer-custom .p-footer-linkList>li a,.p-footer--container .p-footer-copyright .p-footer-linkList>li a{padding-left:0}
.p-footer-row-main{margin-bottom:10px}.p-footer-row-main,.p-footer-row-opposite{float:none}.p-footer-copyright{text-align:left;padding:10px 5px}
.p-footer--container .p-footer-default,.p-footer--container .p-footer-custom,.p-footer--container .p-footer-copyright{padding-left:10px;padding-right:10px}.p-footer--container .p-footer-default .p-footer-inner,.p-footer--container .p-footer-custom .p-footer-inner,.p-footer--container .p-footer-copyright .p-footer-inner{padding-right:0;padding-left:0}.p-footer--container .p-footer-default .p-footer-linkList>li a,.p-footer--container .p-footer-custom .p-footer-linkList>li a,.p-footer--container .p-footer-copyright .p-footer-linkList>li a{padding-left:0}
.p-footer--container .p-footer-default .p-footer-linkList li{margin-right:5px}.p-footer--container .p-footer-default .p-footer-linkList li a{padding:4px 6px;display:block}.p-footer--container .p-footer-default .p-footer-linkList li:first-of-type a{padding-left:0}.p-footer-default .p-footer-row-main{margin-bottom:5px;padding-right:0}
html{font-family:'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif}.xb-page-wrapper{position:relative;display:flex;flex-direction:column;flex-grow:1}.xb-page-wrapper .xb-content-wrapper{flex-grow:1}
.xb-page-wrapper .xb-content-wrapper{flex-grow:1;flex-direction:column;display:flex}.p-body-inner{background:#fcfcff;padding:15px}
.p-body-inner{padding:10px}
.button{background-color:#141414;color:#fff;-webkit-transition: all .15s ease;transition: all .15s ease}
.p-breadcrumbs--parent{display:flex;align-items:center;margin-bottom:5px}
.p-breadcrumbs--parent{display:block}
.p-breadcrumbs--parent.p-breadcrumbs--bottom{margin-top:20px;margin-bottom:0}.p-breadcrumbs--parent .p-breadcrumbs{flex:1 1 auto;margin-bottom:0;font-weight:400;background:#F5F5F5;border:1px solid #ededed;padding:7px;margin-bottom:15px}.p-breadcrumbs--parent .p-breadcrumbs a{color:}.p-breadcrumbs--parent .p-breadcrumbs>li:after{color:rgba(51,51,51,0)}.p-breadcrumbs--parent .p-breadcrumbs.p-breadcrumbs--bottom{margin-top:0;margin-bottom:0}
.blockMessage.blockMessage--none{box-shadow:none}
.blockMessage.blockMessage.blockMessage.blockMessage--important{background-color:#4582bf;color:#fff;border-color:#36689b}
.p-linkList-changeWidth{display:none}
.p-header-inner,.p-nav-inner,.p-body-inner,.p-footer-inner{max-width:100%}
.p-body-pageContent .block .block-container{border-width:0}
.p-navgroup-link--register{-webkit-animation-name:redPulse;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-moz-animation-name:redPulse;-moz-animation-duration:7s;-moz-animation-iteration-count:infinite;-ms-animation-name:redPulse;-ms-animation-duration:7s;-ms-animation-iteration-count:infinite;-o-animation-name:redPulse;-o-animation-duration:7s;-o-animation-iteration-count:infinite;animation-name:redPulse;animation-duration:7s;animation-iteration-count:infinite}
[data-template="thread_view"] .message:not(.message--forceColumns) h5.userTitle{display:none}
.p-nav-smallLogo{position:relative;top:1px}
.p-nav-smallLogo a{display:block;font-size:15px}
.p-nav-smallLogo a{font-size:11px}
.message-cell.message-cell--user{border-right:1px solid #ededed}
.p-breadcrumbs{padding-left:12px}
.p-sectionLinks{padding:0;border-bottom:none;background:transparent}
.buso-black{position:absolute;height:83px;width:100%;background:#141414}.p-body-inner{z-index:1}#footer{position:relative}.buso-black-bottom{position:absolute;bottom:102px;height:38px;width:100%;background:#121212}.p-footer-buso{overflow:auto;background:#1e1e1e;padding:10px}.p-footer-default{background:#121212;padding:0}.p-footer-inner{padding:0}#footer .p-footer-inner{padding-right:0;padding-left:0}
#footer .p-footer-default{padding-left:0;padding-right:0}
.buso-black-bottom{height:0}
.p-nav-list>li:nth-of-type(1) a.p-navEl-splitTrigger{display:none}.p-nav-list>li:nth-of-type(1) a.p-navEl-link{padding-right:20px}
.p-nav-list>li:nth-of-type(2) a.p-navEl-link{padding-right:20px}.userBanner.buso-pro,.userBanner.buso-bootcamp,.userBanner.buso-degree,.userBanner.buso-crash{display:inline-block}
.userBanner.buso-pro,.userBanner.buso-bootcamp,.userBanner.buso-degree,.userBanner.buso-crash{position:relative;top:2px}
.userBanner.buso-pro,.userBanner.buso-bootcamp,.userBanner.buso-degree,.userBanner.buso-crash{margin-right:3px;width:18px;height:20px;background-size:16px 16px;text-indent:-9999px;white-space:nowrap}.buso-pro{background:url('usergroup-images/pro.png') no-repeat left top}
.message-cell.message-cell--main{border-bottom:1px solid #e8e8e8;border-top:1px solid #e8e8e8;border-right:1px solid #e8e8e8}
.message-cell.message-cell--main{border-bottom:1px solid #dedede;border-top:none;border-right:none}
.message-cell.message-cell--user{border-right:1px solid #e8e8e8}.message-userArrow{border-right-color:#d4d4d4}
.message:not(.message--forceColumns) .message-userArrow{border-bottom-color:#cccccc}
.message-attribution{border-bottom:none}
.copyright-left{text-align:center}
a.p-navgroup-link--search span.p-navgroup-linkText,a.p-navgroup-link--alerts span.p-navgroup-linkText,a.p-navgroup-link--conversations span.p-navgroup-linkText,a.p-navgroup-link--user span.p-navgroup-linkText{display:none}.message-attribution-opposite--list a[data-xf-init="share-tooltip"]{display:none}.p-navgroup-link.p-navgroup-link--conversations i:after,.p-navgroup-link.p-navgroup-link--alerts i:after,.p-navgroup-link.p-navgroup-link--search i:after,.p-navgroup-link.p-navgroup-link--whatsnew i:after{font-weight:900}
.message-body{margin-top:2px}
.p-navgroup-link{padding-left:8px;padding-right:8px}
.message .reactionsBar{padding:10px;padding-top:7px}
.p-nav .p-nav-menuTrigger{padding-top:5px;padding-bottom:5px}.p-navgroup-link{padding:15px 12px 14px 12px}
.userBanner.userBanner--hidden{border:1px solid #e6e6e6;margin-top:5px;margin-bottom:5px}
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}
b,strong{font-weight:bolder}
img{border-style:none}
[hidden],template{display:none}
.far{font-family:'Font Awesome 5 Pro';position:relative;font-weight:400}
.fa,.fas{font-family:'Font Awesome 5 Pro';position:relative;font-weight:900}
.fa,.fas,.far,.fal,.fad,.fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}
.fa-arrow-circle-up:before{content:"\f0aa"}
.fa-clock:before{content:"\f017"}
.fa-envelope:before{content:"\f0e0"}
.fa-home:before{content:"\f015"}
.fa-life-ring:before{content:"\f1cd"}
.fa-user:before{content:"\f007"}
.fa-user-plus:before{content:"\f234"}
html{font:15px / 1.7 sans-serif;font-family:'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;font-weight:400;color:#1d1d1d;margin:0;padding:0;word-wrap:break-word;hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;background-color:#f0f0f0}
img{max-width:100%;height:auto}b,strong{font-weight:700}a{color:#333;text-decoration:none}
html:after{content:'full';display:none}
html:after{content:'wide'}
html:after{content:'medium'}
html:after{content:'narrow'}
*{box-sizing:border-box}body{overflow-y:scroll !important}[data-xf-click],a[tabindex]{cursor:pointer}[dir=auto]{text-align:left}pre,textarea{word-wrap:normal}img{-ms-interpolation-mode:bicubic}
.u-concealed,.u-concealed a,.u-cloaked,.u-cloaked a,.u-concealed--icon,.u-concealed--icon a{text-decoration:inherit !important;color:inherit !important}
.u-dt[title]{border:none;text-decoration:none}
.u-srOnly{position:absolute;height:1px;width:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}
.u-bottomFixer{position:fixed;left:0;right:0;bottom:0;z-index:800;pointer-events:none}
.u-anchorTarget{display:block;height:0;width:0;visibility:hidden;pointer-events:none;position:absolute}
.listInline{list-style:none;margin:0;padding:0}
.listInline>li{display:inline;margin:0;padding:0}
.listInline.listInline--bullet>li:before{content:"\00B7\20"}.listInline.listInline--bullet>li:first-child:before{content:"";display:none}
.block{margin-bottom:20px}
.block-outer{padding-bottom:10px}.block-outer:before,.block-outer:after{content:" ";display:table}.block-outer:after{clear:both}.block-outer:empty{display:none}.block-outer.block-outer--after{padding-top:10px;padding-bottom:0}
.block-outer-opposite,.block-row-opposite{float:right}
.block-container{color:#1d1d1d;background:#fcfcff;border-width:0px;border-style:solid;border-top-color:#ededed;border-right-color:#ededed;border-bottom-color:#ededed;border-left-color:#ededed;border-radius:0px}
.block-body{list-style:none;margin:0;padding:0}
.block-outer{text-align:center}.block-outer-main,.block-outer-opposite{float:none;text-align:center}
.blockMessage{margin-bottom:20px;padding:10px 12px;color:#1d1d1d;background:#fcfcff;border-width:0px;border-style:solid;border-top-color:#ededed;border-right-color:#ededed;border-bottom-color:#ededed;border-left-color:#ededed;border-radius:0px}.blockMessage:before,.blockMessage:after{content:" ";display:table}.blockMessage:after{clear:both}.blockMessage.blockMessage--none{background:none;border:none;color:#1d1d1d;padding:0}
.blockMessage.blockMessage--important{color:#fff;background:#4582bf;border-left:3px solid #4582bf}
.blockMessage--iconic,.block-rowMessage--iconic{text-align:left;position:relative;padding-left:4em;min-height:4em}
.block-container,.blockMessage{margin-left:-10px;margin-right:-10px;border-radius:0;border-left:none;border-right:none}
.blockMessage.blockMessage--none{margin-left:0;margin-right:0}
.button,a.button{display:inline-block;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;-webkit-transition: background-color .15s ease;transition: background-color .15s ease;font-size:13px;border-radius:0px;padding-top:8px;padding-right:10px;padding-bottom:8px;padding-left:10px;text-align:center;color:#fff;background:#141414;border-color:#212121 #070707 #070707 #212121}
.button.button--link,a.button.button--link{background:#fcfcff;color:#333;border-color:#ebebeb #d1d1d1 #d1d1d1 #ebebeb}
:root{--input-border-heavy:#d1d1d1;--input-border-light:#ededed}
.input{font-size:15px;color:#1d1d1d;background:#fcfcff;border-width:1px;border-style:solid;border-top-color:#dedede;border-right-color:#ededed;border-bottom-color:#ededed;border-left-color:#dedede;border-radius:0px;padding:10px;display:block;width:100%;line-height:1.7;text-align:left;word-wrap:break-word;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition: all .15s ease;transition: all .15s ease}
select.input,.input.input--select{padding-right:1em !important;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.9 10'%3E%3Cstyle%3E._xfG%7Bfill:%231d1d1d;%7D%3C/style%3E%3Cpath class='_xfG' d='M1.4 4.7l1.1-1.5 1 1.5m0 .6l-1 1.5-1.1-1.5'/%3E%3C/svg%3E") !important;background-size:1em !important;background-repeat:no-repeat !important;background-position:100% !important;white-space:nowrap;word-wrap:normal;-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;overflow-x:hidden;overflow-y:auto}
.input{font-size:16px}
.toggleTarget{display:none;-webkit-transition: all .15s ease, -xf-height .15s ease;transition: all .15s ease, -xf-height .15s ease;overflow:hidden;height:0;opacity:0}
.menu{display:none;opacity:0;-webkit-transition: all .15s ease, -xf-opacity .15s ease;transition: all .15s ease, -xf-opacity .15s ease;position:absolute;z-index:200;margin:8px 0 0;min-width:240px;max-width:320px;border-radius:3px;box-shadow:0 5px 10px 0 rgba(0,0,0,0.35)}
.menu.menu--structural{margin-top:0}
.menu.menu--wide{width:350px;max-width:calc(100% - 10px)}
.offCanvasMenu{display:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:500;-webkit-transition: none .3s ease;transition: none .3s ease;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-tap-highlight-color:rgba(0,0,0,0)}
.avatar{display:inline-flex;justify-content:center;align-items:center;border-radius:0px;vertical-align:top;overflow:hidden}.avatar img{background-color:#fcfcff}
.avatar.avatar--m{width:96px;height:96px;font-size:58px}
.avatar img:not(.cropImage){text-indent:100%;overflow:hidden;white-space:nowrap;word-wrap:normal;display:block;border-radius:inherit;width:100%;height:100%}
.hScroller{overflow-y:hidden;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:touch}
.hScroller-scroll{display:block;white-space:nowrap;word-wrap:normal;overflow-x:hidden}.hScroller-scroll.is-calculated{overflow-x:scroll;padding-bottom:30px;margin-bottom:-30px}.hScroller-action{position:absolute;top:0;bottom:0;width:40px;padding:0 5px;display:none;cursor:pointer}
.hScroller-action.hScroller-action--start{left:0;justify-content:flex-start;text-align:left}
.hScroller-action.hScroller-action--end{right:0;justify-content:flex-end;text-align:right}
.scrollMeasure{position:absolute;top:-1000px;width:100px;height:100px;overflow:scroll;visibility:hidden}
.reactionsBar{display:none;opacity:0;-webkit-transition: all .15s ease, -xf-opacity .15s ease;transition: all .15s ease, -xf-opacity .15s ease;overflow-y:hidden;height:0;-webkit-transition-property:all,-xf-height;transition-property:all,-xf-height;background:#fcfcff;border:1px solid #ededed;border-left:2px solid #333;padding:10px;font-size:12px;margin-top:10px}
.bbWrapper>:first-child{margin-top:0}
.u-anchorTarget{height:10px;margin-top:-10px}
html:not(.has-browser-safari){scroll-padding-top:10px}
.p-pageWrapper{position:relative;display:flex;flex-direction:column;min-height:100vh;background:#f0f0f0}
.p-navEl:before,.p-navEl:after{content:" ";display:table}.p-navEl:after{clear:both}
.p-navEl-link{float:left;-webkit-transition: opacity .15s ease, background .15s ease;transition: opacity .15s ease, background .15s ease}
.p-navEl-splitTrigger{float:left;opacity:.5;cursor:pointer;text-decoration:none;-webkit-transition: all .15s ease;transition: all .15s ease}
.p-nav{color:#fcfcff;background:#141414}.p-nav a{color:inherit}
.p-nav-inner{max-width:960px;padding:0 10px;margin:0 auto;padding-left:0px;padding-right:0px;display:flex;align-items:flex-end}
.p-nav-inner{padding-left:max(0px, env(safe-area-inset-left));padding-right:max(0px, env(safe-area-inset-right))}
.p-nav-inner:before,.p-nav-inner:after{content:" ";display:table}.p-nav-inner:after{clear:both}.p-nav .p-nav-menuTrigger{display:none;vertical-align:middle;align-self:center;margin-left:4px;margin-right:5px;padding:15px 8px}
.p-nav .p-nav-menuTrigger i:after{font-family:'Font Awesome 5 Pro';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:22px;content:"\f0c9";width:1.28571429em;display:inline-block;text-align:center;vertical-align:bottom}.p-nav .p-nav-menuTrigger .p-nav-menuText{display:none}.p-nav-smallLogo{display:none;max-width:100px;align-self:center}
.p-nav-scroller{margin-right:auto;max-width:100%}
.p-nav-scroller .hScroller-action{color:#fcfcff}
.p-nav-scroller .hScroller-action.hScroller-action--start{background:#141414;background:linear-gradient(to right, #141414 66%, rgba(20,20,20,0) 100%)}.p-nav-scroller .hScroller-action.hScroller-action--end{background:#141414;background:linear-gradient(to right, rgba(20,20,20,0) 0%, #141414 33%)}.p-nav-list{list-style:none;margin:0;padding:0;font-size:0}.p-nav-list:before,.p-nav-list:after{content:" ";display:table}.p-nav-list:after{clear:both}.p-nav-list:before,.p-nav-list:after{display:inline-block;width:10px;content:''}.p-nav-list>li{display:inline-block;vertical-align:bottom;font-size:15px}.p-nav-list>li:first-child{margin-left:0}.p-nav-list .p-navEl-link{padding:0 20px}.p-nav-list .p-navEl-link.p-navEl-link--splitMenu{padding-right:2.5px}
.p-nav-list .p-navEl-splitTrigger{padding:0 6.66666667px}.p-nav-list .p-navEl{color:#fcfcff;text-decoration:none;-webkit-transition: all .15s ease;transition: all .15s ease}.p-nav-list .p-navEl.is-selected{color:#fff;font-weight:700;background:#333;border-top-left-radius:0px;border-top-right-radius:0px}.p-nav-list .p-navEl.is-selected .p-navEl-link{padding-right:20px}
.p-nav-list .p-navEl.is-selected .p-navEl-splitTrigger{display:none}
.p-nav-list .p-navEl-link,.p-nav-list .p-navEl-splitTrigger{padding-top:15px;padding-bottom:15px}
.has-js .p-nav-inner{min-height:45px}.has-js .p-nav .p-nav-menuTrigger{display:inline-block}.has-js .p-nav-smallLogo{display:inline-block}.has-js .p-nav-scroller{display:none}
.p-nav-opposite{margin-left:auto;margin-right:10px;text-align:right;flex-shrink:0}.p-navgroup{float:left;background:rgba(29,29,29,0.15);border-top-left-radius:0px;border-top-right-radius:0px}.p-navgroup:before,.p-navgroup:after{content:" ";display:table}.p-navgroup:after{clear:both}.p-navgroup.p-discovery{margin-left:.5em}
.p-navgroup-link{float:left;padding:15px 12px;border-left:1px solid rgba(29,29,29,0.15)}.p-navgroup-link:first-of-type{border-top-left-radius:0px;border-left:none}.p-navgroup-link:last-of-type{border-top-right-radius:0px}
.p-navgroup-link.p-navgroup-link--iconic i:after{font-family:'Font Awesome 5 Pro';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;min-width:1.2em;text-align:center}
.p-navgroup-link.p-navgroup-link--whatsnew i:after{content:"\f0e7";width:1.28571429em;display:inline-block;text-align:center}.p-navgroup-link.p-navgroup-link--search i:after{content:"\f002";width:1.28571429em;display:inline-block;text-align:center}.p-navgroup-link--whatsnew{display:none}.p-navgroup-link:first-of-type.p-navgroup-link--whatsnew+.p-navgroup-link{border-top-left-radius:0px;border-left:none}
.p-navgroup-link.p-navgroup-link--iconic .p-navgroup-linkText,.p-navgroup-link.p-navgroup-link--textual i{display:none}.p-navgroup-link.p-navgroup-link--textual{overflow:hidden;white-space:nowrap;word-wrap:normal;text-overflow:ellipsis;max-width:110px}.p-navgroup-link.p-navgroup-link--iconic i:after{text-align:center}
.p-navgroup-link--whatsnew{display:block}.has-js .p-nav-opposite{align-self:center;margin-right:4px}.has-js .p-nav-opposite .p-navgroup{background:none;margin-left:0}.has-js .p-nav-opposite .p-navgroup-link{border:none;border-radius:0px}
.p-sectionLinks{font-size:13px;color:#fff;background:#333;border-bottom:1px solid #1a1a1a;padding:5px 0px}
.has-js .p-sectionLinks{display:none}
.p-body{display:flex;align-items:stretch;flex-grow:1;min-height:1px}.p-body-inner{display:flex;flex-direction:column;width:100%;max-width:960px;padding:0 10px;margin:0 auto;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:20px}
.p-body-inner{padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right))}
.p-body-inner:before,.p-body-inner:after{content:" ";display:table}.p-body-inner:after{clear:both}.p-body-header{margin-bottom:10px}.p-body-main{display:table;table-layout:fixed;width:100%;margin-bottom:auto;min-height:1px}.p-body-content{display:table-cell;vertical-align:top}
.p-body-sideNavCol,.p-body-contentCol,.p-body-sidebarCol{display:table-column}
.p-body-content>:first-child,.p-body-pageContent>:first-child,.p-body-sideNav>:first-child,.p-body-sideNavContent>:first-child,.p-body-sidebar>:first-child{margin-top:0}.p-body-content>:last-child,.p-body-pageContent>:last-child,.p-body-sideNav>:last-child,.p-body-sideNavContent>:last-child,.p-body-sidebar>:last-child{margin-bottom:0}
.p-body-sideNavCol,.p-body-contentCol,.p-body-sidebarCol{display:none;width:auto}.p-body-main,.p-body-content{display:block}
.p-breadcrumbs{list-style:none;margin:0;padding:0;margin-bottom:5px;line-height:1.5}.p-breadcrumbs:before,.p-breadcrumbs:after{content:" ";display:table}.p-breadcrumbs:after{clear:both}.p-breadcrumbs.p-breadcrumbs--bottom{margin-top:20px;margin-bottom:0}.p-breadcrumbs>li{float:left;font-size:13px}.p-breadcrumbs>li a{display:inline-block;vertical-align:bottom;max-width:300px;overflow:hidden;white-space:nowrap;word-wrap:normal;text-overflow:ellipsis}.p-breadcrumbs>li:after,.p-breadcrumbs>li:before{font-family:'Font Awesome 5 Pro';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:90%;color:#9d9d9d}.p-breadcrumbs>li:after{content:"\f105";width:1.28571429em;display:inline-block;text-align:center}.p-breadcrumbs>li:last-child a{font-weight:700}
.p-breadcrumbs>li a{max-width:200px}
.p-breadcrumbs>li{display:none;font-size:11px}.p-breadcrumbs>li:last-child{display:block}.p-breadcrumbs>li a{max-width:90vw}.p-breadcrumbs>li:after{display:none}.p-breadcrumbs>li:before{content:"\f053";width:1.28571429em;display:inline-block;text-align:center;margin-right:.5em}
.p-title{display:flex;flex-wrap:wrap;align-items:center;max-width:100%;margin-bottom:-5px}
.p-title-value{padding:0;margin:0 0 5px 0;font-size:22px;font-weight:400;min-width:0;margin-right:auto}
.p-description{margin:5px 0 0;padding:0;font-size:13px;color:#9d9d9d}
.p-title-value{font-size:18px}
.p-footer{font-size:13px;color:#fff;background:#1e1e1e;padding:12px 15px}.p-footer a{color:#fff}.p-footer-inner{max-width:960px;padding:0 10px;margin:0 auto;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:12px}
.p-footer-inner{padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right))}
.p-footer-row{margin-bottom:-12px}.p-footer-row:before,.p-footer-row:after{content:" ";display:table}.p-footer-row:after{clear:both}.p-footer-row-main{float:left;margin-bottom:12px}.p-footer-row-opposite{float:right;margin-bottom:12px}.p-footer-linkList{list-style:none;margin:0;padding:0}.p-footer-linkList:before,.p-footer-linkList:after{content:" ";display:table}.p-footer-linkList:after{clear:both}.p-footer-linkList>li{float:left;margin-right:.5em}.p-footer-linkList>li:last-child{margin-right:0}.p-footer-linkList>li a{padding:2px 4px;border-radius:0px}
.p-footer-copyright{margin-top:20px;text-align:center;font-size:11px}
.p-footer-row-main,.p-footer-row-opposite{float:none}.p-footer-copyright{text-align:left;padding:0 4px}
.userBanner{font-size:75%;font-weight:400;font-style:normal;padding:1px 10px;border:1px solid transparent;border-radius:0px;text-align:center;display:inline-block}.userBanner strong{font-weight:inherit}.userBanner.userBanner--hidden{background:none;border:none;box-shadow:none}
 

Syrinj

BuSo Pro
Joined
Mar 31, 2017
Messages
24
Likes
38
Points
0
Okay, just wanted to give everyone a huge thanks for stepping in to provide their insight! I got it working the way I needed it to shortly after I posted this.

The best thing about this script is that I can run it as many times over as I want as I breakdown the code from bloated websites that I want to convert to fast "flattened" landers. Maybe I'm just eccentric, or maybe there's an autist in me that is strangely fascinated and oddly satisfied by this process.

I ended up skipping request interception, @Kira, since I was able to find a solution that didn't require me to change the method of feeding the variables, but thanks, I didn't know that was a thing. It seems like it might be similar to using streams.

I ended up nixxing the device call entirely, @DanSkippy since it seems for my purposes at the moment, I'm just looking to reverse engineer the ripped lander into a generally responsive design that will work without any crazy bells/whistles specific to any particular browser. Webkit browsers will be fine.

A person from Stack Overflow informed me that I would need to eliminate variable declaration of an array for jsCoverage and cssCoverage because jsCoverage and cssCoverage already exist in puppeteer as arrays without needing to declare a variable. Also told me that "for...in" loops iterate over object properties, and that I'd need to use a "for...of" loop to iterate over arrays and ranges. This might be why the variables were returning shit values, @Ryuzaki.

Just for an FYI, I ended up going from this:

JavaScript:
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";
        }       
    }

to this:

JavaScript:
var js_used_bytes = 0;
var js_total_bytes = 0;
var covered_js = "";
for (var entry of jsCoverage) {
    js_total_bytes += entry.text.length;
    console.log(`Total Bytes for ${entry.url}: ${entry.text.length}`);
    for (var range of entry.ranges){
        js_used_bytes += range.end - range.start - 1;
        covered_js += entry.text.slice(range.start, range.end) + "\n";
        }
    }