ウェブサイト開発のためのChromeキャッシュの無効化

サイトの外観を変更していますが（CSSの変更）、永続的なキャッシュが煩わしいため、Chromeで結果を表示できません。Shift+ refresh を試しましたが、機能しません。

キャッシュを一時的に無効にしたり、変更を確認できるようにページを更新したりするにはどうすればよいですか？

Chrome DevToolsはキャッシュを無効にすることができます。

1. 右クリックして選択Inspect Elementし、DevToolsを開きます。または、次のキーボードショートカットのいずれかを使用します。
   • F12
   • Command+ Option+ iMac
   • Control+ Shift+ iWindowsまたはLinux
2. Networkツールバーのをクリックして、ネットワークペインを開きます。
3. Disable cache上部のチェックボックスをオンにします。

覚えておいてくださいつぶやきから@ChromiumDevが述べたように、この設定があるデベロッパーツールが開いている間のみ有効。

これにより、すべてのリソースがリロードされることに注意してください。一部のリソースについてのみキャッシュを無効にする場合は、サーバーがファイルと一緒に送信するHTTPヘッダーを変更できます。

あなたが使用しない場合はDisable cache、チェックボックス、リフレッシュボタンを長押しデベロッパーツールのオープンとをするオプションのメニューが表示されますHard Reloadか、Empty Cache and Hard Reload同様の効果を持つべきです。オプションの違いについて読んでください。次のショートカットを使用できます。

• Command+ Option+ RMac
• Control+ Shift+ RWindowsまたはLinux

1時間に30回キャッシュをクリアする必要がある場合、キャッシュをクリアするのは面倒です。そこで、ページをロードするたびにキャッシュをクリアするClassic Cache Killerと呼ばれるChrome拡張機能をインストールしました。

Chrome Store Link（無料） （今はマルウェアなし！）

私のモックjson、javascript、css、html、およびデータは、ページが読み込まれるたびに更新されます。

私は決して私が私のキャッシュをクリアする必要がある場合は心配する必要はありません。

私が見つけたChrome用のキャッシュクリーナーは約20ありますが、これは軽量で労力ゼロのようです。アップデートで、Cache Killerは「常にオン」のままにできるようになりました。

注：私はプラグインの作者を知りません。私はそれが便利だと思いました。

1. を押してChrome開発者コンソールを引き上げ、F12次に（コンソールを開いた状態で）：

2. ブラウザの上部にある再読み込みボタンを右クリック（または左クリックを押したまま）して、[キャッシュとハードリロードを空にする]を選択します。

これは、「ハードリロード」を超えてキャッシュを完全に空にし、JavaScriptなどを介してダウンロードされたものもキャッシュの使用を回避することを保証します。設定などをいじる必要はありません。簡単なワンショットソリューションです。

Chromeのページキャッシュを無効にするオプションが2つあります。

1.レジストリでChromeキャッシュを無効にする

レジストリを開く（スタート->コマンド-> Regedit）

検索する： HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

... chrom.exeの後の部分をこの値に変更します。 –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

例： "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

重要：

• ... chrome.exeの後にスペースとハイフンがあります "

• パスをそのままchrome.exeに残します

• 行をコピーする場合は、引用符が実際の引用符かどうかを確認してください。

2.ショートカットのプロパティを変更してChromeキャッシュを無効にします

Chromeアイコンを右クリックして、コンテキストメニューの[プロパティ]を選択します。パスに次の値を追加します。 –disk-cache-size=1

例： "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1

重要：

• ... chrome.exeの後にスペースとハイフンがあります "

• パスをそのままchrome.exeに残します

Chromeの設定を編集したくない場合は、シークレットモードを使用して同じ結果を得ることができます。

キャッシュを無効にするオプション（開発者ツールウィンドウの右下隅にあるボタン-ツール|開発者ツール、またはCtrl+ Shift+ I）に加えて、開発者ツールのネットワークペインで右クリックできるようになりましたポップアップメニューから[キャッシュのクリア]を選択します。

1. F12 Chrome DevToolsを開く
2. F1 DevTools設定を開く
3. 以下に示すように、キャッシュを無効にする（DevToolsが開いている間）をチェックします。

これは現在、デフォルトの[ 設定 ]タブにあります。下にスクロールする必要があるかもしれません。このチェックボックスは、この質問が出されてから少なくとも数回は移動されています。最後に確認したところ、一番下の真ん中の列でした。薄い画面で開いていて、[設定]に2つの列がある場合は、右上近くにある可能性があります。この投稿が変更またはコメントされた場合は、遠慮なく更新してください。投稿を更新します。

「F5」を押すのではなく、次のキーを押すだけです。

「Ctrl + F5」

カナリーチャネル（およびおそらく開発チャネルと安定チャネルが続く）では、これは左側の[全般]セクションの下にある2番目のオプションとして表示されます。

