フリーランチ食べたい

機械学習/データ解析/フロントエンド/バックエンド/インフラ

Chrome/Firefox/SafariでResource(JS/CSSなど)をキャッシュからロードしないようにする方法

小ネタです。Safariがわかりにくかったので調べたんですが、ついでにChrome/Firefoxも。

Resourceのキャッシュとは

  • JSやCSS、画像などをブラウザはキャッシュしていて、サイトにアクセスした際、そちらから読めるときは優先的にロードするようになっています
  • 普段はとても便利な機能なのですが、開発時には不便なのでdisableにしたくなります。
  • キャッシュからロードされているかはDeveloperToolのNetworkタブから確認することが出来ます。

f:id:mergyi:20181218111347p:plain
Resourceがキャッシュからロードされている

環境

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14
BuildVersion:   18A391
Chrome: Version 71.0.3578.98
Firefox: 64.0 (64-bit)
Safari: Version 12.0 

Chrome

正直ChromeFirefoxはかなりわかりやすいです。Networkタブを開いて「Disable cache」にチェックを入れるだけです。

f:id:mergyi:20181218111554p:plain

Firefox

f:id:mergyi:20181218111747p:plain FirefoxのNetwork Tabってかわいいですね。前からこのデザインでしたっけ?

Safari

safariだけちょっと分かりづらいです。 f:id:mergyi:20181218111957p:plain

参考リンク

HTTP キャッシュ | MDN