Chromeのスーパーリロードで変更が反映されずに詰まったこと

2018年6月10日

Web開発でcssを差し替えた時などに、キャッシュが残っているため変更が反映されない、ということがよくある。そういう時には、強制的にキャッシュを再読込する、俗に言うスーパーリロードを行う。

が、なんだか色々とうまくいかなかった。色々なものを再起動させたりなんだりしたらうまくいった。自分自身わけがわからない、だが、とにかく変更を反映させるための軌跡をメモする。

リロードの理屈

まずリロードの理屈について。これについては「Chromeのキャッシュを「完全に」削除する方法、まとめ。 | WWWクリエイターズ」の記事が非常に詳しくて、まぁこれを読めばOKなのだが、軽く書いておく。

リロードとはページを再読込することだが、その際、キャッシュを利用するかしないか、という違いがある。もちろんキャッシュを利用するほうが色々と優しい。なので、静的コンテンツについてはローカルに保存したキャッシュを最大限利用する。

この場合の弊害として、中身が変わっていたとしても、キャッシュが反映されてコンテンツの変更が即座に反映されない、ということがある。たとえばcssでデザインを変えた時、などに起きる。これは普通に使っている分にはあまり問題ないけれど、開発者としてはすぐに反映されないと困るわけだ。

そんな時は、キャッシュを用いずにすべてコンテンツを再度読み込む、ハードリロード、俗にいうスーパーリロードを行う。これはブラウザによってやり方が異なるが、Chromeの場合は、Ctrl(MacならCmd) + Shift + Rを用いる。

これでだいたいOKなのだが、JavaScriptなどで動的に加えられた外部ファイルなどではまだダメで、これのキャッシュも使わない、とするには、デベロッパーツールを起動したうえで、ブラウザの更新アイコンを右クリックして、「キャッシュの消去とハード再読み込み」を行う。

リロード3択

これで、理屈としてはまず変更が反映されるはず。

しかし、実際には中々反映されないことがある。しかも、それが単なるHTMLファイルであったりすることもあるから、本当によくわからない。サーバサイドの問題も絡んでいるような気がする。

デベロッパーツールを起動したままだと、変更が反映されなかった、というよくわからない報告も聞く。

理屈としては、三種のリロードで十分そうなのだが……ううーん……。