Jak zmusić przeglądarkę Chrome do ponownego załadowania pliku .css podczas debugowania w programie Visual Studio?

151

Obecnie edytuję plik .css w programie Visual Studio 2012 (w trybie debugowania). Używam Chrome jako mojej przeglądarki. Kiedy wprowadzam zmiany w pliku .css mojej aplikacji w programie Visual Studio i zapisuję, odświeżenie strony nie zostanie załadowane wraz ze zaktualizowaną zmianą w moim pliku .css. Myślę, że plik .css jest nadal w pamięci podręcznej.

Próbowałem:

  1. CTRL / F5
  2. W programie Visual Studio 2012 przejdź do właściwości projektu, karta Sieć Web Wybierz Uruchom program zewnętrzny w sekcji Rozpocznij akcję Wklej lub przejdź do ścieżki do przeglądarki Google Chrome (moja to C: \ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) W polu argumentów wiersza poleceń wpisz -incognito
  3. Korzystając z narzędzi programistycznych Chrome, kliknij ikonę „koła zębatego” i zaznaczono opcję „Wyłącz pamięć podręczną”.

Wydaje się, że nic nie działa, chyba że ręcznie zatrzymam debugowanie (zamknę Chrome), ponownie uruchomię aplikację (w debugowaniu).

Czy istnieje sposób, aby zmusić Chrome, aby zawsze ładował wszystkie zmiany CSS i ponownie ładował plik .css?

Aktualizacja:
1. Zmiany stylu w linii w moim pliku .aspx są pobierane, gdy odświeżam. Ale zmiany w pliku .css nie. 2. Jest to aplikacja ASP.NET MVC4, więc klikam hiperłącze, które wykonuje GET. Robiąc to, nie widzę nowego żądania dotyczącego arkusza stylów. Ale kliknięcie F5 powoduje ponowne załadowanie pliku .css, a kod stanu (na karcie sieci) to 200.

