ウェブ制作に便利な各ブラウザの開発ツール「キャッシュ無効化」機能

コードを書いて、ブラウザでチェックして…
画像を書き出して、ブラウザでチェックして…という作業をしていて、ブラウザのキャッシュが残っていて困ったことってありませんか?

そんな時に便利なのが開発ツールのキャッシュ無効化機能です。Firefox、Chrome、Safari、Microsoft Edgeのそれぞれの開発ツールに搭載されている機能です。ちょっとしたことなんですけど、知っているのとそうでないのとでは作業効率がだいぶ変わってくるんですよね。

以下、各ブラウザの開発ツールで設定を変える方法です。

Firefoxの開発ツールのキャッシュ無効化

Firefoxの開発ツールで「ネットワーク」タブを開くと「キャッシュを無効化」というオプションがあります。ここにチェックを入れるとツールボックスが開いている時はキャッシュが無効化されます。

Firefoxの開発ツールのネットワークタブが表示された画面。オレンジの矢印で「キャッシュ無効化」のオプションが指し示されている

開発ツールの設定からオプションを変更する

開発ツールの設定画面からも同様に設定を変更できます。

Firefoxの開発ツールの設定を開くためのメニューが表示された画面。オレンジの矢印でメニュー部分が指し示されている

設定画面の「詳細設定」の下にある「HTTPキャッシュを無効化(ツールボックスが開いているとき)」オプションから設定を変更できます。

Firefoxの開発ツールの設定画面。オレンジの矢印でオプションの表示場所が指し示されている

Chromeの開発ツールのキャッシュ無効化

開発ツールを開いて「Network」タブを選択すると「Disable cache」というオプションがあります。このオプションにチェックを入れると開発ツールを開いている間はキャッシュが無効化されます。

Chromeの開発ツールでNetworkタブを開いた状態の画面。オレンジの矢印でオプションの表示場所が指し示されている

開発ツールの設定からオプションを変更する

ChromeでもFirefoxと同様に開発ツールの設定画面からもオプションを変更できます。

Chromeの開発ツールの設定画面を開くためのメニューが開いている状態の画面。オレンジの矢印で設定メニューが指し示されている

設定画面の「Network」の下にオプションを変更するチェックボックスがあります。

Chromeの開発ツールの設定画面。オレンジの矢印で当該のオプションが指し示されている

Safariの場合

Safariの開発ツールでネットワークタブを開くと、下の画面キャプチャのように左の方にアイコンがあって、そのアイコンをクリックすると「リソースの読み込み時にリソースキャッシュを無視」ができます。

Safariの開発ツールのネットワークタブを開いた画面。キャッシュを無効化するオプションがオレンジの矢印で指し示されている

Microsoft Edgeの場合

Microsoft Edgeでは開発ツールの「ネットワーク」タブに「常にサーバーから更新する」というオプションがあります。

Microsoft Edgeの開発ツールでネットワークタブを開いた状態の画面。オレンジの矢印でオプションが指し示されている

各ブラウザのバージョン

ここに記載した情報は以下のブラウザのバージョンの時点のものです。開発ツールは機能の名称や場所が頻繁に変わる場合もあるるので要注意です。

  • Mac / Win Firefox 69.0.2
  • Mac / Win Chrome 77.0.3865.90
  • Safari 13.0.1
  • MS Edge 44.18362.329.0

さいごにひとこと

以上、各ブラウザの開発ツールでキャッシュを無効化する方法のまとめでした!ただでさえやることが多いウェブ制作なので、ちょっとしたところでミスをしないように、便利なツールは使いこなしていきたいですね。開発ツールには様々な便利機能があるので、僕も使いこなせるように一つ一つ学んで行こうと思っています。

では、Have fun building websites!!

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です