hacking on lighthouse report

readme.md

here's how i quickly iterate across 10* diff reports at once

1. mkdir -p _reports/_scripts/ folder in repo root
2. also do a mkdir -p _reports/_json/
3. add the below files into it

now you're setup for automation.

• run bash _reports/_scripts/update-artifacts.sh rarely.
• run bash _reports/_scripts/refresh-LHRs-from-artifacts.sh when LHRs change shape

and the real thing:

• run node _reports/_scripts/generate_report.js all the time
  • i have entr installed and so i use this:
    • ls lighthouse-core/report/**/* | entr node _reports/_scripts/generate_report.js
    • this'll regen the report files everytime a file within report/ is modified.
• then open up _report/, select all the .html files, and drag them onto your browser icon. that should open all 10 in diff tabs.

---

* okay really 5 unique ones. just slightly diff styling for the other 5. ;)

generate_report.js

'use strict';

/* eslint-disable */

const fs = require('fs');
const path = require('path');

const ReportGenerator = require('../../lighthouse-core/report/report-generator');

const jsonPath = __dirname + '/../_json/';
const filenames = fs.readdirSync(jsonPath).filter(f => f.endsWith('.json'));

console.log(`Writing reports to: ${path.join(__dirname, '/../')}`);
for (const filename of filenames) {
  const fileSlug = filename.replace('.json', '');
  const results = require(path.join(jsonPath, filename));
  const html = ReportGenerator.generateReportHtml(results);

  const filePath = path.join(jsonPath, `/../${fileSlug}.html`);
  fs.writeFileSync(filePath, html, {encoding: 'utf-8'});

  // Create Devtools report that's denser
  // TODO: add in extra styles that devtools manually injects
  const devtoolshtml = html
    .replace(`"lh-root lh-vars"`, `"lh-root lh-vars lh-devtools"`)
    .replace(`<title>Lighthouse Report`, `<title>DevTools Lighthouse Report`)


  const devtoolsFilePath = path.join(jsonPath, `/../z.devtools.${fileSlug}.html`);
  fs.writeFileSync(devtoolsFilePath, devtoolshtml, {encoding: 'utf-8'});
  console.log(` - ${fileSlug.padEnd(12)}: ${html.length.toLocaleString().padStart(11)} bytes`);
}

console.log(`Done. ${new Date().toLocaleTimeString()}`);

refresh-LHRs-from-artifacts.sh

#!/bin/bash

## updating the jsons

pwd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
artifactspath="$pwd/../_artifacts"
jsonpath="$pwd/../_json"
rootpath="$pwd/../.."

yarn update:sample-json --quiet && cp -f "$rootpath/lighthouse-core/test/results/sample_v2.json" "$jsonpath/dbwtester.json"

node "$pwd/generate_report.js" && echo "✅   dbwtester.html is refreshed. doing the rest." && echo "";

lighthouse --quiet --output=json -A="$artifactspath/errors" --output-path="$jsonpath/errors.json"
lighthouse --quiet --output=json -A="$artifactspath/solocat" --output-path="$jsonpath/solocat.json" --only-categories="performance"
lighthouse --quiet --output=json -A="$artifactspath/tinyhouse" --output-path="$jsonpath/tinyhouse.json"
lighthouse --quiet --output=json -A="$artifactspath/cnn" --output-path="$jsonpath/cnn.json"
lighthouse --quiet --output=json -A="$artifactspath/caltrain" --output-path="$jsonpath/caltrain.json"
lighthouse --quiet --output=json -A="$artifactspath/cnn" --output-path="$jsonpath/cnnXA.json" --locale=en-XA
lighthouse --quiet --output=json -A="$artifactspath/example" --output-path="$jsonpath/example.json"
lighthouse --quiet --output=json -A="$artifactspath/paulirish" --output-path="$jsonpath/paulirish.json"
lighthouse --quiet --output=json -A="$artifactspath/paulirish" --output-path="$jsonpath/paulirishXA.json" --locale=en-XA

node "$pwd/generate_report.js"

update-artifacts.sh

#!/bin/bash

## updating the artifacts

set -x

# yarn update:sample-artifacts  # uncomment if you actually need to refresh the dbwtester files
lighthouse -G="./_reports/_artifacts/tinyhouse" https://tinyhousebuild.com
lighthouse -G="./_reports/_artifacts/cnn" http://cnn.com
lighthouse -G="./_reports/_artifacts/example" http://example.com
lighthouse -G="./_reports/_artifacts/paulirish" https://www.paulirish.com/
lighthouse -G="./_reports/_artifacts/caltrain" https://caltrainschedule.io/