こんにちは、かつコーチです。
前回、CSSが反映されない時は設定画面から「キャッシュされた画像とファイル」を消せばいいとお伝えしました。
ただ、毎回設定画面を開くのは正直面倒です。
実はもっと手軽にキャッシュをクリアする方法があります。
結論：まずこれをやればいい
Chrome左上の更新（再読み込み）ボタンを長押し、または右クリックしてみてください。
以下の3つの選択肢がポップアップで表示されます。
- 通常の再読み込み
- ハード再読み込み
- キャッシュの消去とハード再読み込み
CSSやJSの更新だけ確認したいなら「ハード再読み込み」、それでも直らない場合は「キャッシュの消去とハード再読み込み」を選べば、設定画面を開かずにその場で解決できます。
なぜそれで解決するのか（簡単な仕組みの補足）
ハード再読み込みとは、キャッシュを使わずにページのすべてのファイルをサーバーから再取得する読み込み方法です。
「通常の再読み込み」は一部キャッシュを使い回しますが、「ハード再読み込み」はそれを避けるため、CSSの更新を確認したい開発中の作業と相性がいいです。
「キャッシュの消去とハード再読み込み」は、さらに一歩進んで対象ページに関するキャッシュそのものを削除してから再取得します。
TIP01で紹介した設定画面からの削除と、やっていることの範囲はほぼ同じですが、対象がそのページに絞られる分、より手軽です。
あわせて知っておきたいこと（関連Tips・注意点）
この3択メニューには一つ注意点があります。
開発者ツール（DevTools）を開いた状態でないと表示されない場合があるのです。
筆者の環境（Chrome最新版・Mac）でも、DevToolsを閉じた状態で更新ボタンを長押しすると「ハード再読み込み」の選択肢が出ないことがありました。
選択肢が出ない場合は、まずF12またはCommand+Option+I（Macの場合）でDevToolsを開いてから、もう一度更新ボタンを長押ししてみてください。
DevToolsの開き方は次の記事で詳しく解説しています。
まとめ
- 更新ボタンの長押し・右クリックで3つの再読み込みオプションが選べる
- CSS確認は「ハード再読み込み」、それでも直らなければ「キャッシュの消去とハード再読み込み」
- 選択肢が出ない場合はDevToolsを開いてから試す
次は、Chrome DevToolsの開き方とタブ構成の全体像で開発者ツールの基本を確認しましょう。
タグ: Chrome / 初心者向け / 実践Tips
コメント