AndroidのChromeでCSSの変更が反映されない時の対処法

ウェブサイトの更新作業の際、デザインの修正でCSSを変更することがよくあります。

チェックのためにプレビューをするんですが、キャッシュが残っていて変更が反映されない!
そんな時に行うのがスーパーリロード(強制再読み込み)。

スーパーリロードについてはこちらをどうぞ ↓

キャッシュが消えない!そんな時はショートカットキーでスーパーリロード

大抵の場合はこれでいけるんですが、スマートフォンではそもそもスーパーリロードする方法がありません。
特にAndroidのChromeでは、普通の再読み込みでは反映されないことが多くて困っていました。

デバイス別のチェックは拡張機能などを使えばある程度は可能ですが、やはり実機でも確認したいですよね。

ちなみに、Chromeの「ライトモード」をオフにすればいいよ!というのも見かけたんですが、私の環境では反映されませんでした…。

ライトモード

なので少し手間ですが、CSSを変更するたびに「キャッシュをクリア」してチェックしています。

AndroidのChromeの設定からクリア

ひとつは、AndroidのChromeからクリアする方法。
まずChromeを起動し、右上のメニューアイコンから「設定」をタップします。

設定

次に「詳細設定>プライバシー」をタップ。

プライバシー

そして「閲覧履歴データの削除」をタップします。

閲覧履歴データの削除

ここで削除したいデータにチェックを入れます。更新のチェックだけなら「キャッシュされた画像とファイル」のみでもOKです。
チェックを入れたら「データを削除」をタップ。

データを削除

するとしばらくロードアイコンがぐるぐるして、それが消えたらクリア完了です。
目的のページを再読み込みして、更新をチェックしましょう。

ところが私のスマートフォンの場合、この方法だとクリアに異様に時間がかかってしまうんです。なぜだろう…。
なのでそういう時は、もう一つの方法を試しています。

Androidのアプリの設定からクリア

もう一つは、アプリの設定からクリアする方法。
まずAndroidの「設定」を開き、「アプリ>Chrome」をタップします。

アプリ>Chrome

アプリ情報に移動するので、「ストレージ」をタップ。

ストレージ

すると「キャッシュを削除」というボタンがあるのでタップします。

キャッシュを削除

表示が「0B」になればクリア完了です。

あくまで私の場合ですが、こちらの方法ならすぐにキャッシュをクリアすることができました。
通常は1つ目の方法で大丈夫ではないかと思います。

 

スマートフォンでもスーパーリロードできればいいんですが今のところ無理っぽいので、どうしてもという場合はこの方法を試してみてくださいね。