【Chrome】Webページの強制リロード方法

記事タイトルとURLをコピーする

Chromeブラウザにおける強制リロードの方法です。

キャッシュとは

多くのWebページは画像やスクリプト、CSSなど複数の要素で構成されています。
そして要素は毎回すべて変更されているわけでもありません。
そこで、Webブラウザは要素(ファイル)を、メモリやディスクにコピーを保存し、変更が無いと判断した場合はサーバーから読み込まず、メモリやディスクから読み込むことで、ネットワーク通信を省略し、表示速度も改善する仕組みになっています。
これを「キャッシュ」と呼びます。

問題点

キャッシュ機能によってスムーズにWebページを表示できているのですが、「要素に変更が無い」という判断が間違っていることもあります。
古い状態とは知らずにWebブラウザがPC内から要素を表示した場合、不整合が発生し、画面が崩れたり、想定の動作をしないことがあります。
こういう場合、「キャッシュ」を使わずに、すべての要素をWebサーバーから取得すると解消することがあります。

Chromeブラウザにおける手順

「キャッシュの消去とハード再読み込み」 機能を使った手順を紹介します。

条件

  • Windows 11 pro
  • Chrome バージョン: 102.0.5005.115(Official Build) (64 ビット)

デベロッパーツールを表示

対象Webページを表示し、設定アイコン→その他ツール→デベロッパーツール を選択します。

キャッシュの消去とハード再読み込みを実施

リロードアイコンを右クリック(または左クリック長押し)し、「キャッシュの消去とハード再読み込み」を選択します。
これですべて再読み込みされます。

参考

デベロッパーツールのタブを「ネットワーク」にしておくと、各要素がキャッシュが使用されたのか、Webサーバーから読み込みしたのか判断できます。

多くの要素をキャッシュから表示した場合

Webサーバーから読み込んで表示した場合