Chrome'un JS Dosyalarımı Önbelleğe Alma İşlemini Durdurma


136

JS dosyalarımda bir değişiklik yapacağım ama tarayıcıda gerçekten değişmeyecek, dosyaları yeniden yükleyecek şekilde her seferinde yeniden adlandırmam gerekiyor. Ekleyebileceğim bir tür .htaccess komutu veya önbelleğe almayı durduracak bir şey var mı?

Hatta benim html sayfaları sert çekirdekli önbellekleme. Değişiklikleri görmek için tarayıcımın tamamını yeniden açmam gerekiyor. Muhtemelen bir sunucu sorunu olabilir mi?


Web sunucunuzdaki ETag başlığının etkinleştirilmesi, Chrome'un önbelleğe alınmasına neden olur, ancak dosya değiştiğinde dosyanın yeni bir kopyasını doğru bir şekilde alır mı?
Geliştirici Webs

Yanıtlar:


200

Sağ üst köşedeki ayarlar simgesine tıklayabilirsiniz ...| Diğer Araçlar | Geliştirici Araçları | | Önbelleği devre dışı bırak (DevTools açıkken)

Windows için, bu F12veya CTRL + SHIFT + Imac iken CMD + SHIFT + IDevTools açar.

Eylül 2018 Chrome Güncellemesi için yeni yol:

Sağ üst köşedeki ayarlar simgesini tıklayın ...| Ayarlar | Tercihler | Geliştirici Araçları | | Önbelleği devre dışı bırak (DevTools açıkken)


4
Chrome'un bir şeyleri önbelleğe alması gibi büyük bir başarısızlık ... sayfa Önbellek yok olarak işaretlendiğinde bile ... Oh en azından bu işe yarıyor, kullanıcılar acı çekebilir ama en azından geliştirebilirim
Robert Noack

4
"Ayarlar" ın artık sağ altta olmadığını lütfen unutmayın! Ayarlara ulaşmak için sağ üstteki üç nokta menüsünü tıklayın .
yizzlez

4
Konumu: sağ üst köşe | "..." | ayarları | Tercihler | Ağ | "Devre Dışı önbellek (DevTools açıkken).
atom88

1
Bu ÇOK KÖTÜ UYGULAMA !!! Hayır, kullanımınız için geçici bir saldırıya sahip olmamalısınız .... TÜM kullanıcılarınız için KALICI bir çözümünüz olmalıdır. En iyi yol, src'nin sonundaki rastgele bir sorgu dizesidir. src = "someJs.js? someRandomStringCreatedByInlineJsOrServerRenderedCode" ki bu her seferinde yeni bir versiyona sahip olmasını sağlar. iyi bir rastgele dize bugünün tarih / saat kapmak ve oraya atmak olacaktır. muhtemelen bir tarih nesnesi olacağından bir dizeye dönüştürmeniz gerekebilir. Bunun seçilen cevap olması ve çok ağır bir şekilde kaldırılması gerçekten çok kötü.

1
Chrome 61.0.3163.100'den itibaren, seçenek artık Diğer Araçlar / Ağ Koşulları altında yaşıyor gibi görünüyor. "Geliştirici Araçları" seçeneği artık mevcut değil.
Ilia Koulikov

61

Bunu yapmanın daha hızlı bir yolu, adres çubuğunun yanındaki yenile simgesini sağ tıklayıp Önbelleği Boşalt ve Sabit yeniden yükle'yi seçmektir.

Chrome'un geliştirici araçlarının açık olduğundan emin olun. (F12 tuşuna basın) Bu arada ... Bu hile yalnızca Windows, Ubuntu ve Mac OS için Chrome'da çalışır


2
FYI, hepsini denedim ve kesinlikle hiçbiri işe yaramadı. Makinemde (Mountain Lion için varsayılan ayarlarla), F12 ön paneli gösterir.
Aubrey Goodman

2
kabul edilen cevaptan ne kadar iyi? Kabul edilen cevapla normal şekilde yeniden yükleyebilirsiniz.
SSH Bu

hayır yapamazsın. en azından yapamam. cevapların hiçbiri benim için işe yaramadı, hala yerel js dosyamda silinmiş bir uyarı açıyor, ancak yine de kromda önbelleğe alınmış js dosyasında.
Burak Karakuş

1
Benim için çalışıyor. Geliştirme araçlarının açık olduğundan emin olun, aksi takdirde sağ tıklama menüyü göstermez.
Venryx

Seçeneği görüyorum, ancak benim durumumda, komut dosyası yenilenmedi.
Ilia Koulikov


12

script.js?a=[random Number]PHP tarafından üretilen Rastgele sayı ile benzer bir şey ekleyin .

Son kullanma tarihi = 0, "no-cache" ve "cache-control = NO-CACHE" uygulamalarını denediniz mi? (Scriptler hakkında söylediklerini bilmiyorum).


2
Bu soruya rastladım ve cevapları gözden kaçırdım. Bu korkunç bir fikir, çünkü: 1) her istekte rastgele sayı üretmek, tarayıcıların dosyayı her ziyarette yeniden indirmesine neden olacaktır . Oluşturma süresi değerini istiyorsunuz , böylece tarayıcılar yalnızca sitede değişiklik yaptığınızda değeri yeniden oluşturur. PHP çalışma zamanı olarak yorumlandığından, bunu dağıtım zamanında yapmanız gerekebilir. ve 2) rasgele bir sayı üretmek, bazen (olasılık zamanla arttıkça) tarayıcının rasgele eski önbelleğe alınmış bir kopya olacağı anlamına gelir. İstediğiniz zaman yapmanız gerekiyorsa, zaman damgası kullanın!
JakeRobb

