【コーダー必見】ブラウザのキャッシュを残さずコーディングする方法

【コーダー必見】ブラウザのキャッシュを残さずコーディングする方法

コーディングをしている際、ブラウザにキャッシュが残っていてCSSまたはjsを変更しても反映されず、コーディングが思うようにいかない経験はありませんか?
特に普段、コーディングの際によく使うChromeに限っては、キャッシュが強く残る印象です。

コーディングで、CSSを書くたびに、設定画面から閲覧履歴データの削除をしていては非効率ですよね…
今回はそんな悩みを解決し、ブラウザのキャッシュを残さずコーディングする方法をご紹介します。

手順1:シークレットモードにする

Chromeのブラウザを例にご紹介します。

1.パソコンでChromeのブラウザを開きます。
2.キーボードショートカットを使ってシークレットウィンドウを開きます。
・Macの場合:⌘+shift+N キーを押します。
・Windowsの場合: Ctrl+Shift+N キーを押します。

キーを押すと別ウィンドウで下記のように黒い画面に「シークレットモードです」と表示されていたら成功です。

Chrome以外でもsafari、FireFoxも同じショートカットキーでシークレットモードにすることができます。

シークレットモードのウィンドウで作業をすると、

  • 閲覧履歴
  • Cookieとサイトデータ
  • フォームに入力した情報

が保存されないのでキャッシュが消えた状態で作業が始められます。

ただシークレットモードといっても、ウィンドウを開いている間はキャッシュが残ってしまいますので、
下記のツールをもう一つ開く必要があります。

手順2:Chromeのデベロッパーツールを開く

デベロッパーツールはWeb開発でよく使われている便利なツールです。
コーディングの際にエラー箇所を教えてくれたり、サイトスピードでネックになっている部分がわかったり、便利な機能が詰まっています。

デベロッパーツールの開き方は、Chromeのシークレットモードで実際にコーディングするページを開いた状態で、右クリックを押して【検証】をクリックします。

またはキーボードショートカットで、
・Macの場合:⌘+option+I キーを押します。
・Windowsの場合: F12 キーを押します。

そうすると下記の画面の右側のようなデベロッパーツールが開きます。

この状態で実際にコーディングをして、確認の際にリロード(ブラウザの再読み込み ⌘+R)すると、キャッシュがクリアされるのですぐにCSS、jsが反映されてとても便利です。

実際に自分が普段コーディングする際も、下記のような感じで左のモニターでデザインを見ながらコードを書き、右のモニターではブラウザ確認画面とデベロッパーツールを開いた状態で毎回作業しています。

まとめ

ブラウザのキャッシュが原因で、何度も何度もコードを修正したりするのは本当に非効率ですよね。
Chromeのシークレットモードとデベロッパーツールを有効活用し、一人でも多くの方が効率よくコードを書けたら幸いです。

この記事をシェアする