duyn9uyen
źródło
4
f12 -> sieć -> kliknięcie prawym przyciskiem myszy -> wyczyść pamięć podręczną przeglądarki (nie podoba mi się to, więc używam
Firefoksa
Właśnie tego próbowałem. Wydaje się, że to nie działa.
duyn9uyen
czy próbowałeś odświeżyć go po wszystkich podrzędnych kliknięciach prawym przyciskiem myszy?
thkang
Tak. Dokonałem również zmiany w moim pliku .aspx. Wyłapał zmianę i zmiany w liniowym css, ale nie zmiany w pliku .css.
duyn9uyen
na tej samej karcie sieciowej możesz zobaczyć wpis swojego .csspliku - nie znam asp, więc nie mam pewności, ale na moim serwerze python flask dev w pamięci podręcznej kod stanu wpisów wynosi 304, podczas gdy ponownie pobrane pliki mają 200 .Sprawdź swój kod statusu i poproś o czas, aby zobaczyć, czy jest to problem po stronie serwera.
thkang

Odpowiedzi:

148

Istnieje dużo bardziej skomplikowanych rozwiązań, ale bardzo prostym i prostym jest dodanie losowego ciągu zapytania do pliku CSS.

Jak na przykład src="/css/styles.css?v={random number/string}"

Jeśli używasz php lub innego języka po stronie serwera, możesz to zrobić automatycznie za pomocą time(). Tak by się stałostyles.css?v=<?=time();?>

W ten sposób ciąg zapytania będzie za każdym razem nowy. Jak powiedziałem, istnieją rozwiązania znacznie bardziej skomplikowane i bardziej dynamiczne, ale w testach ta metoda jest najlepsza (IMO).

anson
źródło
17
po prostu nie używaj tego na produkcji, bo stracisz możliwości buforowania swojego css. co jest dobre.
Bart Calixto,
3
Co się stanie, jeśli używasz aplikacji jednostronicowej i chcesz jej powiedzieć, aby ponownie załadowała CSS, ponieważ wersja się zmieniła?
Nathan C. Tresch
10
@ NathanC.Tresch zmieniasz wersję, gdy zmienia się wersja, zamiast wykonywać ciąg losowy / czasowy, który zmienia się za każdym razem. Najlepszym podejściem będzie użycie sumy kontrolnej samego pliku css.
Bart Calixto
Czy możesz wyjaśnić tę odpowiedź dla początkujących? Jak dokładnie można „po prostu dodać losowy ciąg zapytania”? Początkujący również chcą widzieć zmiany w swojej pracy, a większość z nas nie ma pojęcia, co to wszystko oznacza ani jak szukać odpowiedzi.
randy
@randy Podałem przykład za pomocą php, w którym renderujesz bieżący znacznik czasu jako parametr zapytania. Możesz zbadać, jak zrobić coś podobnego, używając dowolnego języka używanego na zapleczu. Możesz to również zrobić poprzez krok budowania chrząknięcia / łyka, jeśli masz to do dyspozycji.
anson
207

Aby zmusić Chrome do ponownego załadowania css i js:

Opcja Windows 1: CTRL+ SHIFT+ R
Opcja Windows 2: SHIFT+F5

OS X: + SHIFT+R

Zaktualizowany, jak stwierdził @PaulSlocum w komentarzach (i wiele potwierdzonych)


Oryginalna odpowiedź:

Chrome zmienił zachowanie. Ctrl+ Rzrobi to.

W systemie OS X: +R

Jeśli masz problemy z ponownym załadowaniem plików css / js, otwórz inspektora ( CTRL+ SHIFT+ C) przed ponownym załadowaniem.

Bart Calixto
źródło
26
I tu jak szalone wciskałem CTRL + F5 ... Dzięki.
Alix Axel,
3
Kolejna wskazówka do wypróbowania: code-pal.com/quick-tip-clear-cache-hard-refresh-on-chrome
duyn9uyen
3
@ duyn9uyen Słuszna uwaga! Wygląda na to, że znowu zmieniają zachowanie. To jest dodawane do wersji chrome Windows, nie jest jeszcze dostępne na Mac.
Bart Calixto
4
Ctrl + R działa również w przeglądarce Firefox. Dzięki za uwolnienie mnie od losowego adresu URL i innych rzeczy.
Zeeshanef
30
CTRL + R nie działa dla mnie, ale CTRL + SHIFT + R to robi
Paul Slocum
139

[PRZECZYTAJ PONIŻEJ AKTUALIZACJĘ]

Najłatwiejszy sposób, jaki znalazłem, to ustawienia Chrome DevTools. Kliknij ikonę koła zębatego (lub 3 pionowe kropki, w nowszych wersjach) w prawym górnym rogu DevTools, aby otworzyć okno dialogowe „Ustawienia”. Tam zaznacz pole: „Wyłącz pamięć podręczną (gdy DevTools jest otwarte)”


UPDATE: Teraz to ustawienie zostało przeniesione. Można go znaleźć w zakładce „Sieć”, jest to pole wyboru oznaczone „Wyłącz pamięć podręczną”. wprowadź opis obrazu tutaj

Deepak Joy
źródło
15
To najlepsze rozwiązanie IMHO: nie musisz bawić się własnym kodem, aby podać losową wartość do adresu URL w css.
Guillaume,
2
Doskonała odpowiedź! ... Działa jak urok!
Ani
1
Stwierdziłem również, że to jest najlepsze rozwiązanie.
Joe Huang,
3
Zostało to przeniesione w nowszych wersjach Chrome: przejdź do zakładki Sieć i zaznacz „Wyłącz pamięć podręczną” w nagłówku.
Jason Clemens
Metody Ctrl + Shift + R i Shift + F5 nie działają dla mnie - zgaduję, że coś się ostatnio zmieniło w Chrome. Ta metoda nadal działa świetnie. @JasonClemens: opcja „Wyłącz pamięć podręczną” znajduje się zarówno na karcie Sieć, jak iw Ustawieniach.
Amos M. Carpenter,
11

Masz do czynienia z problemem pamięci podręcznej przeglądarki.

Wyłącz pamięć podręczną na samej stronie. To nie zapisze pliku pomocniczego strony w przeglądarce / pamięci podręcznej.

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />

Ten kod musisz / musisz wstawić w headtagu strony, którą debugujesz lub w headtagu master pageswojej witryny

To nie pozwoli przeglądarce na buforowanie pliku, ostatecznie pliki nie będą przechowywane w tymczasowych plikach przeglądarki, więc nie ma pamięci podręcznej, więc nie będzie wymagane ponowne ładowanie :)

Jestem pewien, że to wystarczy :)

MarmiK
źródło
1
To powinna być akceptowana odpowiedź. Rozwiązanie @anson nie zadziałało dla mnie.
Pierrick Martellière
8

W moim przypadku, w ustawieniach Chrome DevTools, po prostu ustaw „Wyłącz pamięć podręczną (gdy DevTools jest otwarte)” nie działa, trzeba zaznaczyć „Włącz mapy źródeł CSS” i „Automatycznie przeładuj wygenerowany CSS”, które są wymienione w źródle group, aby rozwiązać ten problem z pamięcią podręczną.

gustavH
źródło
6

Naciśnij SHIFT+ F5.

U mnie działa z Chrome w wersji 54.

user2580062
źródło
Dziękuję Ci. Pomimo, że ctrl-r jest popularną odpowiedzią w tym wątku, tylko shift-f5 działał dla mnie (Chromium 55).
user2662680
5