それに加えて、Ctrl + Shift + Nを使用してシークレットモードに切り替えるオプションが常にあります。ただし、残念ながらセッションも終了します。

更新にCtrl+ Shift+ Rを使用するのは良かったが、必要なものがすべて得られなかった。それでも、jsやcssに保存されているデータなど、更新されないものがあります。解決策を見つけました：Chromeウェブ開発者のためのグーグルのツールバー。ツールバーをインストールしたら、オプションと「ページのリセット」を選択します。

明確にするために、Chromeのキャッシュを無効にするチェックボックス（ここではv17ですが、v15以降だと思います）はメイン設定UIにありません。デベロッパーツールの設定UIにあります。

1. ブラウザウィンドウのレンチアイコンメニュー（設定メニュー）から[ツール]→[開発者ツール]を選択します。

2. 表示されるデベロッパーツールのUIで、右下の歯車アイコンをクリックします。

3. [ネットワーク]セクションの[キャッシュを無効にする]チェックボックスをオンにします。

Chromeのキャッシュを無効にすることは、開発ツールを開いている場合にのみ機能します

バグが修正されるまでは、Clear Cache Chromeプラグインを使用することができ、キーボードショートカットを設定することもできます。

インストールしたら、右クリックしてオプションに移動します。

チェックAutomatically reload active tab after clearing data：

Everything期間を選択：

次に、メニュー=>ツール=>拡張機能に移動します。

下部にあるキーボードショートカットをクリックします。

キーボードショートカットを設定します。例：Ctrl+ Shift+ R：

実際、帯域幅を使用することを気にしない場合は、キャッシュを無効にする方が多くの理由でより安全であり、多くのセキュリティサイトから推奨されます。

Chromiumは、決定を下し、ユーザーに設定を適用するほど傲慢であってはなりません。

--disk-cache-dir = / dev / nullを使用して、UNIXでキャッシュを無効にすることができます。

これは予期しないクラッシュが発生する可能性があるためですが、発生した場合は、いずれにせよ修正する必要のあるより深刻なバグを明確に指し示します。

これは誰かを助けるかもしれません。

クレイジーキャッシング用にNginxを装備しました。したがって、ネットワークツールでキャッシュを無効にして、明示的にキャッシュをクリアすることはできません。

非常にシンプルでありながら退屈な回避策は、新しいシークレットタブを開くことです。驚くべきことに、それは常に機能します！

シークレットモードでのハードリフレッシュは、同じモードでリロードしたいときにいつでもうまくいきます。

ページがキャッシュされないようにページ名を変更するブックマークレットはどうでしょうか。Chromeでは、新しいブックマークを作成してから、コードをURLに貼り付けます。ブックマークをクリックすると、ページがタイムスタンプとともにリロードされ、キャッシュが阻止されます。

javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();

引っ掛かっただけですが、必ずしもChromeのせいではありません。

