Basic認証のかかったサイトでLighthouseを実行する

公開日時

Lighthouseを使うことでサービスの品質スコアをチェックできる。

改善対応を行う際に本番反映前にステージング環境でテストを行いたい。

ただ、ステージング環境にはBasic認証がかかっているのでChrome拡張のLighthouseの場合はエラーになってしまう。

lighthouse/authenticated-pages.mdにいくつか方法が記載されているが、npmのlighthouseを使うと手軽に解決できた。

  • lighthouseをインストール
npm install -g lighthouse
  • デバッグ用のブラウザを立ち上げる
chrome-debug
✨  Chrome debugging port: 62915
  • サイトを開いてBasic認証情報を入力

  • lighthouseを実行

lighthouse --view https://basic-auth-test-url.your-host --port 62915
  • レポートが表示される
    • lighthouse実行ディレクトリ以下にhtmlが保存される

これでBasic認証のかかったサイトでもlighthouseでの品質チェックができるようになった。

Chrome拡張版だと何度も実行するとAPI制限に引っかかってしうので、cli版のlighthouseを使って手軽に何度も試せるようにしておくと良さそう。

参考


Related #chrome

Googleアナリティクス オプトアウト アドオンで特定のサイトのみGAを無効化する

Chrome拡張の設定画面で指定のURLのみ拡張を有効にする

The Great Suspenderの待機画面をダークモードに変更する

オプションで変更できた

cssでダークモードに対応する

@media (prefers-color-scheme: dark) を使う

Chromeでフルサイズのスクリーンショットを撮る

コマンド機能を使えば拡張を入れなくてもスクリーンショットが撮れる

Google検索結果をダークモードに変える

Dark Readerを入れた

RaspberryPi上でPuppeteerを動かす

Dockerを使うとすんなり動かせる