Google Chrome（グーグルクローム）に保存されたキャッシュを完全に削除する方法をまとめました。
また、CSSなどの外部ファイルキャッシュ、またキャッシュ削除に関連する種々の操作方法についても網羅しました。
Table of Content
閲覧中のページのキャッシュを削除する「スーパーリロード」
まず、Chromeで、通常リロードを行うには、リロードボタンを押すか、もしくは、以下のショートカットキーを実行します。
// 通常のリロード（Macの場合）
Command + R
// 通常のリロード（WIndowsの場合）
F5このリロードショートカットによって、Webページ自体は更新されるのですが、そのページ内で読み込まれているCSSや画像などの外部ファイルは、Chromeが保存したキャッシュを利用し続けてしまいます。この状態では、外部ファイルが、仮に配信サーバー側で更新されても、ブラウザ上の表示に反映されないという問題が生じます。
この問題を回避するため、ブラウザに残ったキャッシュを削除してやる必要があります。日本語では、しばしば「スーパーリロード」呼ばれているのを見かけますが、英語では「Hard Reload」と記載されているようです。
スーパーリロードのショートカット
// スーパーリロード（Macの場合）
Command + Shift + R
// スーパーリロード（WIndowsの場合）
Shift + F5
スーパーリロードを使うと、「現在のページから参照されている外部ファイルに関しては、キャッシュを使わずにリロードする」ことができます。この操作で、そのページから参照されている外部ファイルに関しては、Chromeに残っている古いキャッシュを削除できます。
古い CSSや画像のキャッシュのせいなどで、何らかの表示問題が発生して、そのページの最新の状態を確かめたい場合に、気軽に試せるショートカットコマンド、とも言えるでしょう。
スーパーリロードの課題
上記のスーパーリロードの振る舞いは、「そのページから直接参照される外部ファイルのキャッシュを使わない」でした。しかしながら「そのページから直接参照されてないが、間接的に読み込まれる外部ファイル」といったファイルキャッシュも存在します。例えば、ページ上で実行されるJavascriptから動的に読み込まれるファイルなどです。
少し専門的になってきますので、あまり深追いせずにまとめると「Cmd + Shift + Rでスーパーリロードしても、まだキャッシュを使っている可能性は残っている」ということです。
Chromeのキャッシュを「完全に」削除する方法
予期せずキャッシュが使われてしまう可能性をなくすために、Chromeには「ブラウザが保存したキャッシュを全て削除する」という操作も存在します。これが「本当のキャッシュクリア」と呼べるはずです。
下記に３つの方法を紹介します。
[方法１] 設定のキャッシュ削除機能を利用する
Chromeの設定に用意されているキャッシュを削除するための機能を利用します。
Chromeのキャッシュを完全に削除する手順
- Chromeの設定 [ ︙ ] をクリック
- [その他のツール] > [閲覧履歴の消去] を選択
- 閲覧履歴の消去パネルが開くので、任意の [期間] を選択
- [キャッシュされた画像とファイル] をチェック
- [閲覧履歴データを消去する] ボタンをクリック
１）ウィンドウの右上の方にある、Chromeの設定アイコン[ ︙ ]をクリックします。
２）[その他のツール] ＞ [閲覧履歴の消去]と進みます。
３）履歴の消去パネルがポップアップします。任意の[期間]を選択します。
４）[キャッシュされた画像とファイル]をチェックして・・、
５）最後に[閲覧履歴データを消去する]を選択します。
「期間」のプルダウンに関しては、削除する時間範囲を任意に限定できます。完全に空っぽにするには、この期間で「最初から」を選ぶ必要があります。この操作により、動的にスクリプトから読み込まれたファイルも含めて、本当に完全にキャッシュをクリアして、空っぽにしてくれます。
ちなみにですが、この「閲覧履歴の消去画面」ポップアップを呼び出すのに、下記ショートカットも使えるようです。頻繁に使う人は覚えておくと便利だと思います。
Chromeの「閲覧履歴の消去」パネル
この機能をよく使うようであれば、ショートカットが便利です。
// クロームのキャッシュを削除するパネルを開く (Mac)
Shift + Cmd + delete
なお、このポップアップでは他にも、「閲覧履歴」や、「クッキーの情報」など、いろいろな種類のキャッシュをクリアできます。
[方法２] Chrome開発モードの機能でキャッシュを削除する
キャッシュを完全にクリアするもう一つの手順です。
ウェブ開発者の人たちは御用達ですが、Chromeには「開発モード」と呼ばれる、ウェブ開発者向けに、より多くの機能が開放されたモードが存在します。
このモードを開始するには、右上の設定アイコンからメニューを開き「メニュー ＞ ツール ＞ 開発コンソール」と選択します。（Macのショートカットは「Command + option + I 」です。）
開発モードでは、このようなパネルが開きます。
このパネルは「開発コンソール (Dev Console)」と呼ばれており、開発のためのたくさんの機能が盛り込まれています。
さて、この状態で、クロームのいつものリロードボタンを「長押し」もしくは「２本指クリック（Mac）」「右クリック（Windows）」すると・・・、
このような選択肢が現れます。普段のChromeには存在しなかった機能ですね。
上記の「Empty Cache and Hard Reload」 がそれにあたります。要は「キャッシュを完全にクリアして、すべてゼロから読み込みます」ということですね。これに対応するショートカットキーはどうやら無いようです。
[方法３] Chrome Extension を利用する
もしより頻繁なキャッシュのコントロールが必要であれば、Chrome Extensionの利用がおすすめです。
例えば、Chrome Extensionのひとつ「Clear Cache」を利用すれば、Chromeのツールバーにキャシュ削除ボタンが配置されますのでワンクリックで、お好みの設定・範囲でキャッシュクリアすることができます。
ボタンのクリック時の動作は、設定で自由に設定できます。
[補足１] Chromeのキャッシュの制御について
キャッシュを常に無効にする設定
補足情報です。開発コンソールを開いている間は、常にキャッシュを無効にする機能がついています。CSSを頻繁に更新するウェブ開発者は御用達な方も多いと思います。
場所はこちらです：
「Disable Cache」をクリックするだけで、キャッシュの利用が常に無効になりますので、いちいちクリア操作して削除する必要がなくなります。筆者はこのチェックを常にオンにして作業しています。
保存されたキャッシュを一覧する
おまけです。chromeにキャッシュされたファイルを一覧する方法です。アドレスバーに下記を打ち込んで下さい。クロームのデバッガ機能が立ち上げあります。
アイテムをクリックしてもバイナリで表示されますので、そのまま閲覧はできませんが・・・、これは復元が可能です。必要な方は、別途グーグルで検索すると方法が出てくると思います。筆者は過去に、失われてしまったページをこちらから強引に復元したことがあります。
キャッシュの保存場所？
タイムマシンなどバックアップを作成する時に、キャッシュを含めたくない場合があるかもしれません。MacのChromeでは、アプリ補助フォルダーにすべてのキャッシュが保存されています。
場所は、
~/Library/Application Support/Google/Chrome/Default/Application Cache/
です。一次キャッシュは、
~/Library/Application Support/com.google.Chrome/
にあります。（Mac）
「シークレットモード」でキャッシュを迂回して閲覧する
キャッシュを無視してウェブページを閲覧するもう一つの方法です。Google Chromeには「シークレットモード」というウィンドウの種類があります。
シークレットモードのウィンドウは、メニュー[ ︙ ]から起動するか、ショートカット「Command + Shift + N」で起動できます。（英語では「incognito（匿名の） window」と呼ばれています）
起動すると、怪しげな覆面マークが表示されます。
この画面を読んでも分かる通り、このウィンドウを使うと、Chromeは下記のような動きをします。
- 過去に保存されたキャッシュを使わない。Windowを開いている限りはキャッシュを使いますが、一度プライベートウィンドウを閉じると、その時に保存されたキャッシュはすべて削除されます。
- 履歴、クッキー、フォーム履歴などのデータを残しません。
- Chromeに保存されたGoogle アカウントのログインを引き継ぎません
この状態での閲覧は「プライベートブラウジング」と呼ばれています。ヘルプにより詳しく記載されています：
[補足２] ブラウザのキャッシュについて
ここからは番外編です。
キャッシュについて詳しく知らない方や、ウェブ開発入門者の方へ。
ブラウザのファイルキャッシュ
ファイルキャッシュとは、ウェブページを読み込んだとき、そのページからリンクされ追加で読み込まれるCSS（スタイルシート）や、javascript、画像ファイルなどです。Chromeは、自動でこれらのファイルを保存（＝これを「キャッシュ」と呼びます）」し、次回、また同じファイルがまた必要になったとき、通信を行わなくても良いように、キャッシュを利用して表示を高速化します。
ページの表示の高速化の仕組み
ファイルキャッシュはそのファイルのURL文字列で識別しているため、たとえば
<img src="/images/bird-01.jpg">
という画像タグであれば、「/image/bird-01.jpg」というURLと同じアドレスを読み込む場合、必ずブラウザ側に保存されたキャッシュを利用し、再度の通信によるサーバーをからの読み込みを回避します。
このしくみは、普段は高速なファイル読み込み助けているのですが、例えば、ウェブページの管理者が、bird-01.jpgの中身を変更してしまったら、「同じURL文字列であれば、キャッシュを利用する」しくみがアダとなり「そのブラウザ上でだけ、新しい画像の表示が行われない」という問題を生じてしまいます。
これはこの記事の冒頭での説明の通りです：
上図は、画像ファイルの例ですが、CSSなどの画面のレイアウトを定義するファイルでも同様の問題が生じます。
もしこのような問題が生じた場合、そのブラウザ側で保存された古いファイルの破棄、すなわち「キャッシュの明示的なクリア」の操作が必要になります。
Google Chromeのキャッシュの種類
Google Chromeの利用するキャッシュは上記のようなファイルキャッシュ以外にも、多くの種類が存在します。すべては網羅できないですが、代表的なものを列挙すると下記のようなものです。
- Cookie
- 閲覧履歴
- DNSキャッシュ
- フォームの入力データ
それ以外では、「Cookie」はウェブページが利用できる一時的な情報の保存領域のことで、これは「クッキー」と読んでいます。Cookieに関しては、「ChromeのCookieを削除する方法」の記事をご覧ください。
「DNS」とは、ホスト名とIPアドレス紐付けるデータのことです。こちらも、本来毎回ネームサーバーに問い合わせる通信が発生しますが、これをキャッシュを使って高速化します。DNSにキャッシュについては「ChromeのDNSキャッシュを削除する方法」をご覧ください。
[補足３] サーバー側の設定で、キャッシュ問題を回避
もしあなたがウェブ開発者なら、今回の記事のようなキャッシュ削除操作を、閲覧しているユーザ側に行わせるような状態を作るのは好ましくありません。閲覧者はキャッシュなどを意識せず、いつでも最新の状態を閲覧できる必要があるはずです。
更新したファイル名を変更する
上述の通り「同じURL文字列であれば、キャシュを利用する」という振る舞いですのでURLを変えればキャッシュを利用しません。
// 更新前
<img src="/img/bird/bird-1.jpg">
// 更新後
<img src="/img/bird/bird-1.1.jpg">但し、これを更新事に行うのは骨がおれます。
ファイル名の変更の自動化
通常は、PHPなどでこのように自動化します。
#PHPファイル
<img src="/img/bird/bird-1.jpg?v=<?php echo filemtime('img/bird/bird-1.jpg'); ?>">
#出力されるHTML
<img src="/img/bird/bird-1.jpg?v=1500568282">
ファイル名の直後に続く「?v=xxxx」は、クエリ文字列と呼ばれ、HTTP のリクエストにおいて、付加的な情報を与える記法です。多くのブラウザは、この文字列を含めてマッチを取りますので、この値が異なれば、別のURLとして判別してもらえます。その一方で、返されるファイルのファイル名はクエリ文字列にかかわらず同じです。
filemtime() 関数はファイルの最終更新日付を取得しますので、ファイル更新があれば、自動的に値が更新され、別のURLが生成される仕組みとなっています。
この様な工夫で、キャッシュの削除操作をユーザに行わせることなく、ファイルが更新されれた自動的に新しいファイルが読まれる、という仕組みです。
参考
以下、Google Chromeとキャッシュの削除に関する、参考サイトです。
- Stackoverflow: “What’s the difference between-normal-reload-hard-reload and empty cache.”
- Chrome ヘルプ: Chomeのキーボードショートカット
- Wikipedia: HTTP Cookie
以上になります。