Rotate your phone

YOSHISUGA My Portfolio

Blog

WEB制作に便利なChromeの開発者ツールの「キャッシュ無効果機能、「スーパーリロード」の使い方

google chromeを使用してweb制作をしている方は次のような経験があるのではないでしょうか?

cssや画像を変更して、何回もリロードしたのにデザインが変わらない!

ご存知かと思いますが、原因はサイトのキャッシュの情報がブラウザに保存されてしまっていることにあります。そんな時に便利なのが開発ツールに搭載されているキャッシュ無効化機能スーパーリロードです。

開発ツールのキャッシュ無効化

まず開発ツールを開きます。macでは画面のとこかを右クリックして検証をクリック、ショートカットはcommand + option + i もしくは shift + command + c です。windowsではF12もしくはctrl + shift + l です。

開発ツールを開いて「Network」タブを選択して「Disable cache」にチェックを入れると開発ツールを開いている間はキャッシュが無効化されます。

開発ツールのキャッシュの削除とスーパーリロード

chromeの再読み込みには3種類の強さがあります。“通常の再読み込み”・“ハード再読み込み”・“キャッシュの消去とハード再読み込み”で、順に強さが異なります。通常の再読み込みではキャッシュが残っていて画像やCSSが更新されないことがあります。

“ハード再読み込み”はスーパーリロードとも呼ばれています。表示しているWebページから直接参照している画像ファイルやCSSファイルなどのキャッシュを破棄してリロードします。 しかしそれでも更新したCSSや画像が表示されない時もあります。そんな時に上の画像の”キャッシュの消去とハード再読み込み”を行うと、“ハード再読み込み”に加えてキャッシュも破棄してリロードします。これでページのキャッシュが削除され、最新データが読み込まれます。CSSや画像、コードの変更も反映されるはずです。

まとめ

Web制作、Webアプリケーション開発など、制作や開発の段階ではよくWebブラウザでの表示や動作確認を頻繁に行うと思います。キャッシュ機能は、ユーザーエクスペリエンスの観点などで必要な機能ですが、開発者にとってはちょっと邪魔になることもあります。うまくデベロッパーツールを設定すればキャッシュをコントロールし、スムーズな制作・開発を行えるのではないでしょうか。開発ツールには他にもjavascriptのデバッグができたり、様々な便利な機能があるので、私も使いこなせるように学んでいきたいと思います。

Blog一覧へ戻る