Google Chromeで開発中のキャッシュを素早く消す方法

履歴から順を追って消す手順もありますが

私がWeb制作をする際使用してしているのがGoogle Chromeなのですが、リロードを重ねるにつれ閲覧履歴やキャッシュがたまり画面が更新されない状況がでてきます。

その都度、cmd+Yボタンで履歴を表示し設定から『閲覧履歴データの削除』からデータを削除するのも一つの手段ではあります。

ですが、デベロッパーツールを開いていればその手間を省いてキャッシュを削除することができます。

デベロッパーツールを開いた状態で更新ボタンを右クリック

デベロッパーツールを開いている状態の画面の一部

上の画像のようにデベロッパーツールが開いている状態で更新ボタンをクリックすると・もしくは長押しすると、下記の3つのリロードの種類が選べます。

3つの違い

  1. 通常の再読み込み
    更新ボタンをクリックしたりcmd+Rでの更新の方法と同じです。この方法だと画像やテキスト、CSSのスタイルなどが古いままになってしまうことがあります。
  2. ハード再読み込み
    画像ファイルやCSSファイルなどのキャッシュを消去してリロードする。キャッシュとは、過去に表示したWebページの情報を一時的に保存しておく仕組みで、表示を高速化するための仕組みです。
  3. キャッシュの消去とハードの再読み込み
    ハードの再読み込みに追加して、webページ内で動作されているjavascriptから呼び出されている画像ファイルなどのキャッシュを更新可能です。

私的な結論

html、cssなどをアップロードしても表示が変わらない場合など、『キャッシュの消去とハードの再読み込み』を選べば最新の情報に更新されるかと…。

ともあれ、いちいちcmd+Yから新たなタブを増やしてキャッシュや履歴を消去するより、開発をスムーズにできるかと思います。