しおすけぶろぐ

このブログは、管理人「しおすけ」の好きなものや、役に立ちそうなものを紹介するブログです。

DjangoでJavaScriptの変更が反映されない時の解決法

いつもはファイターズと、たまにB'zの記事しか書いていませんが、
一応なんちゃってエンジニアでもあるので、その辺りの記事も書いていこうと思っています。

f:id:longfield712:20210124231526p:plain

今回は、DjangoJavaScriptに関する記事になります。

開発環境

JavaScriptの変更が反映されない

ある日のこと、意気揚々とJavaScriptを更新して動作確認して、よしっ!

と思ったら、どうやら今さっきの変更が反映されていない事象に遭遇しました。

更新ミスかと思い、console.log("before")をconsole.log("after")へ変更しても、

デバッグツールに表示されるのは before のまま....

とりあえず、

  • 仮想環境をactivateし直す
  • settings.pyのstaticsのパスを確認する
  • ブラウザのリロード(F5)

を試してみましたが、デバッグツールに表示されるのはいつもbefore...

何がどうなっとるんじゃ。

 

"リロード"で解決

色々調べたのですが、どうやらchromeのリロードにはいくつかの種類があるようで。

forest.watch.impress.co.jp

私が最初に試したリロードは一般に良く知られているリロード(F5を押すだけ)のものでした。

これだとキャッシュがクリアされないため、ずっとbeforeが表示されてしまうという状態に。

上の記事でいう「ハード再読み込み」(Shift + F5)を行うことで after がデバッグツールに表示されるようになりました!

 

まとめ

今回の原因はブラウザ側にありました。
ブラウザ側なのでリロードすればよいかと思いきや、それだけでは足りず、キャッシュもクリアするリロードが必要でした。