Syrinj
BuSo Pro
- Joined
- Mar 31, 2017
- Messages
- 29
- Likes
- 39
- Degree
- 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:
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:
The shell returns:
Code:
css_total_bytes += entry.text.length;
TypeError: Cannot read property 'length' of undefinedOnce 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();
})();