Bunu yapıyorum ve başlık önbellek değeri üzerinde iyi bir zaman aşımı (1 gün) ile derleme sürüm numarasını kullanıyorum
Worthy7

11

Birkaç fikir:

  1. Sayfanızı Chrome'da yenilediğinizde, tam yenileme yapmak için bir CTRL + F5 yapın.
  2. Son kullanma tarihini 0 olarak ayarlasanız bile oturum sırasında önbelleğe devam eder. Tarayıcınızı kapatıp tekrar açmanız gerekecek.
  3. Dosyaları sunucuya kaydettiğinizde, zaman damgalarının güncellendiğinden emin olun. Chrome önce HEADtam dosyayı tekrar indirmesi gerekip gerekmediğini görmek için tam bir GET yerine bir komut yayınlar ve sunucu görmek için zaman damgasını kullanır.

Sunucunuzda önbelleğe almayı devre dışı bırakmak istiyorsanız, aşağıdakileri yapabilirsiniz:

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 içinde


Bu ön kontrol = 0, son kontrol = 0 vardı ama benim için fark yaratan ek.
TadLewis

7

Hızlı adımlar:

1) Chrome Menüsü -> Araçlar -> Geliştirici Araçları'na giderek Geliştirici Araçları gösterge tablosunu açın

2) Sağ taraftaki ayarlar simgesini tıklayın (bu bir dişli!)

3) "Önbelleği devre dışı bırak (DevTools açıkken)" kutusunu işaretleyin

4) Şimdi, gösterge paneli yukarıdayken, yenilemeye basmanız yeterlidir ve JS önbelleğe alınmaz!


1
Ancak, WebStorm kullanarak hata ayıklamaya yardımcı olmaz. Sonra DevTools açık WebStrom bir hata ayıklayıcı ekleyemezsiniz.
Alexander Volkov

5

Sorun, Chrome'un must-revalidatedosyaları yeniden getirilmeleri gerekip gerekmediğini görmek için yeniden kontrol etmek için Cache-Control` başlığında olması gerektiğidir.

Her zaman SHIFT-F5'i tıklayabilir ve Chrome'u yenilemeye zorlayabilirsiniz, ancak bu sorunu sunucuda düzeltmek istiyorsanız, bu yanıt başlığını ekleyin:

Cache-Control: must-revalidate

Bu, Chrome'a ​​sunucuyla kontrol etmesini ve daha yeni bir dosya olup olmadığını görmesini söyler. Daha yeni bir dosya varsa, yanıt olarak dosyayı alır. Aksi takdirde, 304 yanıt alır ve önbellekteki yanıtın güncel olduğundan emin olur.

Bu üstbilgiyi ayarlamazsanız, dosyayı geçersiz kılan başka bir ayarın olmaması durumunda Chrome, daha yeni bir sürüm olup olmadığını görmek için asla sunucuyla görüşmez.

İşte sorunu daha ayrıntılı olarak tartışan bir blog yazısı .


1
Bunun Cache-Control: must-revalidateyerine olması gerektiğini düşünüyorum Cache-Control: must-validate. İkincisinin geçerli olduğunu sanmıyorum.
László Monda

3

Web uygulamalarımda güncellemeler yaparken, sunucumdaki büyük isabetlerden kaçınmak için tek bir JS dosyası döndürmek için bir işleyici kullanacağım veya bunlara küçük bir sorgu dizesi ekleyeceğim:

<script type="text/javascript" src="/mine/myscript?20111205"></script>

2
Bu ustaca bir uygulama gibi görünse de, bir sorgu dizesi bulduklarında önbelleğe almayı bırakacak bazı proxy'lerle ilgili sorunlar yaşayabilirsiniz: developers.google.com/speed/docs/best-practices/…
Francois Bourgeois

2
Peki bunun yerine ne yapmalısın?
BlueSky

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

Bunun "eski" bir soru olduğunu biliyorum. Ancak önbelleğe alınan baş ağrıları asla değildir. Deneme ve hata yığınları sonra, web barındırma sağlayıcılarımızdan biri Cachewall denilen bu uygulama CPanel aracılığıyla bulundu. Sadece Geliştirme modunu etkinleştir'e tıkladım ve ... voilà !!! Uzun zamandır acı çeken acıyı hemen durdurdu :) Umarım bu başka birine yardımcı olur ... R


0

Web sitesine göz atarken aynı css dosyasını alıyordum (gerçek etki alanına sahip hosting şirketi sunucusunda) ve chrome'da güncellenmiş sürümü alamadım. Firefox'ta göz attığımda dosyanın güncellenmiş sürümünü alabildim. Bu cevapların hiçbiri benim için işe yaramadı. Ayrıca makinemde web sitesi dosyaları var ve yerel apache sunucumu kullanarak localhost ile siteye göz atıyorum. Apache sunucumu kapattım ve güncellenmiş dosyayı alabildim. Bir şekilde yerel apache sunucum krom önbellekle uğraşıyordu. Umarım bu birisine yardımcı olur, çünkü bunu düzeltmek benim için çok zordu.


0
  1. Geliştirici Araçlarını Aç

    • Ya F12
    • Veya ...-> More Tools->Developer Tools
  2. Tıklayın Empty Cache and Hard Reload

    • Yenile simgesini sağ tıklayın (URL adres çubuğuna bırakıldı)
    • Veya yenileme simgesini sol tıklayıp 1 saniye basılı tutun

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.