tutaj miałem ten sam problem! ale na pewno moja rozdzielczość jest lepsza niż wszystkie powyższe przykłady, po prostu zrób to,

  1. Otwórz konsolę programisty Chrome, naciskając klawisz F12
  2. Kliknij prawym przyciskiem myszy przycisk ponownego ładowania u góry przeglądarki i wybierz opcję „Opróżnij pamięć podręczną i mocno załaduj ponownie”.

To wszystko!

Identyfikator Optimaz
źródło
4

W macOS mogę zmusić Chrome do ponownego załadowania pliku CSS, wykonując

+ SHIFT+R

Znalazłem tę odpowiedź ukrytą w komentarzach tutaj, ale zasługiwała na większą ekspozycję.

AlexG
źródło
3

Bieżąca wersja przeglądarki Chrome (55.x) nie ładuje ponownie wszystkich zasobów podczas ponownego ładowania strony (Command + R) - i nie jest to przydatne do debugowania pliku .css.

Command + R działa dobrze, jeśli chcesz debugować tylko pliki .html, .php, .etc i jest szybsze, ponieważ działa z zasobami lokalnymi / buforowanymi (.css, .js). Ręczne usuwanie pamięci podręcznej przeglądarki dla każdej iteracji debugowania nie jest wygodne.

Procedura wymuszania ponownego załadowania pliku .css na komputerze Mac (skrót klawiaturowy / Chrome): Command + Shift + R

Przemysł logiczny
źródło
3

Używam wersji Edge 81.0.416.64 (oficjalna kompilacja) (64-bitowa) i jest ona oparta na projekcie open source Chromium.

Naciśnij, F12aby przejść do narzędzi deweloperskich.
Kliknij kartę Sieć
Sprawdź Wyłącz pamięć podręczną

wprowadź opis obrazu tutaj

Chris Catignani
źródło
2

Wiem, że to stare pytanie, ale jeśli ktoś nadal szuka sposobu ponownego załadowania tylko jednego zewnętrznego pliku css / js, najłatwiejszym sposobem w Chrome jest teraz:

  1. Przejdź do zakładki Sieć w DevTools
  2. Kliknij zasób prawym przyciskiem myszy i wybierz opcję Odtwórz XHR, aby powtórzyć żądanie

Upewnij się, że opcja Wyłącz pamięć podręczną jest zaznaczona, aby wymusić ponowne załadowanie.

ivanhoe
źródło
2

W przypadku systemu macOS Chrome:

  1. Otwarte narzędzia programistyczne cmd+ alt+i
  2. Kliknij trzy kropki w prawym górnym rogu w narzędziach dla programistów
  3. Kliknij ustawienia
  4. Przewiń w dół do Network
  5. Włącz Disable cache (while DevTools is open)zobacz zrzut ekranu: wprowadź opis obrazu tutaj
pbaranski
źródło
1

Dlaczego trzeba odświeżyć całą stronę? Po prostu odśwież tylko pliki css bez ponownego ładowania strony. Jest to bardzo pomocne, gdy na przykład musisz czekać długą odpowiedź od DB. Po pobraniu danych z DB i wypełnieniu strony, edytuj pliki css i załaduj je ponownie w Chrome (lub Firefox). Aby to zrobić, musisz zainstalować rozszerzenie CSS Reloader . Dostępna jest również wersja Firefox.

Evgeni Nabokov
źródło
1

Możesz skopiować wkleić ten skrypt do konsoli Chrome i zmusza to skrypty CSS do ponownego ładowania co 3 sekundy. Czasami uważam to za przydatne, gdy ulepszam style CSS.

var nodes = document.querySelectorAll('link');
[].forEach.call(nodes, function (node) {
    node.href += '?___ref=0';
});
var i = 0;
setInterval(function () {
    i++;

    [].forEach.call(nodes, function (node) {
        node.href = node.href.replace(/\?\_\_\_ref=[0-9]+/, '?___ref=' + i);
    });
    console.log('refreshed: ' + i);
},3000);
Martin Vseticka
źródło
1

Rozwiązałem tę prostą sztuczkę.

<script type="text/javascript">
  var style = 'assets/css/style.css?'+Math.random();;
</script>

<script type="text/javascript">
  document.write('<link href="'+style+'" rel="stylesheet">');
</script>
Shahid Chaudhary
źródło
1

Wciąż problem.

Używanie parametrów takich jak „..css? Something = random-value” nie zmienia nic w mojej obsłudze klienta. Działa tylko zmiana nazwy.

Kolejne podejście do zmiany nazwy pliku. Używam przepisywania adresu URL w usługach IIS. Czasami Helicon's Isapi Rewrite.

Dodaj nową regułę.

+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css

Uwaga: zastrzegam użycie podkreślenia, aby oddzielić nazwę od liczby losowej. Może być cokolwiek innego.

