Dlaczego serwer ignoruje zmiany w plikach kodu, mimo że pamięć podręczna jest wyłączona?

14

Testuję kod html / js na moim lokalnym hoście (Windows 7, Chrome v79.0.3945.130 (64-bit)) i około 50% zmian kodu czasu nie jest odzwierciedlonych w przeglądarce (widzę to w Narzędziach dla programistów / źródłach ).
W Internecie jest mnóstwo porad, ale żadna z nich nie działa:

Kliknij prawym przyciskiem myszy na przeładowanie i wybierz „Opróżnij pamięć podręczną i przeładuj mocno” - nie pomaga w 30% przypadków.
Wyłącz pamięć podręczną na karcie Sieć w Narzędziach Chrome Chrome - nie pomaga.
Dodaj <meta http-equiv="Cache-control" content="no-cache">w nagłówku - nie pomaga.
Zastąp <script src="common.js"></script>przez <script src="common.js?blabla"></script>- pomaga w 60% przypadków, ale musisz to zrobić, gdy każda zmiana jest ogromnym obowiązkiem. Ponadto nie działa ze zmianami HTML.
Skopiuj plik do nowego pliku (np. Index.html do index2.html) i zamień nazwę pliku w kodzie - zawsze działa, ale jest to jeszcze większy obowiązek.

Dokładnie taki sam problem występuje, gdy przesyłam kod do github.io

Pomóż mi to zrobić, aby strona natychmiast odzwierciedlała zmiany w kodzie.

Edycja: Utworzyłem plik index3.html i umieściłem tam tylko „witaj świecie”. Otwarty plik w przeglądarce. Zmieniono na „hello world2” - przeglądarka zaktualizowała treść. Zmieniono na „hello world3” - przeglądarka nadal wyświetlała „hello world2” nawet po wielu przeładowaniach i „Empty cache and hard reload”. Zmieniłem na „hello world4” - przeglądarka nadal wyświetla „hello world2”. W ciągu 4 godzin zmieniłem na „hello world5” - przeglądarka nadal wyświetla „hello world2”. Ten plik edytowałem za pomocą podstawowego notatnika.

Edycja2: Ludzie wciąż pytają, jakiego serwera używam. To wygląda na część problemu. Niestety nie wiem i nie wiem, co dokładnie muszę zrobić, aby to sprawdzić. Oto wszystko, czego do tej pory się dowiedziałem:

Mam inetpub/wwwrootkatalog, w którym umieszczam pliki HTML i JS, a następnie otwieram plik index.html w przeglądarce pod adresem http://localhost/.
Mój panel Sieć w Narzędziach dla programistów wygląda następująco: link do obrazu .
Konfiguracja serwera była bardzo szybka i nie wymagała instalowania dodatkowego oprogramowania. Nie używam node.js.
Jest iisstart.htm o, inetpub/wwwroota kiedy otwieram http://localhost/iisstart.htm, mówi IIS7.

javascript html server browser-cache klm123
źródło

Czasami zdarza się, że wyłączenie pamięci podręcznej w narzędziach Chrome Dev + odświeżanie + ponowne włączenie pamięci podręcznej + odświeżanie czasami rozwiązuje problem? Może warto spróbować ...

Nick Parsons,

2

jakiego typu serwera używasz?

Jhecht

@Jhecht jak to sprawdzić?

klm123

1

Z tego, co widzę w odpowiedziach, prawdopodobnie obejdziesz to z parametrem. I to prawdopodobnie zadziała. Jednak zwykle nie powinno to być konieczne po wyłączeniu pamięci podręcznej w narzędziach chrome dev. Więc moje przeczucie byłoby związane z kolejną pamięcią podręczną. Między tobą a serwerem może znajdować się dowolna liczba dodatkowych technologii buforowania. Kilka przykładów: buforowanie po stronie serwera (np. Varnish), buforowanie CDN (np. Cloudflare), lokalne serwery proxy z routera / zapór ogniowych (np. Cache-squid) i podobne rzeczy. Też to sprawdzę.

Jey DWork

1

@ klm123 nie wiedząc, o którym serwerze chodzi, nie można powiedzieć, jak to zmienić lub sprawdzić konfigurację pamięci podręcznej. Jeśli nie masz pojęcia o swoim serwerze internetowym, jednym z możliwych sposobów sprawdzenia tego jest karta sieciowa devTools: sprawdź nagłówki odpowiedzi załadowanego pod index.htmlkątem czegoś takiego jak nagłówek X-Powered-Bylub, Serverktóry może dać podpowiedź na serwerze internetowym. Google w poszukiwaniu ścieżki do pliku inetpub/wwwrootsilnie wskazuje na serwer IIS.

