修正したのに直ってない!それブラウザのキャッシュが原因かも?

こんにちは。デザイナー、コーダー、その他諸々を担当しているタマです。

ホームページを修正していて、ブラウザで確認しても修正が反映されていないこと、頻繁に起こりませんか?今回はGoogle Chromeでブラウザを再読み込みする方法についてお伝えしたいと思います。

その前にまずはキャッシュについておさらいしておきましょう。

キャッシュとは、一度サーバーから取り込んだことのあるサイトデータを一時保存する仕組みです。再度同じサイトを読み込んだ時に、キャッシュから表示することで読み込み速度を速くすることができます。

しかし、このキャッシュ、修正している私たちにとって大変めんどくさい障害となります。
修正してもキャッシュが修正前のデータを表示してしまうのです。

ここで登場するのがブラウザの再読み込みです。

再読み込みには3種類ある

リロード:通常の再読み込みを行う。
スーパーリロード:キャッシュを利用せずサーバーからデータの再読み込みを行う 。キャッシュは残る。
キャッシュ削除(クリア):キャッシュを削除してサーバーからデータの再読み込みを行う 。

ショートカット

Windowsの場合
リロード:Ctrl + R
スーパーリロード:Ctrl + Shift + R
キャッシュ削除(クリア)
・Ctrl + Shift + Delete
・キャッシュされた画像とファイルにチェックを入れて「データを削除」をクリック

Macの場合
リロード:Command + R
スーパーリロード:Command + Shift + R
キャッシュ削除(クリア)
・Command + Shift + Delete
・キャッシュされた画像とファイルにチェックを入れて「データを削除」をクリック

「キャッシュ削除の工程が多くてうっとうしい」って思った方、私もそう思います。
そこで、ちょっとだけ簡単な方法をひとつご紹介します。

デベロッパーツール を開く

コーダーにとって無くてはならない、デベロッパーツール(検証モード)を使っているとブラウザ右上のリロードボタンに新たな機能が追加されます。右クリックです。
この右クリックをリロードボタンの上で使用すると一番下に「キャッシュの削除とハード再読み込み」という項目が出てきます。これがキャッシュ削除です。

この機能をフルに活用して快適なコーダー&修正ライフ(?)を送りましょう。
てか、ショートカットキー下さい。