Zatrzymaj buforowanie Chrome My JS Files


136

Dokonam zmiany w moich plikach JS, ale tak naprawdę nie zmieni się to w przeglądarce, za każdym razem muszę zmieniać nazwy plików, aby je ponownie załadować. Czy jest jakieś polecenie .htaccess, które mogę dodać, lub coś, aby przestało buforować?

To nawet buforuje twarde jądro moich stron HTML. Muszę ponownie otworzyć całą przeglądarkę, aby zobaczyć zmiany. Czy to może być problem z serwerem?


Czy włączenie nagłówka ETag na serwerze WWW powoduje, że Chrome buforuje, ale poprawnie pobiera nową kopię pliku, gdy się zmieni?
Strony internetowe deweloperów

Odpowiedzi:


200

Możesz kliknąć ikonę ustawień w prawym górnym rogu ...| Więcej narzędzi | Narzędzia programistyczne | Sieć | Wyłącz pamięć podręczną (gdy DevTools jest otwarte)

W przypadku systemu Windows jest to F12lub CTRL + SHIFT + Ipodczas gdy na komputerze Mac CMD + SHIFT + Iotwiera narzędzia DevTools.

Nowa ścieżka do aktualizacji Chrome z września 2018 r .:

Kliknij ikonę ustawień w prawym górnym rogu ...| Ustawienia | Preferencje | Narzędzia programistyczne | Sieć | Wyłącz pamięć podręczną (gdy DevTools jest otwarte)


4
Poważny błąd ze strony Chrome'a ​​w buforowaniu rzeczy ... nawet gdy strona jest oznaczona jako Brak pamięci podręcznej ... No cóż, przynajmniej to działa, użytkownicy mogą cierpieć, ale przynajmniej mogę się rozwijać
Robert Noack

4
Pamiętaj, że „Ustawienia” nie znajdują się już w prawym dolnym rogu! Kliknij menu z trzema kropkami w prawym górnym rogu, aby przejść do ustawień.
yizzlez

4
Lokalizacja to: prawy górny róg | „...” | ustawienia | Preferencje | Sieć | „Wyłącz pamięć podręczną” (gdy DevTools jest otwarte).
atom88

1
To jest BARDZO ZŁA PRAKTYKA !!! Nie, nie powinieneś mieć tymczasowego hackowania do użytku ... powinieneś mieć STAŁE rozwiązanie dla WSZYSTKICH użytkowników. Najlepszym sposobem jest losowy ciąg zapytania na końcu src. src = "someJs.js? someRandomStringCreatedByInlineJsOrServerRenderedCode" co sprawi, że za każdym razem będzie miał nową wersję. dobrym losowym ciągiem byłoby złapanie dzisiejszej daty / czasu i wrzucenie go tam. być może będziesz musiał zamienić go na łańcuch, ponieważ prawdopodobnie będzie to obiekt daty. To naprawdę bardzo złe, że była to wybrana odpowiedź i tak mocno przegłosowana.

1
Od wersji Chrome 61.0.3163.100 wydaje się, że opcja znajduje się teraz w sekcji Więcej narzędzi / Warunki sieciowe. Opcja „Narzędzia dla programistów” już nie istnieje.
Ilia Koulikov

61

Szybszym sposobem na to jest kliknięcie prawym przyciskiem myszy ikony odświeżania obok paska adresu i wybranie opcji Opróżnij pamięć podręczną i Twarde ponowne załadowanie

Tylko upewnij się, że narzędzia programistyczne Chrome są otwarte. (Naciśnij F12) Przy okazji ... Ta sztuczka działa tylko w Chrome dla Windows, Ubuntu i Mac OS


2
FYI, próbowałem tego wszystkiego i absolutnie nic z tego nie działało. Na moim komputerze (z domyślnymi ustawieniami Mountain Lion) F12 pokazuje pulpit nawigacyjny.
Aubrey Goodman

2
co jest o wiele lepsze niż zaakceptowana odpowiedź? Możesz normalnie załadować zaakceptowaną odpowiedź.
SSH

nie, nie możesz. przynajmniej nie mogę. żadna z odpowiedzi nie zadziałała dla mnie, nadal pojawia się alert, który jest usuwany z mojego lokalnego pliku js, ale nadal znajduje się w buforowanym pliku js w chrome.
Burak Karakuş

1
Pracuje dla mnie. Upewnij się, że narzędzia deweloperskie są otwarte, w przeciwnym razie kliknięcie prawym przyciskiem myszy nie pokaże menu.
Venryx

Widzę opcję, ale w moim przypadku skrypt nie został odświeżony.
Ilia Koulikov


12

dodaj Coś jak script.js?a=[random Number]z losową liczbą generowaną przez PHP.

Czy próbowałeś expire = 0, pragma „no-cache” i „cache-control = NO-CACHE”? (Nie wiem, co mówią o skryptach).


2
Natknąłem się na to pytanie i przeglądałem odpowiedzi. To okropny pomysł, ponieważ: 1) generowanie losowej liczby przy każdym żądaniu spowoduje, że przeglądarki będą ponownie pobierać plik przy każdej wizycie. Potrzebujesz wartości czasu kompilacji , tak aby przeglądarki ponownie generowały wartość tylko po wprowadzeniu zmian w witrynie. Ponieważ PHP jest interpretowane w czasie wykonywania, może być konieczne zrobienie tego podczas wdrażania. oraz 2) generowanie losowej liczby oznacza, że ​​czasami (z prawdopodobieństwem rosnącym w czasie) przeglądarka pobierze jakąś losową starą kopię w pamięci podręcznej. Jeśli musisz to zrobić w momencie żądania, użyj znacznika czasu!
JakeRobb

