Django開発中にクロームでcssが反映されない場合の対処方法

Django開発中にクロームでcssが反映されない場合の対処方法についてご紹介します。

条件

  • Django 2.1.3
  • Python 3.7.0
  • Webブラウザでクロームを使用

クロームでcssを再読み込み

Djangoで開発中にcss(static/css/style.css)を編集したのにブラウザ(クローム)で確認すると反映されていないという経験はないでしょうか?

原因

ソースのcssを更新しただけではブラウザにキャッシュが残っているため直ぐには反映されません。

対応

クロームのデベロッパーツールを開いて、キャッシュ消去および再読み込みを行います。

手順

対象の画面をブラウザ(クローム)で開きます。
右上のGoogle Chromeの設定ボタンをクリックして、その他ツール > デベロッパーツールを選択します。

デベロッパーツールが開くので、その状態で更新ボタンを右クリック > キャッシュの消去とハード再読み込みを選択します。

以上でキャッシュ消去&再読み込みは完了です。
最新のcss状態に表示が更新されるのがわかると思います。

デベロッパーツール

クロームのデベロッパーツールはブラウザを開いた状態で、読み込まれているcssを編集してブラウザでの表示を動的に確認することが出来ます。
非常に便利なので、ぜひ利用してみてください!


Django

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です