Chromeで(いわゆる)スーパーリロードとキャッシュクリアを少しでも楽に行いたい

やりたいこと

Web開発において、コンテンツをサーバ側にアップロードしてリロードしたにも関わらず、ブラウザに反映されないことがあります。 確実に反映させるために、以下の手順を実施していました。

• ブラウザ(Chrome)のローカルキャッシュをクリア
• スーパーリロードを実施して、キャッシュ設定状態によらず、サーバからコンテンツをダウンロード
  • Ctrl(macOSの場合 Command) + Shift + R

この手順が少しでも楽にならないかと思い、調べてみました。

環境

• macOS Catalina 10.15.6
• Chrome 84.0.4147.125

Chrome デベロッパーツールを使う場合

上記のページの通りなのですが、Chrome デベロッパーツールを開いている時限定で、 ブラウザの再読み込みボタン上で右クリックする(もしくは左クリックし続ける)と現れるメニューから キャッシュの消去とハード再読み込み を選択すると実行されます。

Chrome拡張を使う場合

デベロッパーツールを起動していない状態でも実施したい場合は、Chrome 拡張を使うことも出来ます。

追加されたアイコンを左クリックするか、ショートカットの Ctrl + Shift + E を入力すると実行されます。

私の macOS 環境は Ctrl を Command に置き換えているため、ショートカットの設定を Command + Shift + E に変更しました。

上記でも更新されない

開発中に、上記の対応でもキャッシュクリアされず、昔のコンテンツが表示されてしまうことがありました。

色々調べた結果、Vue CLI で PWA (Progressive Web Apps) を有効にしたプロジェクトが Cache Storage にキャッシュされたコンテンツを表示するようになっていました。

プロジェクト状況を確認したところ PWA 対応は意図したものでは無かったので、以下のページを参考に差分となるライブラリを削除し、ソースを修正しました。

また、ブラウザ側の対応として、デベロッパーツールの Application - Cache - Cache Storage の該当部分を削除し、Application - Service Workers の該当部分を Unregister しました。

最後に

ちょっとした事ではありますが、開発中に頻発する作業だったので、効率が上がったのが嬉しいです。 同じように悩んでいる方の一助になれば幸いです。