DjangoでJavaScriptの変更が反映されない時の解決法
いつもはファイターズと、たまにB'zの記事しか書いていませんが、
一応なんちゃってエンジニアでもあるので、その辺りの記事も書いていこうと思っています。
今回は、DjangoとJavaScriptに関する記事になります。
開発環境
- Windows10
- VSCode
- Django (ver3.1)
- Google Chrome
JavaScriptの変更が反映されない
ある日のこと、意気揚々とJavaScriptを更新して動作確認して、よしっ!
と思ったら、どうやら今さっきの変更が反映されていない事象に遭遇しました。
更新ミスかと思い、console.log("before")をconsole.log("after")へ変更しても、
デバッグツールに表示されるのは before のまま....
とりあえず、
- 仮想環境をactivateし直す
- settings.pyのstaticsのパスを確認する
- ブラウザのリロード(F5)
を試してみましたが、デバッグツールに表示されるのはいつもbefore...
何がどうなっとるんじゃ。
"リロード"で解決
色々調べたのですが、どうやらchromeのリロードにはいくつかの種類があるようで。
私が最初に試したリロードは一般に良く知られているリロード(F5を押すだけ)のものでした。
これだとキャッシュがクリアされないため、ずっとbeforeが表示されてしまうという状態に。
上の記事でいう「ハード再読み込み」(Shift + F5)を行うことで after がデバッグツールに表示されるようになりました!
まとめ
今回の原因はブラウザ側にありました。
ブラウザ側なのでリロードすればよいかと思いきや、それだけでは足りず、キャッシュもクリアするリロードが必要でした。