私はjQueryを使用してAJAXリクエストを作成しています。リクエストでcache属性をtrueに設定しました：

   $.ajax({
        type: 'GET',
        cache: true,
        ....

これをfalseに設定すると問題が解決しましたが、これは理想的ではありません。

このデータがどこに保存されるのかはわかりませんが、Chromeがリクエストのためにサーバーにヒットすることはありません。

より良い、より速い方法があります（Chromeバージョン59.xx）：

reload-icon（url-fieldの左側）を右クリックすると、ドロップダウンメニューが表示され、3番目のオプションである「空のキャッシュとハードリロード」を選択します。

このオプションは、開発者ツールが開いている場合にのみ使用できます。（オプション2との違いに注意してください： 'ハードリロード' -cmd-shift-R）。ここでキャッシュが空になることはありません！

Clear Cacheという名前のChromeウェブストアで利用可能なChrome拡張機能があります。

私はそれを毎日使用していて、それは私が考える非常に便利なツールです。再読み込みボタンとして使用でき、キャッシュをクリアできます。必要に応じて、Cookie、ロケールストレージ、フォームデータなども使用できます。また、これが発生するドメインを定義することもできます。だから、とにかく押す必要があるリロードボタンだけで、このたわごとをすべてクリアすることができます-選択したドメインで。

とってもとっても素敵！

オプションでこのためのキーボードショートカットを定義することもできます！

また、Chromeウィンドウをシークレットモードで起動する方法もあります。ここで、キャッシュも完全に無効にする必要があります。

キャッシュを無効にするためのもう1つのオプションは、Devtoolsとまったく同じ方法でキャッシュを無効にする、私の3番目のChrome拡張機能であるページサイズインスペクターによって提供されます。

さらに、拡張機能は、便利な方法でWebページのページサイズ、キャッシュ使用量、ネットワークリクエスト、ロード時間をすばやく報告します。さらに、Githubでのオープンソース。

何を使用しているかはわかりませんが、ASP.Netを使用している場合は、次のことができます。

<link href="@Url.Content("~/Content/Site.css")?time=@DateTime.Now" rel="stylesheet" />

基本的に、実行されるたびに日付と時刻がファイルの最後に自動的に追加されます。つまり、ファイル名は技術的に異なるため、再度キャッシュされることを心配する必要はありません。

私は同じ問題を抱えていました、私は試しました：

• コントロールシフトR、
• F12でキャッシュを無効にする
• コントロールF5。

その後、https以外のサイトで.appcacheマニフェストを使用することは非推奨であることがわかりました。私のsite.appcacheファイルとその参照をhtmlタグから削除すると、各ページの最新バージョンが表示されます。

あなたが使用している場合ServiceWorkersを（例えば：プログレッシブのWebアプリケーションのために）、あなたはおそらく、あまりにものdevのツールでアプリケーション>サービス労働者の下で、「リロードの更新」をチェックする必要があります。

バージョン50以降（私が正しく覚えている場合）、「キャッシュを無効にする」オプションがDevtool設定から削除されました。[ネットワーク]タブに移動すると、[キャッシュを無効にする]オプションがあります。

サイトでPHPを使用している場合は、HTMLページの先頭に次の小さなPHPスニペットを配置してください。

   //dev versioning - stop caching
   $rand = rand(1, 99999999);

スクリプトまたはリンク要素にCSSファイルやJSファイルなどのリソースをロードするすべての場所で、生成されたランダムな値を「？」を付加した後にリクエストURLに付加します。PHP経由でURIに：

    echo $rand;

それでおしまい！どの種類に関係なく、サイトをキャッシュするブラウザーはもうありません。

もちろん、公開する前にコードを削除するか、単純に$ randを空の文字列に設定して、再度キャッシュできるようにします。

上記の他のオプションを使用しましたが、次のパラメータをchrome.exeの起動に追加するのが最善であることがわかりました。

「C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe」--disk-cache-size = 1 -media-cache = 1

メディアキャッシュを無効にしないことをお勧めしますが、これは完全を期すためにここにあります。

実際には、キャッシュを完全に無効にして、ディスクの代わりにメモリをIOに使用するオプションが必要です（これにより、読み込み時間が10倍速くなります！）。 。

キャッシュを一時的に無効にしたり、変更を確認できるようにページを更新したりするにはどうすればよいですか？

どの「キャッシュ」を参照しているかは不明です。ブラウザがコンテンツを永続的にキャッシュできる方法はいくつかあります。Web Storageはその1つであり、Cache-Control別の1つです。

一部のブラウザーには、Service WorkersCacheと組み合わせて使用​​して、オフラインサポートを提供するプログレッシブWebアプリ（PWA）を作成するもあります。

PWAのキャッシュをクリアするには

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

キャッシュキーの名前を一覧表示するには、次のコマンドを実行します。

self.caches.delete('my-site-cache')

名前（つまりmy-site-cache）でキャッシュキーを削除します。次に、ページを更新します。

更新後にコンソールにワーカー関連のエラーが表示された場合は、登録されたワーカーの登録を解除する必要がある場合もあります。

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

Chromeのキャッシュキラーは、最善の選択肢です。キャッシュキラーをインストールするためのストアURLがダウンしているので、ここでCRXファイルをダウンロードできます。

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

拡張機能ファイルをダウンロードしたら、Chrome->その他のツール->拡張機能を開き、ファイルエクスプローラーまたはデスクトップ（ファイルのダウンロード場所によって異なります）からCRXファイルをChromeウィンドウにドラッグして拡張機能をインストールします。

私は（Windowsで）Ctrl + Shift + Deleteを使用し、Chromeダイアログが表示されたらEnterキーを押します。これは、このシーケンスを実行するたびにクリアする必要があるもので構成できます。開発者がいる必要はありません。この場合、ツールが開きます。

無効になっているキャッシュをチェックしても、ブラウザがディスクからキャッシュデータをロードする状況にありました（私はChromeを使用していました）。CSSとJSはすべてサーバーからロードされましたが、Webページはロードされませんでした。これは私のローカルとプロダクションの両方で起こっていました。

これを修正するには、コントローラーが必要としなかったとしても、ブラウザーにサーバーからWebページを取得させるために、追加のパラメーターをURLに追加する必要があります。

私はASP.Netを使用していたので、ここに私の例を示します。

//Controller function
public ActionResult Index()
    {
        return View();
    }
//Link
@Html.Action("Index", "Home", new { ts = DateTime.Now.Ticks.ToString()})

その結果、次のようなリンクが生成されます：http : //www.myweb.com/Home/Index?ts=636558555408282209

これが私の状況と解決策です。うまくいけば、それは誰かを助けることができました。