GoogleChromeのキャッシュの消し方

Web制作

 

Webサイトを制作しているとき、キャッシュが原因でCSSや画像の変更が反映されないことがよくあります。

 

今回はブラウザでもシェアが高いChromeで、キャッシュを消す方法をご紹介していきます。

 

以下、記事に入ります。

 

設定:履歴

まずは一番オーソドックスな、Chromeの設定からキャッシュを消す方法を紹介します。

 

Chromeを開くと右上にある設定ボタンをクリックします。

すると、項目に「履歴」があるのでそちらをクリック。

 

履歴が開かれるので、左側にある「閲覧履歴データを削除する」をクリック。

 

キャッシュされた画像とファイル」にチェックを入れて、データを削除するとキャッシュが全て削除されます。(他の部分はチェックを入れなくてもOK)

 

ちなみにこちらのページは、以下のショートカットでも呼び出すことが可能です

Mac:Command + Shift + Delete

Win:Ctrl + Shift + Delete

 

拡張機能:Clear Cache

Clear CacheはChromeの拡張機能で、1クリックでキャッシュを消すことが可能です。

以下のリンクから、「Clear Cache」という拡張機能をダウンロードします。

https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja

 

ダウンロードしたら、右上にClear Cacheのアイコンが出てきます。

 

使い方は簡単で、キャッシュを消したいときにClear Cacheのアイコンをクリックするだけ

設定から消すのに比べてかなり手間が省けます。

 

Chrome検証機能:Disable cache

Chromeの検証機能で、キャッシュ機能を無効にすることが可能です。

 

まずはページを右クリックし、検証ツールを開きます。

 

検証ツールを広げるか上部の>>をクリックすると、タブに「Network」という項目が現れるのでそちらをクリック。

Networkタブの中に「Disable cache」項目があるので、チェックを入れます。

 

これでキャッシュ機能が無効になり、Chromeは今後キャッシュを残さなくなります

 

1度設定してしまえば終わりなので、方法としては1番手軽です。

ただし、こちら設定をしぱなっしだと普段のWebサイト閲覧でもキャッシュを残さなくなるので、それが嫌な方は「Clear Cache」の方を使用するのをおすすめします。

 

ショートカット:スーパーリロード

スーパーリロードとは、キャッシュを使わずに再読み込みするショートカットコマンドです。

キャッシュを読み込んでないので、常に最新版のページが読み込まれて表示されます。

 

ちなみに、実際にキャッシュを削除しているわけではないのでご注意ください。

 

Chromeでのショートカットキーは以下のようになります。

Mac:Command + Shift + R

Win:Ctrl + F5

まとめ

キャッシュ昨日は普段のサイト閲覧だと便利なのですが、開発の際には邪魔になることが多々あります。

 

Webサイト制作でも、キャッシュが残っているせいでCSSや画像が表示されないことは日常茶飯事です。

Chromeをメインに使って開発を行う方は、キャッシュの消し方を頭に入れておきましょう。