Robię to i używam numeru wersji kompilacji, z przyzwoitym
limitem

11

Kilka pomysłów:

  1. Odświeżając stronę w Chrome, naciśnij CTRL + F5, aby wykonać pełne odświeżenie.
  2. Nawet jeśli ustawisz wygasanie na 0, nadal będzie buforował podczas sesji. Będziesz musiał ponownie zamknąć i ponownie otworzyć przeglądarkę.
  3. Upewnij się, że kiedy zapisujesz pliki na serwerze, sygnatury czasowe są aktualizowane. Chrome najpierw wyda HEADpolecenie zamiast pełnego GET, aby sprawdzić, czy musi ponownie pobrać pełny plik, a serwer używa sygnatury czasowej, aby zobaczyć.

Jeśli chcesz wyłączyć buforowanie na swoim serwerze, możesz zrobić coś takiego:

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"

W .htaccess


Gdyby to było, ale pre-check = 0, post-check = 0 to dodatek, który zrobił dla mnie różnicę.
TadLewis

7

Szybkie kroki:

1) Otwórz pulpit narzędzi dla programistów, przechodząc do menu Chrome -> Narzędzia -> Narzędzia dla programistów

2) Kliknij ikonę ustawień po prawej stronie (to trybik!)

3) Zaznacz pole „Wyłącz pamięć podręczną (gdy DevTools jest otwarte)”

4) Teraz, gdy pulpit jest aktywny, po prostu naciśnij odśwież, a JS nie zostanie zapisany w pamięci podręcznej!


1
Jednak debugowanie za pomocą WebStorm nie pomaga. Wtedy DevTools są otwarte. WebStrom nie może dołączyć debuggera.
Alexander Volkov

5

Problem polega na tym, że Chrome musi mieć must-revalidatew nagłówku Cache-Control`, aby ponownie sprawdzić pliki, aby zobaczyć, czy trzeba je ponownie pobrać.

Zawsze możesz SHIFT-F5 i wymusić odświeżenie Chrome, ale jeśli chcesz naprawić ten problem na serwerze, dołącz ten nagłówek odpowiedzi:

Cache-Control: must-revalidate

To informuje Chrome, aby sprawdził serwer i sprawdził, czy jest nowszy plik. JEŚLI istnieje nowszy plik, otrzyma go w odpowiedzi. Jeśli nie, otrzyma odpowiedź 304 i pewność, że ta w pamięci podręcznej jest aktualna.

Jeśli NIE ustawisz tego nagłówka, to w przypadku braku innych ustawień, które unieważnią plik, Chrome nigdy nie sprawdzi z serwerem, czy jest dostępna nowsza wersja.

Oto post na blogu, który dokładniej omawia ten problem.


1
Myślę, że powinno być Cache-Control: must-revalidatezamiast Cache-Control: must-validate. Myślę, że to drugie nie jest ważne.
László Monda

3

Podczas aktualizowania moich aplikacji internetowych albo użyję programu obsługi, aby zwrócić pojedynczy plik JS, aby uniknąć masowych trafień na moim serwerze, lub dodam do nich mały ciąg zapytania:

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

2
Wygląda to na genialną praktykę, ale możesz napotkać problemy z niektórymi serwerami proxy, które przestaną być buforowane po znalezieniu ciągu zapytania: developers.google.com/speed/docs/best-practices/ ...
Francois Bourgeois

2
Więc co powinieneś zrobić zamiast tego?
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

Wiem, że to „stare” pytanie. Ale bóle głowy związane z buforowaniem nigdy nie są. Po wielu próbach i błędach odkryłem, że jeden z naszych dostawców usług hostingowych miał za pośrednictwem CPanel tę aplikację o nazwie Cachewall. Właśnie kliknąłem Włącz tryb programowania i ... voilà !!! Od razu powstrzymał długo odczuwany ból :) Mam nadzieję, że pomoże to komuś innemu… R.


0

Otrzymałem ten sam plik css, kiedy przeglądałem witrynę (na serwerze firmy hostingowej z prawdziwą domeną) i nie mogłem pobrać zaktualizowanej wersji na chrome. Udało mi się pobrać zaktualizowaną wersję pliku podczas przeglądania go w przeglądarce Firefox. Żadna z tych odpowiedzi nie zadziałała dla mnie. Mam również pliki witryny na moim komputerze i przeglądam witrynę z lokalnym serwerem przy użyciu mojego lokalnego serwera Apache. Wyłączyłem serwer Apache i udało mi się pobrać zaktualizowany plik. W jakiś sposób mój lokalny serwer Apache miał problemy z pamięcią podręczną Chrome. Mam nadzieję, że to komuś pomoże, ponieważ było mi bardzo trudno to naprawić.


0
  1. Otwórz narzędzia programistyczne

    • Albo F12
    • Lub ...-> More Tools->Developer Tools
  2. Kliknij Empty Cache and Hard Reload

    • Kliknij prawym przyciskiem myszy ikonę odświeżania (po lewej stronie, aby przejść do paska adresu URL)
    • Lub kliknij lewym przyciskiem myszy ikonę odświeżania i przytrzymaj ją przez 1 sekundę

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.