Przykład:

<link href="https://stackoverflow.com/styles/template_<% 
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>" 
type="text/css" />

(Brak folderu stylów, to tylko nazwa części wzoru)

Kod wyjściowy jako:

<link href="/styles/template_285316115328" 
rel="stylesheet" type="text/css">

Przekieruj jako:

(R: 1 = szablon)

/template.css

Tylko wyjaśnienie jest długie.

Jan Andersen
źródło
0

Właśnie miałem ten problem, w którym jedna osoba korzystająca z Chrome (na komputerze Mac) nagle przestała ładować plik CSS. CMD + R w ogóle nie działał. Nie podobają mi się powyższe sugestie, które wymuszają trwałe przeładowanie systemu produkcyjnego.

Udało się zmienić nazwę pliku CSS w pliku HTML (i oczywiście zmienić nazwę pliku CSS). To zmusiło Chrome do pobrania najnowszego pliku CSS.

Richard
źródło
0

Jeśli używasz Sublime Text 3, użycie systemu kompilacji do otwarcia pliku otwiera najnowszą wersję i zapewnia wygodny sposób załadowania go przez [CTRL + B]. Aby skonfigurować system kompilacji, który otwiera plik w chrome:

  1. Idź do 'Narzędzia'

  2. Najedź kursorem myszy na „system budowania”. U dołu wyświetlonej listy kliknij „Nowy system budowania ...”

  3. W nowym pliku systemu kompilacji wpisz:

    {"cmd": [ "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]}

** pod warunkiem, że ścieżka podana powyżej w pierwszym zestawie cudzysłowów jest ścieżką do lokalizacji chrome na twoim komputerze, jeśli nie można po prostu znaleźć lokalizacji chrome i zastąpić ścieżkę w pierwszym zestawie cudzysłowów ścieżką do chrome na twoim komputerze.

Shlok Natarajan
źródło
0

Najprostszym sposobem osiągnięcia celu jest otwarcie nowego okna incognito w chrome lub w oknie prywatnym w przeglądarce Firefox, które domyślnie nie będzie buforować.

Możesz użyć tego do celów programistycznych, aby nie trzeba było wstrzykiwać losowej pamięci podręcznej zapobiegającej tworzeniu kodu w projekcie.

Jeśli używasz IE, niech Bóg ci pomoże!

Anarach
źródło
0

Ctrl + F5

Shift + F5

Obie działają

Ashwin Balani
źródło
0

Najłatwiej w Safari 11.0 macOS SIERRA 10.12.6: Załaduj ponownie stronę z Origin, możesz skorzystać z pomocy, aby dowiedzieć się, gdzie w menu się znajduje, lub możesz użyć opcji skrótu (alt) + Command + R.

Rodolfo Pertuz
źródło
-1

Chrome/firefox/safari/IE załaduje ponownie całą stronę za pomocą tych skrótów

Ctrl+ R (LUB) Ctrl+F5

Mam nadzieję, że może ci to pomóc!

Główny programista
źródło
-1

Jeśli używasz SiteGround jako firmy hostingowej i żadne z innych rozwiązań nie zadziałało, wypróbuj to:

Z cPanel przejdź do „NARZĘDZIA ULEPSZANIA WITRYNY” i kliknij „SuperCacher”. Na następnej stronie kliknij przycisk „Opróżnij pamięć podręczną”.

Don
źródło
Ta odpowiedź nie ma nic wspólnego z programem Visual Studio ani przeglądarką Chrome. Również to pytanie zostało zadane 4 lata temu i miało już zaakceptowane rozwiązanie. Staraj się unikać „wbijania” pytań na samą górę, udzielając na nie odpowiedzi, chyba że pytanie nie zostało już oznaczone jako rozwiązane lub znalazłeś nowe i ulepszone rozwiązanie problemu. Zapoznaj się z dokumentacją dotyczącą pisania świetnych odpowiedzi, aby uzyskać wskazówki, jak sprawić, by twoje odpowiedzi się liczyły :)
Obsidian Age
Cześć Obsidian. Przepraszam. Publikuję tutaj po raz pierwszy. Długo i ciężko szukałem rozwiązania tego problemu. Przyjęta odpowiedź nie zadziałała dla mnie. Kiedy znalazłem rozwiązanie (na podstawie własnych badań), chciałem je „przekazać”, pomagając każdemu, kto napotka ten problem - nawet jeśli ma on cztery lata. Nie jestem pewien, dlaczego moje działanie tutaj uzasadniało uderzenie w nadgarstek, ponieważ wydaje mi się to uzasadnione. Niemniej jednak na pewno będę ostrożny w przyszłości (naprawdę - nie mam na myśli tego w złośliwy sposób). Dzięki -Don.
Don