acran

6

Użycie parametru to właściwy sposób! Tutaj możesz dodać numer wersji, którą zmieniasz tylko przy dużych zmianach ręcznie, a do debugowania możesz ustawić go na Date.time (), więc w tagu <head> wymusza to zastąpienie wszystkich wersji buforowanych, ponieważ parametr jest zawsze nowy jeden:

< script type="text/javascript"> 
    var script = document.createElement('script'); 
    var version = Date.time();
    script.src = "common.js?v="+version; 
    document.head.appendChild(script) 
< /script>

Mam nadzieję że to pomoże!

lehm.ro
źródło

Chyba mogę to zrobić. Ale czy nie jest to skutecznie to samo, co moja czwarta opcja? aby dodać „? blabla” po nazwie pliku. Nie działa dość często - jest to ta sama nazwa pliku na karcie Źródła lub dodawana jest blabla, ale zawartość pliku jest nadal taka sama.

klm123

To nie to samo. Gdy parametr zostanie użyty dwukrotnie (co nigdy nie nastąpi w Date.time (), może renderować wersję buforowaną.? Blabla jest taki sam po dwukrotnym użyciu, jak w ogóle go nie używa

lehm.ro

parametr nie jest używany dwukrotnie. Edytuję kod, następnie zmieniam parametr, a następnie sprawdzam kod źródłowy w przeglądarce i jest on stary.

klm123

Czy wypróbowałeś moje podejście?

lehm.ro

Twoje podejście pomaga, dziękuję. Ale to nie rozwiązuje mojego problemu. To, co napisałeś, nie jest prawdą w mojej sytuacji. „wymusza nadpisanie wszystkich wersji z pamięci podręcznej, ponieważ parametr jest zawsze nowy”, zmiana parametru na nowy nie wymusza niezawodnego przeładowania mojej pamięci podręcznej. Nie może też pomóc w zmianach w pliku index.html.

klm123

3

W serwerze Windows IIS7 działającym w systemie Windows 7, aby zapobiec buforowaniu zawartości, należy wprowadzić zmiany w jednym z plików konfiguracyjnych o nazwie web.config. Pliki konfiguracyjne dla IIS 7 i znajdują się w późniejszym %WinDir%\System32\Inetsrv\Config foldergdzie %WinDir%jest folder, w którym jest zainstalowany system Windows (zazwyczaj C:/Windows).

Utwórz kopię zapasową web.configpliku przed edycją, aby móc go przywrócić, jeśli zmiany, które wprowadzisz w pliku, spowodują jego uszkodzenie.

Dodaj do web.configpliku następujące elementy, aby zapobiec buforowaniuindex.html :

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

web.configTutaj masz ścieżkę do pliku: Dokument systemu Windows: Dokumentacja konfiguracji

Tutaj mam konfigurację pamięci podręcznej: Jak wyłączyć buforowanie pliku HTML aplikacji jednostronicowej udostępnianej przez IIS?

AndrewL64
źródło

We wspomnianej ścieżce nie ma pliku web.config. Stworzyłem go i umieściłem tam twój kod. Ale musiałem zastąpić index.html pełną ścieżką jak projectName/index.html, którą kopiuję z adresu URL w przeglądarce http:/localhost/projectName/index.html. Wynik - brak wpływu na problem z buforowaniem.

klm123

@ kim123 Czy możesz spróbować dodać web.configplik w folderze głównym witryny (w folderze, w którym znajduje się witryna) i zmienić ścieżkę z powrotem na po prostu index.htmli zobaczyć, czy to działa.

AndrewL64

Zrobiłem. to nie pomaga.

klm123

1

Miałem ten sam problem i oto moja lista kontrolna:

Sprawdź web.config (buforowanie i pamięć podręczna klienta, zasady pamięci podręcznej jądra itp.) Lub .htaccess (zestaw nagłówkowy Cache-Control).
Jeśli korzystasz z dynamicznych języków, takich jak ASP, PHP, może istnieć wewnętrzne ustawienie pamięci podręcznej. W jednym przypadku znalazłem się <%Response.Expires=1440%>w wielu liniach kodu ASP i pokonałem wszystkie inne ustawienia! W php session_cache_expiremoże zrobić to samo.
Jeśli używasz usług IIS, sprawdź serwer > nagłówki odpowiedzi HTTP, aby upewnić się, że nie ma nic takiego samego w buforowaniu dla poszczególnych witryn wymienionych pod nazwą serwera.
sprawdź http-equiv="Cache-control"nagłówki HTML (zdałeś ten test!).

Na koniec muszę powiedzieć, że we wszystkich powyższych sytuacjach zaznaczenie opcji Wyłącz pamięć podręczną w karcie Newtwork w konsoli Chrome zawsze działało dla mnie, aby wyświetlić nową wersję stron, ale jest to dobre tylko do celów debugowania, a użytkownicy nie zrobią tego!

Ali Sheikhpour
źródło

1. Gdzie mogę znaleźć web.config i .htaccess? 2. Używam tylko html i js. 3. Nagłówki odpowiedzi HTTP wyglądają tak: imgur.com/leYpdej

klm123

Jeśli korzystasz z IIS, web.congfig znajduje się w katalogu głównym wwwroot. Ponadto istnieje plik Machine.config na poziomie serwera, który można zmodyfikować z poziomu konsoli IIS bezpośrednio tutaj: stackoverflow.com/questions/2325473/where-is-machine-config . Jeśli używasz serwera Apache w systemie Windows, przeszukaj okna, aby znaleźć plik .htaccess @ klm123

Ali Sheikhpour

0

W konkretnym przypadku korzystania z Google Chrome spróbuj: Otwórz Narzędzia deweloperskie -> Przejdź do zakładki „Sieć”. Zaznacz pole wyboru „Wyłącz pamięć podręczną”, a następnie odśwież stronę.

UWAGA: Aby działało to za każdym razem okno Narzędzia deweloperskie MUSI pozostać otwarte przez cały czas.

Jednak w celu propagowania zmian wśród użytkowników, bez konieczności częstego odświeżania strony itp., Musisz dołączyć wersje plików na końcu każdego pliku, do którego istnieje odwołanie, w przypadku plików, które często się zmieniają (tak jak wskazałeś). Na przykład:

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=20b379f72a37" >

Do v=20b379f72a37końca dołączany jest automatycznie wygenerowany skrót pliku z zawartością pliku.

Martin Shishkov
źródło

To pozycja 2 na mojej liście.

klm123

Czy upewniasz się, że okno Dev Tools pozostaje otwarte?

Martin Shishkov

okno narzędzi deweloperskich jest otwarte, pole wyboru jest zaznaczone [ale zwykle patrzę na kartę źródeł], a nawet intensywnie odświeżam.

klm123

0

To długa szansa - ale jakiego edytora / IDE używasz? Jakie zmiany wprowadzasz w pliku index.html?

Czy możesz podać przykłady takich modyfikacji, które nie są odzwierciedlane podczas zapisywania i próby załadowania pliku?

Chciałbym spróbować odtworzyć Twój problem. Z tego, co sugerują ludzie, nie wynika, że problem dotyczy samego kodu. Podejrzewam, że jest to problem środowiskowy, ale potrzebuję więcej informacji, aby potwierdzić moje podejrzenia.

foreza
źródło

Używam kodu Microsoft Visual Studio Studio. Przykład: zamień <script src = "common.js"> </script> na <script src = "common.js? Blabla">. Przykład 2: dodaj nowy przycisk, dodaj nowy div, dodaj wywołanie funkcji onload. Tbh to wygląda jak każdy rodzaj edycji.

klm123

Zobacz zmiany na końcu mojego pytania.

klm123

0

To, co piszesz w meta HTML, jest zaleceniem dla przeglądarek, a nie ścisłą instrukcją. Jeśli w przeglądarce jest włączone ścisłe buforowanie, to nie pomoże.

Rozwiązania są dobrze opisane: https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

Wolę po stronie serwera dodać do skryptów wersję z datą ostatniej aktualizacji samego pliku.

<script src="/myScript.js?v=1579780745150"></script>

Gdzie 1579780745150 to Uniksowy znacznik czasu aktualizuje sam plik myScript.js . Działa tylko z własnymi plikami, ale zewnętrzne nie są potrzebne. Najczęściej w nazwie pliku znajduje się wersja.

Aleksandr Smityukh
źródło

Jeśli potrzebujesz kodu backendu. Powiedz mi, z której platformy korzystałeś.

Aleksandr Smityukh

0

Jest to prawdopodobnie bardzo frustrujące i nie wygląda na to, że robisz coś złego.

Problem prawdopodobnie polega na tym, że coś między przeglądarką a plikiem skryptu, który wywołujesz, wykonuje buforowanie.

Aby ustalić, co to jest, pozwól, że zapytam, jak przeglądasz adres URL hosta lokalnego?

Przykłady:

file://path/to/file.html
http://localhost/file.html
http://127.0.0.1/file.html
http://[machine's-hostname]/file.html
http://[custom-domain-defined-in-hosts-file]/file.html

Jeśli działasz, file://path/to/file.htmloznacza to, że nie przeglądasz serwera WWW / proxy. Jeśli tak http://[something]/file.html, to używasz jakiegoś serwera WWW i prawdopodobnie jest to winowajcą. Poszukaj jakiegoś ustawienia, w którym możesz wyłączyć buforowanie.

Jeśli nie używasz serwera WWW i dosłownie przeglądasz bezpośrednio lokalny plik HTML bez serwera WWW, sugerowałbym, że winowajcą jest przeglądarka. W takim przypadku sugeruję wyłączenie buforowania przeglądarki, jak sugerował Martin Shishkov .

Dean Householder
źródło

to http://localhost/ProjectName/index.htmlgdzie to ustawienie, w którym można wyłączyć buforowanie może być?

klm123

Wygląda na to, że z zrzutu ekranu opublikowanego w innym miejscu korzystasz z usług IIS (zwanych także Internetowymi usługami informacyjnymi firmy Microsoft). Szybkim rozwiązaniem jest dwukrotne kliknięcie pliku .html, aby załadować go do przeglądarki, w której będzie używany plik file://path/to/projectName/index.html. Spowoduje to usunięcie serwera WWW z równania. Aby kontynuować używanie IIS i po prostu naprawić pamięć podręczną, zapoznaj się z tym artykułem: support.microsoft.com/en-us/help/247404/…

Dean Householder

0

Chrome robi to tak, że jeśli plik nie zmienił się zbytnio, nie wiem, co to znaczy, użyje „skompilowanej” wersji pamięci podręcznej. Dla html oznacza parsowane drzewo don. Dla wstępnie skompilowanego kodu JS itp.

Zwykle można to rozwiązać, wiele frameworków używa skrótów w nazwach plików, takich jak main.md5hash.js:, ponieważ zmiana nazwy pliku unieważnia pamięć podręczną.

Wtedy zostaniesz z ewentualnym brakiem aktualizacji HTML. I dla jasności, nie jestem pewien, zawsze możesz dodać komentarz z losową kroplą ... jak randka.

Akxe
źródło

0

Opierając się na aktualizacjach odpowiedzi, powiedziałbym, że twój problem jest spowodowany przez IIS v7, że używa pamięci komputera do buforowania, a nie lokalnego dysku twardego, dlatego Hard reloadwszystkie inne metody wydają się nie działać poprawnie.

Mógłbym wymyślić 3 rozwiązania:

1. Naprawianie problemu z pamięcią podręczną IIS: (Nie przetestowano, ponieważ nie mam komputera z IIS)

W menu Start kliknij Narzędzia administracyjne , a następnie Menedżer internetowych usług informacyjnych (IIS). (patrz obrazy )
W widoku drzewa po lewej stronie znajdź swoją aplikację.
Wybierz element menu Wyjściowe buforowanie .
Kliknij opcję Dodaj regułę pamięci podręcznej, a następnie wpisz w nich pliki extension, które chcesz wyłączyć w nich pamięć podręczną, tj. .aspx.Css, .js itp. (Chyba jeden?
Teraz możesz albo Odznacz buforowanie w trybie użytkownika lub Zaznacz, aby zapobiec buforowaniu w całości. Powinno to wyglądać podobnie do tego:

Źródło rozwiązania - Przeczytaj więcej o pamięci podręcznej IIS 7

2. Korzystanie z niektórych alternatyw dla IIS Jest ich sporo, ale polecam (na podstawie moich doświadczeń) WAMP lub XAMPP Oba zapewniają lepsze „środowisko” programistyczne i oba obsługują system Windows 7. Ponadto, jeśli znasz się na VS Code możesz po prostu użyć rozszerzenia Live Server .

3. Użyj Chrome Podczas programowania trybu Incognito . (Nie jestem pewien, czy to działa dla IIS7)

awran5
źródło

Dodaj regułę pamięci podręcznej / Zapobiegaj buforowaniu - nie pomaga [próbowano z HTML]. Tryb incognito - nie pomaga.

klm123

Próbowałeś z .jsplikami? zależy to od wprowadzanych zmian.

awran5

Dlaczego serwer ignoruje zmiany w plikach kodu, mimo że pamięć podręczna jest wyłączona?

Odpowiedzi: