ChromeがJSファイルをキャッシュしないようにする

136

私はJSファイルに変更を加えますが、ブラウザでは実際には変更されません。ファイルを毎回名前を変更して再ロードする必要があります。追加できる何らかの.htaccessコマンドや、キャッシュを停止するための何かはありますか？

それは私のhtmlページをハードコアにキャッシュすることです。変更を確認するためだけにブラウザ全体を再度開く必要があります。サーバーの問題である可能性がありますか？

javascript  caching  google-chrome 
— ハウディマクジー
ソース
WebサーバーでETagヘッダーを有効にすると、Chromeはキャッシュされますが、変更されたファイルの新しいコピーを正しく取得しますか？
— 開発者向けWeb

回答:

200

右上の設定アイコンをクリックできます...。その他のツール| 開発ツール | ネットワーク | キャッシュを無効にする（DevToolsが開いている間）

ウィンドウの場合、これはあるF12か、CTRL + SHIFT + IMacの中には、CMD + SHIFT + Iデベロッパーツールを開きます。

2018年9月のChromeアップデートの新しいパス：

右上の設定アイコンをクリックします...| 設定 | 設定 | 開発ツール | ネットワーク | キャッシュを無効にする（DevToolsが開いている間）

— MartinHN
ソース
4
キャッシュによるもののクロムによる主要な失敗...ページがキャッシュなしとマークされている場合でも...少なくとも、これはうまくいき、ユーザーは苦しむ可能性がありますが、少なくとも私は開発できます
— Robert Noack
4
「設定」は右下にないことに注意してください！右上にある3つの点のメニューをクリックして、設定に移動します。
— yizzlez
4
場所は次のとおりです。「...」| 設定| 設定| ネットワーク| 「キャッシュを無効にする」（DevToolsが開いている間）。
— atom88 2016年
1
これは非常に悪い習慣です!!! いいえ、あなたはあなたの使用のための一時的なハックをするべきではありません....あなたはすべてのユーザーのための永続的な解決策を持っているべきです。最良の方法は、srcの最後にあるランダムなクエリ文字列です。src = "someJs.js？someRandomStringCreatedByInlineJsOrServerRenderedCode"により、毎回新しいバージョンになるようにします。良いランダム文字列は、今日の日付/時刻をつかんでそこに投げ込むことです。おそらく日付オブジェクトになるので、文字列に変換する必要があるかもしれません。これが選択された回答であり、あまりにも多くの賛成票を投じられたことは本当に悪いことです。
1
Chrome 61.0.3163.100の時点で、このオプションは[その他のツール/ネットワーク条件]の下にあるようです。「開発ツール」オプションはなくなりました。
— Ilia Koulikov 2017年
61

これを行うより速い方法は、アドレスバーの横にある更新アイコンを右クリックし、[ キャッシュを空にする]と[ハードリロード]を選択することです。

Chromeの開発ツールが開いていることを確認してください。（F12キーを押します）ところで...このトリックは、Windows、Ubuntu、Mac OSのChromeでのみ機能します

— ニコールリバー
ソース
2
参考までに、私はこれをすべて試しましたが、どれもうまくいきませんでした。私のマシン（Mountain Lionのデフォルト設定）では、F12がダッシュボードを表示します。
— オーブリーグッドマン2013年
2
受け入れられた答えよりもはるかに優れていますか？受け入れられた回答で通常どおりリロードできます。
— SSH
いいえ、できません。少なくともできません。答えはどれもうまくいきませんでしたが、ローカルのjsファイルで削除されたアラートをポップアップしますが、Chromeのキャッシュされたjsファイルにはまだ残っています。
— BurakKarakuş15年
1
私のために働く。開発ツールが開いていることを確認してください。開いていない場合、右クリックしてもメニューが表示されません。
— Venryx 2017
オプションは表示されますが、私の場合、スクリプトは更新されませんでした。
— Ilia Koulikov 2017年
12

script.js?a=[random Number]PHPによって生成された乱数のようなものを追加します。

expire = 0、プラグマ「no-cache」、「cache-control = NO-CACHE」を試しましたか？（私は彼らがスクリプトについて言うことを知りません）。

— EGOrecords
ソース
2
私はこの質問に出くわし、答えをざっと読んでいました。次の理由により、これはひどい考えです。1）要求ごとに乱数を生成すると、ブラウザはアクセスのたびにファイルを再ダウンロードします。あなたは欲しい構築時あなたはサイトに変更を加えたときにブラウザが値のみを再生成するように、値を。PHPは実行時に解釈されるため、代わりにデプロイ時に実行する必要がある場合があります。2）乱数を生成することは、時々（確率が時間とともに増加する）、ブラウザがランダムに古いキャッシュコピーを作成することを意味します。リクエスト時に実行する必要がある場合は、タイムスタンプを使用してください。
— JakeRobb
私はこれを行い、ビルドバージョン番号を使用しています。ヘッダーキャッシュ値に適切なタイムアウト（1日）を設定しています
— Worthy7
11

いくつかのアイデア：

  1. Chromeでページを更新するときに、CTRL + F5を実行して完全に更新します。
  2. 有効期限を0に設定しても、セッション中はキャッシュされます。ブラウザを閉じて、もう一度開く必要があります。
  3. ファイルをサーバーに保存するときに、タイムスタンプが更新されていることを確認してください。Chromeは最初にHEAD完全なGETではなくコマンドを発行して、ファイル全体を再度ダウンロードする必要があるかどうかを確認し、サーバーはタイムスタンプを使用して確認します。

サーバーでキャッシングを無効にしたい場合は、次のようにします。

Header set Expires "Thu, 19 Nov 1981 08:52:00 GM"
Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
Header set Pragma "no-cache"

.htaccess

— マイク・クリステンセン
ソース
これがpre-check = 0であったが、post-check = 0が私にとって差をつけた追加です。
— TadLewis
7

簡単な手順：

1）Chromeメニュー->ツール->開発者ツールに移動して、開発者ツールダッシュボードを開きます。

2）右側の設定アイコンをクリックします（歯車です）。

3）[キャッシュを無効にする（DevToolsが開いている場合）]チェックボックスをオンにします

4）これで、ダッシュボードが起動している間、更新を押すだけでJSはキャッシュされません！

— StackG
ソース
1
ただし、WebStormを使用してデバッグすることはできません。その後、DevToolsが開きますWebStromはデバッガーをアタッチできません。
— Alexander Volkov
5

問題は、must-revalidateファイルを再フェッチして再フェッチする必要があるかどうかを確認するために、ChromeがCache-Control`ヘッダーにある必要があることです。

いつでもSHIFT-F5を押してChromeを強制的に更新できますが、サーバーでこの問題を修正するには、次のレスポンスヘッダーを含めます。

Cache-Control: must-revalidate

これにより、サーバーに確認し、新しいファイルがあるかどうかを確認するようChromeに指示します。新しいファイルがある場合、応答でそれを受け取ります。そうでない場合は、304応答を受け取り、キャッシュ内のものが最新であることを保証します。

このヘッダーを設定しない場合、ファイルを無効にする他の設定がない場合、Chromeはサーバーに新しいバージョンが存在するかどうかを確認しません。

これは問題をさらに議論するブログ投稿です。

— AgilePro
ソース
1
のCache-Control: must-revalidate代わりにすべきだと思いますCache-Control: must-validate。後者は有効ではないと思います。
— ラースローモンダ
3

Webアプリケーションを更新するときは、ハンドラーを使用して単一のJSファイルを返し、サーバーへの大量のヒットを回避するか、小さなクエリ文字列を追加します。

<script type="text/javascript" src="/mine/myscript?20111205"></script>
— ライアン・テルニエ
ソース
2
：彼らは、クエリ文字列を見つける際に、独創的な練習のようなこのルックスは、あなたがキャッシュに停止するいくつかのプロキシで問題を得るかもしれませんがdevelopers.google.com/speed/docs/best-practices/...
— フランソワ・ブルジョワ
2
代わりに何をすべきでしょうか？
— BlueSky 2017
1 
<Files *>
Header set Cache-Control: "no-cache, private, pre-check=0, post-check=0, max-age=0"
Header set Expires: 0
Header set Pragma: no-cache
</Files>
— アルファブラボ
ソース
1

私はこれが「古い」質問であることを知っています。しかし、キャッシングによる頭痛の種は決してありません。試行錯誤の末、私たちのWebホスティングプロバイダーの1つがCPanelを介してこのアプリをCachewallと呼んでいることがわかりました。[開発モードを有効にする]をクリックしただけです。それはすぐに苦しんでいた長い痛みを止めました:)これが誰かを助けることを願っています... R

— ラモン・アラウージョ
ソース
0

（実際のドメインでホスティング会社のサーバー上で）Webサイトを参照すると同じcssファイルを取得していましたが、Chromeで更新されたバージョンを取得できませんでした。Firefoxで閲覧すると、ファイルの更新バージョンを入手できました。これらの答えはどれもうまくいきませんでした。私のマシンにもWebサイトファイルがあり、ローカルのApacheサーバーを使用してlocalhostでサイトを閲覧しています。Apacheサーバーをシャットダウンすると、更新されたファイルを取得できました。どういうわけか私のローカルのApacheサーバーはクロムキャッシュをいじっていました。私がこれを修正するのが非常に困難だったので、これが誰かを助けることを願っています。

— アルプハンチョル
ソース
0

  1. オープン開発者ツール

    • F12
    • または...-> More Tools->Developer Tools

  2. クリック Empty Cache and Hard Reload

    • リフレッシュアイコンを右クリックするか（アドレスバーのURLを左クリックするだけ）
    • または、更新アイコンを左クリックして1秒間押し続けます
— 新
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.