Chromeでブラウザキャッシュを簡単に削除する方法

2019年3月11日

特にフロントエンドエンジニアの方は、ブラウザのキャッシュが残っていて修正内容が反映されず、ストレスが溜まる思いを経験された方は多いと思います。

いつ導入されたのか不明ですが、Chromeでブラウザキャッシュを簡単に削除する方法があったので、紹介したいと思います。

憎きブラウザキャッシュについて

Web開発、特にフロントエンドエンジニアあるあるですが、ブラウザキャッシュがしつこく残り、なかなか修正が反映されない!とイライラすることってありますよね。

誰しも1回は経験していると思います。

修正箇所の文法が誤っていないか? FTPツールの認証に引っ掛かっていないか? 別の詳細度の高いCSS定義で上書きされていないか? そもそも修正ファイルが合っているのか? などなど・・

一通り調べた後に、原因はただブラウザキャッシュが残っていたってオチだったり。

ブラウザの設定からキャッシュ削除したらクッキー情報も削除してしまい、再度ログイン認証しないといけない・・などといったこともあると思います。

ブラウザキャッシュ対策としてCSSやJS読み込みにクエリパラメータでバージョンを付けたりもしていましたが、いちいち更新するのは面倒・・(エンドユーザ向けであれば必要ですが)

/*v=Xを更新*/
<link href="./css/style.css?v=1" rel="stylesheet">

Chromeブラウザには簡単に削除できる機能があった

その他のブラウザにもあると思いますが、私は開発中は基本的にChromeを利用するので特に調べてはいません。

削除方法は非常に簡単で、以下の通りです。

  1. F12キーを押してDeveloper Toolsを起動する。(右クリック→検証でも構いません)
  2. ブラウザ左上にある更新ボタンを、左クリックで長押しする(F5ボタン長押しでは出来ません)
  3. 長押しすると隠しメニューが表示され、一番下の”キャッシュの消去とハード再読み込み”をクリックする

たったこれだけで、あの忌々しいブラウザキャッシュを消去することが出来ます。

さいごに

この手順を知ってからはブラウザキャッシュでハマることが一切無くなりました!

あとはショートカットキーに対応してくれれば何も言うことなしです。

Googleさんお願いしますm(_ _)m