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

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

nsfw-filter Chrome拡張を導入する

ローカルの機械学習モデルを使って画像のフィルタをしてくれるとのこと

Copy URL+からCopy as Markdownに移行

ワンクリックでリンクをコピーできるのは便利

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

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

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

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

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

Dark Readerを入れた