ブラウザの強制更新: CSS と JavaScript のキャッシュの無効化

Web サイトを開発しているとき、即時の更新を妨げるブラウザのキャッシュの問題に遭遇してイライラします。ディスプレイに反映されます。これは混乱を招き、時間の無駄につながる可能性があります。幸いなことに、ブラウザを強制的に更新して、変更されたコードがすぐに適用されるようにする方法があります。

一般的な解決策

最も効果的な解決策は、ブラウザを強制的に更新することです。 Mac では Ctrl Shift R または Cmd Shift R。これにより、キャッシュされたコンテンツがバイパスされ、サーバーから新しいデータが取得されます。

PHP

PHP ベースの Web サイトの場合、PHP スクリプトを変更してキャッシュを無効にすることができます。これを行うには、有効期限ヘッダーを過去の日付に設定し、コンテンツを有効期限切れとしてマークします:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrome

Google Chrome では、開発者ツールにキャッシュを無効にするオプションが用意されています。アクセスするには、F12 を押して歯車アイコンをクリックし、設定ダイアログで [キャッシュを無効にする] を選択します。

Firefox

Firefox の場合、URL バーに about:config と入力し、network.http.use-cache というタイトルの設定を見つけます。ブラウザのキャッシュを無効にするには、この値を false に設定します。