困りごと
CSSや画像の修正を行い、ローカルで起動してサイトを開いたところ永遠に変更が反映されない。
開発者ツールでソースを確認しても、明らかに修正が反映されていない。
対処方法①:シークレットウィンドウでページを開きなおす
シークレットモードとは閲覧履歴やcookieなどのデータが保存されないブラウザモードの一種です。
呼び方はブラウザにより異なりますが、どのブラウザでもシークレットモードが存在します。
Chromeの場合は以下の手順で開くことが可能です。
Windows：Google Chromeを起動している状態で「Ctrlキー + Shiftキー + nキー」を同時押し
Mac：Google Chromeを起動している状態で「⌘キー+ Shiftキー+ nキー」を同時押し
黒い画面が表示されたら、URLを入力して検証したいサイトを表示してください。
感覚的に70%ぐらいの確率で正しく反映されます、
が、正しく反映されないことがちらほら発生します…。
シークレットモードはキャッシュが残らないモードではあるものの、
正確には「シークレットウィンドウを閉じた場合に残らない」という状態を指しています。
そのため何回かシークレットモードで検証していると、やはりキャッシュが残って修正が反映されないという事態に陥ります。
対処方法②:(Chromeの場合)更新ボタンを右クリックしてみる
左上の更新ボタンを右クリックすると、以下の3つのメニューが表示されます。
- 通常の再読み込み (Ctrl + R)
- ハード再読み込み (Ctrl + Shift + R)
- キャッシュの消去とハード再読み込み
下に行くほど強いリロードになります。
確実にキャッシュが消えるのはキャッシュの消去とハード再読み込みです。
「ハード再読み込みの読み込み」でもWebページから直参照しているCSSや画像のキャッシュを破棄してリロードをしてくれるため、ある程度は正しく変更が反映されますが、
間接的に読み込まれるファイルについてはキャッシュが残り続けてしまうため、
やはり「キャッシュの消去とハード再読み込み」を実行するのが良さそうです。
さいごに
キャッシュの対処法として、
- ブラウザの設定からキャッシュをクリアする
- URLにパラメータを付与する
など、他にも方法がいくつかありますが、手間も時間もかかるため、
対処法①を試して、駄目だったら対処法②を試してみるというのが個人的には手っ取り早くておすすめです。