Google Chrome（グーグルクローム）において、画面をリフレッシュ（リロード）するボタンや、そのショートカットはよく知られていると思います。
しかし、通常のリロードにおいては、CSSなどの一度読み込まれた外部ファイルのキャッシュが残っていると、再度の読み込みを回避して、保存されたファイルを読み込んでしまい、本当のリフレッシュが実現できません。
これらのキャッシュをクリアするショートカットの紹介です。
目次
スーパーリロードのショートカット
Google Chromeの「スーパーリロード」と呼ばれるショートカットです。
// Mac版 Cmd + Shift + R // Windows版 Shift + F5
このショートカットで、実際に起きることは、正確には「このページから参照されている外部ファイル（CSS、Javascript、画像ファイルなど）に関しては、キャッシュを使わないでリロードする」という振る舞いです。サーバー側でファイルの更新が発生したのに、キャッシュが残って何らかの表示問題が発生した場合に有効です。
日本語では、しばしば「スーパーリロード」呼ばれる事もありますが、スーパーリロードは俗称で、正式名称ではないはずです。ちなみに、英語ではUI上に「Hard Reload」と記載されます。
Google ショートカット
全てのキャッシュをクリアする方法
上記は「そのページから直接参照される外部ファイルのキャッシュを無視」でしたが、一方で、「そのページから直接参照されてないけど、読み込まれるファイル」とういキャッシュも存在します。
例えば、ページ上で実行されるJavascriptから動的に読み込まれるファイルなどです。これにより、「Cmd + Rでスーパーリロードしても、まだキャッシュを使っている可能性は残ってしまいます。
これらを含めてキャッシュを空っぽにしてリロードする方法です。
Chromeの設定UIを利用して完全にキャッシュクリア
ちょっとステップが多く面倒ですが、Chromeの設定に用意された設定UIを利用できます。
右上の方にある、設定アイコンをクリックし「設定 ＞ その他のツール ＞ 閲覧履歴の消去」と進みます。
履歴の消去画面を開いたら、こちらです。
ここでは他にも、閲覧履歴や、クッキーの情報など、いろいろ消せるのですが、「ページの外部リソースのキャッシュの削除」に関しては「キャッシュされた画像とファイル」にチェックを入れて、クリアすればオーケーです。また、この画面の一番上にチェックボックスがあり、クリアする時間範囲を限定できます、これは便利ですね。完全に空っぽにするには「最初から」を選ぶ必要があります。
この操作により、動的にスクリプトから読み込まれたファイルも含めて、本当に完全にキャッシュをクリアしてくれるようです。
ちなみにですが、この「閲覧履歴の消去画面」を呼び出すのに、下記ショートカットも使えるようです。頻繁に使う人は覚えておくと便利だと思います。
// Chromeのキャッシュなどをクリアする画面を開くショートカット (MacOS) Shift + Cmd + delete
いわずもがなですが、このUIを使って、閲覧履歴なども削除できます。
Chromeの開発モード限定の「ウルトラスーパーリロード」
ウルトラは半分冗談ですが、キャッシュを完全に破棄するもう一つの方法です。ウェブ開発者の人たちは御用達かもしれませんが、Chromeには「開発モード」と呼ばれる、ウェブ開発者向けに、より多くの機能が開放されたモードが存在します。
このモードを開始するには、右上の設定アイコンからメニューを開き「メニュー ＞ ツール ＞ 開発コンソール」と選択します。（ショートカットは「cmd + alt + i」です。）
これが「開発モード」です。開発モードでは、このようなパネルが開きます。
このパネルは「開発コンソール (Dev Console)」と呼ばれており、開発のためのたくさんの機能が盛り込まれています。さて、この状態で、クロームのリロードボタンを「長押し」もしくは「２本指クリック（MacOS）」「右クリック（Windows）」すると、このような選択肢が現れます。
いつもは存在しなかったリロード機能が出現します。上記の「キャッシュの消去とハード読み込み」 がそれにあたります。要は「キャッシュを完全にクリアして、すべてゼロの状態でリロードする」ということですね。これにより、クローム内に保存されたキャッシュを「すべて」破棄し、真のリロードが実現できます。
これに対応するショートカットキーはどうやら無いようです。
キャッシュを常にオフしておく設定
ちなみに、開発コンソールを開いている間は、常にキャッシュをオフにする機能がついています。ウェブ開発者は御用達（？）な人も多いと思います。
これをやっておけば、そのそも「Cmd＋R」のリロードによって、キャッシュが使われる事がありません。
以上、スーパーリロードと、ファイルキャッシュのクリアに関してでした。
Google Chromeのキャッシュについては、より詳しいまとめ記事を書いたので、お時間のある方はぜひどうぞ：
Chromeとスーパーリロードに関する参考サイト
- Stackoverflow: “What’s the difference between-normal-reload-hard-reload and empty cache.”
- Chrome ヘルプ: Chomeのキーボードショートカット
