Web制作・開発時に使える、各Webブラウザのキャッシュを無効化する方法

Web制作やWebアプリケーション開発の現場では、Google Chrome、Firefox、Safari、Microsoft Edgeといった多くのWebブラウザで表示や動作を確認することでしょう。

表示や動作の確認を行っていく中で、キャッシュの影響によって正確に確認できないことがあります。
各Webブラウザのキャッシュを残さないシークレートモード、プライベートウィンドウなどを毎回落として立ち上げて確認するなんてことは、結構手間がかかるものです。

キャッシュをクリアする、または無効にする方法はいくつかありますが、ここではWebブラウザの設定で手軽にできる方法をご紹介します。

キャッシュの無効化の設定は、各Webブラウザに搭載されているデベロッパーツールを利用していきます。
一応、デベロッパーツールの利用方法ですが、Google Chromeで説明しますとブラウザのオプションから、「その他のツール」と進むと「デベロッパーツール」がありますので、こちらを選択してデベロッパーツールを立ち上げます。
各ブラウザとも同じように設定から起動できます。

ショートカットキーは、

Windows：「F12」
Mac：「command + option + i」

になります。

それではスムーズに制作や開発を行えるよう、設定方法を見ていきましょう。

Google Chrome

まずは、多くのシェアを誇るGoogle Chromeから。
デベロッパーツールを立ち上げて、「Network」のタブから「Disable cache」にチェックを入れてキャッシュを無効にできます。

デベロッパーツールを開いている時のみ、キャッシュが無効になります。

Firefox

Firefoxでは、デベロッパーツールのオプションから設定を行います。
ツールの上部メニュー右側にあります、オプションアイコンから「設定」を選択します。

設定画面で、詳細設定の項目から「HTTPキャッシュを無効化（ツールボックスを開いたとき）」にチェックを入れます。

こちらもChrom同様、ツールボックスを開いているときに無効化となります。

設定画面からの設定変更では、HTTPプロトコルのやり取りでのキャッシュの設定となるので、ローカルで開発しているのであれば以下の方法で手軽に行えます。
「ネットワーク」のタブから「キャッシュを無効化」にチェックを入れます。

2パターンあるのでややこしいですが、両方チェックを入れて設定しておけばどちらにしても開発時にキャッシュの影響は受けないでしょう。

Safari

続いて、AppleユーザーにおなじみのSafariです。
Safariもデベロッパーツールの「ネットワーク」のタブから設定となります。
ツールの右側に「リソースの読み込み時にリソースキャッシュを無視」というアイコンがあります。
こちらを選択してアイコンが青になればキャッシュの無効化が有効な状態です。