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

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.

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).

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.

[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ą”.

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 :)

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ą.

Naciśnij SHIFT+ F5.

U mnie działa z Chrome w wersji 54.

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!

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ę.

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

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ą

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.

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:

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.

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);

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>

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.

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.

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.

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!

Ctrl + F5

Shift + F5

Obie działają

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.

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!

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ą”.