Google Chrome（グーグルクローム）に保存されたキャッシュを完全に削除する方法をまとめました。また、CSSなどの外部ファイルキャッシュ、またキャッシュ削除に関連する種々の操作方法についても網羅しました。
Table of Content
通常のリロード
まずは、Webページの通常のリロード（再読込、リフレッシュ）についてです。ページをリロードするには、ブラウザのリロードボタンを押すか、もしくは、以下のショートカットキーを実行します。MacとWindowsの違いはご注意下さい。
リロードのショートカット
|
1 2 3 4 5 |
// Macの場合 Command + R // Windowsの場合 F5 |
リロードの問題点
このリロードショートカットによって、Webページ自体は更新されるのですが、そのページ内で読み込まれているCSSや画像などの外部ファイルは、Chromeが保存したキャッシュを利用し続けてしまいます。この状態では、外部ファイルが、仮に配信サーバー側で更新されても、ブラウザ上の表示に反映されないという問題が生じます。
Chromeのキャッシュを削除する方法
キャッシュを無視する「スーパーリロード」とは？
日本語では、しばしば「スーパーリロード」呼ばれているのを見かけます。英語では「Hard Reload」と記載されているようです。
スーパーリロードを使うと、実際に起きることは、「現在のページから参照されている外部ファイルに関しては、キャッシュを使わずにリロードする」という振る舞いです。
この操作で、そのページから参照されている最新の外部ファイルを取得し、Chromeに残っている古いキャッシュを削除できます。
スーパーリロードのショートカット
|
1 2 3 4 5 |
// Macの場合 Command + Shift + R // Windowsの場合 Shift + F5 |
古い CSSや画像のキャッシュのせいなどで、何らかの表示問題が発生して、そのページの最新の状態を確かめたい場合に、気軽に試せるショートカットコマンド、とも言えるでしょう。
スーパーリロードの問題点
上記のスーパーリロードの振る舞いは、「そのページから直接参照される外部ファイルのキャッシュを使わない」でした。しかしながら「そのページから直接参照されてないが、間接的に読み込まれる外部ファイル」といったファイルキャッシュも存在します。例えば、ページ上で実行されるJavascriptから動的に読み込まれるファイルなどです。
少し専門的になってきますので、あまり深追いせずにまとめると「Cmd + Shift + Rでスーパーリロードしても、まだキャッシュを使っている可能性は残っている」ということです。
Chromeのキャッシュを「完全に」削除する方法
予期せずキャッシュが使われてしまう可能性をなくすために、Chromeには「ブラウザが保存したキャッシュを全て削除する」という操作も存在します。これが「本当のキャッシュクリア」と呼べるはずです。これには２つの方法があります。
[方法１] 設定メニューからキャッシュを削除する
Chromeの設定に用意されているキャッシュを削除するための機能を利用します。
Chromeのキャッシュを削除する手順サマリー
- Chromeの設定 [ ︙ ] をクリック
- [その他のツール] > [閲覧履歴の消去] を選択
- 閲覧履歴の消去パネルが開くので、任意の [期間] を選択
- [キャッシュされた画像とファイル] をチェック
- [閲覧履歴データを消去する] ボタンをクリック
詳細な手順
１）ウィンドウの右上の方にある、Chromeの設定アイコン[ ︙ ]をクリックします。
２）[その他のツール] ＞ [閲覧履歴の消去]と進みます。
３）履歴の消去パネルがポップアップします。任意の[期間]を選択します。
４）[キャッシュされた画像とファイル]をチェックして・・、
５）最後に[閲覧履歴データを消去する]を選択します。
「期間」のプルダウンに関しては、削除する時間範囲を任意に限定できます。完全に空っぽにするには「最初から」を選ぶ必要があります。この操作により、動的にスクリプトから読み込まれたファイルも含めて、本当に完全にキャッシュをクリアして、空っぽにしてくれます。
ちなみにですが、この「閲覧履歴の消去画面」ポップアップを呼び出すのに、下記ショートカットも使えるようです。頻繁に使う人は覚えておくと便利だと思います。
Chromeの「閲覧履歴の消去」パネル
この機能をよく使うようであれば、ショートカットが便利です。
|
1 2 |
// クロームのキャッシュを削除するパネルを開く (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のツールバーにキャシュ削除ボタンが配置されますのでワンクリックで、お好みの設定・範囲でキャッシュクリアすることができます。
ボタンのクリック時の動作は、設定で自由に設定できます。
キャッシュの制御についての補足情報
キャッシュを常に無効にする設定
補足情報です。開発コンソールを開いている間は、常にキャッシュを無効にする機能がついています。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 アカウントのログインを引き継ぎません
この状態での閲覧は「プライベートブラウジング」と呼ばれています。ヘルプにより詳しく記載されています：
参考サイト
以下、Google Chromeとキャッシュの削除に関する、参考サイトです。
- Stackoverflow: “What’s the difference between-normal-reload-hard-reload and empty cache.”
- Chrome ヘルプ: Chomeのキーボードショートカット
- Wikipedia: HTTP Cookie
[補足] キャッシュについて
ここからは番外編です。キャッシュについて詳しく知らない方へ。
ブラウザのファイルキャッシュ
ファイルキャッシュとは、ウェブページを読み込んだとき、そのページからリンクされ追加で読み込まれるCSS（スタイルシート）や、javascript、画像ファイルなどです。Chromeは、自動でこれらのファイルを保存（＝これを「キャッシュ」と呼びます）」し、次回、また同じファイルがまた必要になったとき、通信を行わなくても良いように、キャッシュを利用して表示を高速化します。
ページの表示の高速化の仕組み
ファイルキャッシュはそのファイルのURL文字列で識別しているため、たとえば
<img src="/images/bird-01.jpg">
という画像タグであれば、「/image/bird-01.jpg」というアドレスを読み込む限り、必ずブラウザ側に保存されたキャッシュを利用し、再度の通信によるサーバーをからの読み込みを回避します。
このしくみは、普段は高速なファイル読み込み助けているのですが、例えば、ウェブページの管理者が、bird-01.jpgの中身を変更してしまったら、「同じURL文字列であれば、キャッシュを利用する」しくみがアダとなり「そのブラウザ上でだけ、新しい画像の表示が行われない」という問題を生じてしまいます。
これはこの記事の冒頭での説明の通りです：
上図は、画像ファイルの例ですが、CSSなどの画面のレイアウトを定義するファイルでも同様の問題が生じます。
もしこのような問題が生じた場合、そのブラウザ側で保存された古いファイルの破棄、すなわち「キャッシュの明示的なクリア」の操作が必要になります。
Google Chromeのキャッシュの種類
Google Chromeの利用するキャッシュは上記のようなファイルキャッシュ以外にも、多くの種類が存在します。すべては網羅できないですが、代表的なものを列挙すると下記のようなものです。
- Cookie
- 閲覧履歴
- DNSキャッシュ
- フォームの入力データ
それ以外では、「Cookie」はウェブページが利用できる一時的な情報の保存領域のことで、これは「クッキー」と読んでいます。Cookieに関しては、「ChromeのCookieを削除する方法」の記事をご覧ください。
「DNS」とは、ホスト名とIPアドレス紐付けるデータのことです。こちらも、本来毎回ネームサーバーに問い合わせる通信が発生しますが、これをキャッシュを使って高速化します。DNSにキャッシュについては「ChromeのDNSキャッシュを削除する方法」をご覧ください。