Wie erzwinge ich, dass der Chrome-Browser beim Debuggen in Visual Studio die CSS-Datei neu lädt?

151

Ich bearbeite derzeit eine CSS-Datei in Visual Studio 2012 (im Debug-Modus). Ich verwende Chrome als Browser. Wenn ich in Visual Studio Änderungen an der CSS-Datei meiner Anwendung vornehme und speichere, wird das Aktualisieren der Seite nicht mit der aktualisierten Änderung in meiner CSS-Datei geladen. Ich denke, die CSS-Datei wird noch zwischengespeichert.

Ich habe versucht:

  1. STRG / F5
  2. Gehen Sie in Visual Studio 2012 zu Projekteigenschaften auf der Registerkarte "Web". Wählen Sie im Abschnitt "Aktion starten" die Option "Externes Programm starten". Fügen Sie den Pfad für Google Chrome ein oder navigieren Sie zum Pfad (Meins ist C: \ Benutzer \ xxx \ AppData \ Local \ Google \ Chrome \ Application \) chrome.exe) Geben Sie im Feld Befehlszeilenargumente -incognito ein
  3. Klicken Sie mit den Chrome-Entwicklertools auf das Symbol "Zahnrad" und aktivieren Sie "Cache deaktivieren".

Nichts scheint zu funktionieren, es sei denn, ich stoppe das Debuggen manuell (schließen Sie Chrome) und starte die Anwendung neu (beim Debuggen).

Gibt es eine Möglichkeit, Chrome zu zwingen, immer alle CSS-Änderungen neu zu laden und die CSS-Datei neu zu laden?

Update:
1. Inline-Stiländerungen in meiner ASPX-Datei werden beim Aktualisieren übernommen. Änderungen in einer CSS-Datei sind jedoch nicht möglich. 2. Da es sich um eine ASP.NET MVC4-App handelt, klicke ich auf einen Hyperlink, der ein GET ausführt. Dabei wird keine neue Anfrage für das Stylesheet angezeigt. Wenn Sie jedoch auf F5 klicken, wird die CSS-Datei neu geladen und der Statuscode (auf der Registerkarte Netzwerk) lautet 200.

duyn9uyen
quelle
4
f12 -> Netzwerk -> Rechtsklick -> Browser-Cache löschen (Ich mag es nicht, also benutze ich Firefox mit Firebug)
Thkang
Das habe ich auch gerade versucht. Es scheint nicht zu funktionieren.
duyn9uyen
Haben Sie versucht, es nach all den einfachen Rechtsklicks und Klicks zu aktualisieren?
Thkang
Ja. Ich habe auch eine Änderung in meiner ASPX-Datei vorgenommen. Es hat die Änderungen und Inline-CSS-Änderungen übernommen, nur keine Änderungen in der CSS-Datei.
duyn9uyen
Auf derselben Registerkarte im Netzwerk wird möglicherweise der Eintrag Ihrer .cssDatei angezeigt. Ich kenne asp nicht, daher kann ich nicht sicher sein, aber auf meinem zwischengespeicherten Python-Flask-Dev-Server lautet der Statuscode 304, während erneut heruntergeladene Dateien 200 haben Überprüfen Sie Ihren Statuscode und fordern Sie die Zeit an, um festzustellen, ob es sich um ein serverseitiges Problem handelt.
Thkang

Antworten:

148

Es gibt viel kompliziertere Lösungen, aber eine sehr einfache, einfache besteht darin, Ihrem CSS-Include eine zufällige Abfragezeichenfolge hinzuzufügen.

Sowie src="/css/styles.css?v={random number/string}"

Wenn Sie PHP oder eine andere serverseitige Sprache verwenden, können Sie dies automatisch mit tun time(). So wäre esstyles.css?v=<?=time();?>

Auf diese Weise ist die Abfragezeichenfolge jedes Mal neu. Wie gesagt, es gibt viel kompliziertere Lösungen, die dynamischer sind, aber zu Testzwecken ist diese Methode top (IMO).

Anson
quelle
17
Verwenden Sie dies nur nicht in der Produktion, da Sie sonst die Caching-Funktionen Ihres CSS verlieren. Das ist eine gute Sache.
Bart Calixto
3
Was ist, wenn Sie eine einseitige Anwendung verwenden und die Anwendung anweisen müssen, das CSS neu zu laden, da sich die Version geändert hat?
Nathan C. Tresch
10
@ NathanC.Tresch Sie ändern die Version, wenn sich die Version ändert, anstatt eine Zufalls- / Zeitzeichenfolge zu erstellen, die sich jedes Mal ändert. Der beste Ansatz ist die Verwendung der Prüfsumme der CSS-Datei selbst.
Bart Calixto
Können Sie diese Antwort für Anfänger klarstellen? Wie genau würden Sie "nur eine zufällige Abfragezeichenfolge hinzufügen"? Anfänger möchten auch Veränderungen in ihrer Arbeit sehen können, und die meisten von uns haben keine Ahnung, was dies bedeutet oder wie sie nach einer Antwort suchen sollen.
Randy
@randy Ich habe ein Beispiel mit PHP gegeben, in dem Sie den aktuellen Zeitstempel als Abfrageparameter rendern. Sie können nachforschen, wie Sie etwas Ähnliches mit einer beliebigen Sprache im Backend tun können. Sie können dies auch durch einen Grunz- / Schluck-Build-Schritt tun, wenn Sie diesen zur Verfügung haben.
Anson
207

So zwingen Sie Chrome, CSS und JS neu zu laden:

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

OS X: + SHIFT+R

Aktualisiert wie von @PaulSlocum in den Kommentaren angegeben (und viele bestätigt)


Ursprüngliche Antwort:

Chrome hat das Verhalten geändert. Ctrl+ Rwird es tun.

Unter OS X: +R

Wenn Sie Probleme beim erneuten Laden von CSS / JS-Dateien haben, öffnen Sie den Inspektor ( CTRL+ SHIFT+ C), bevor Sie das Neuladen durchführen.

Bart Calixto
quelle
26
Und hier drückte ich STRG + F5 wie verrückt ... Danke.
Alix Axel
3
Ein weiterer Tipp zum Ausprobieren: code-pal.com/quick-tip-clear-cache-hard-refresh-on-chrome
duyn9uyen
3
@ duyn9uyen Guter Punkt! Sieht so aus, als würden sie ihr Verhalten wieder ändern. Dies wird zur Chrome Windows-Version hinzugefügt, die auf dem Mac noch nicht verfügbar ist.
Bart Calixto
4
Strg + R funktioniert auch in Firefox. Danke, dass du mich von Random Url und anderen Dingen befreit hast.
Zeeshanef
30
STRG + R funktioniert nicht für mich, aber STRG + UMSCHALT + R macht es
Paul Slocum
139

[LESEN SIE DAS UPDATE UNTEN]

Der einfachste Weg, den ich gefunden habe, ist in den Chrome DevTools-Einstellungen. Klicken Sie oben rechts in DevTools auf das Zahnradsymbol (oder auf 3 vertikale Punkte in neueren Versionen), um das Dialogfeld "Einstellungen" zu öffnen. Aktivieren Sie dort das Kontrollkästchen: "Cache deaktivieren (solange DevTools geöffnet ist)"


UPDATE: Jetzt wurde diese Einstellung verschoben. Es befindet sich auf der Registerkarte "Netzwerk" und ist ein Kontrollkästchen mit der Bezeichnung "Cache deaktivieren". Geben Sie hier die Bildbeschreibung ein

Deepak Joy
quelle
15
Dies ist meiner Meinung nach die beste Lösung: Sie müssen nicht mit Ihrem eigenen Code herumspielen, um Ihrer CSS-URL einen zufälligen Wert zu verleihen.
Guillaume
2
Ausgezeichnete Antwort! ... Arbeitete wie ein Zauber!
Ani
1
Ich fand auch, dass dies die beste Lösung ist.
Joe Huang
3
Dies wurde in neueren Versionen von Chrome verschoben: Gehen Sie zur Registerkarte "Netzwerk" und aktivieren Sie im Header "Cache deaktivieren".
Jason Clemens
Die Methoden Strg + Umschalt + R und Umschalt + F5 funktionieren bei mir nicht - ich vermute, dass sich in Chrome kürzlich etwas geändert hat. Diese Methode funktioniert immer noch hervorragend. @JasonClemens: Die Option "Cache deaktivieren" befindet sich sowohl auf der Registerkarte "Netzwerk" als auch in den Einstellungen.
Amos M. Carpenter
11

Sie haben es mit dem Problem des Browser-Cache zu tun.

Deaktivieren Sie den Cache auf der Seite. Dadurch wird die unterstützende Seitendatei nicht im Browser / Cache gespeichert.

<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" />

Diesen Code, den Sie in das headTag der Seite, die Sie debuggen, oder in das headTag master pageIhrer Site einfügen müssen / müssen

Dadurch kann der Browser keine Dateien zwischenspeichern, eventuell werden Dateien nicht in temporären Browserdateien gespeichert, daher ist kein Cache vorhanden, sodass kein erneutes Laden erforderlich ist :)

Ich bin sicher, das wird reichen :)

MarmiK
quelle
1
Dies sollte die akzeptierte Antwort sein. Die Lösung von @anson hat bei mir nicht funktioniert.
Pierrick Martellière
8

In meinem Fall funktioniert in den Chrome DevTools-Einstellungen nur "Cache deaktivieren (solange DevTools geöffnet ist)" nicht. Sie müssen "CSS-Quellzuordnungen aktivieren" und "Generiertes CSS automatisch neu laden" aktivieren, die in der Quelle aufgeführt sind Gruppe, damit dieses Cache-Problem behoben wird.

gustavH
quelle
6

Drücken Sie SHIFT+ F5.

Es funktioniert für mich mit Chrome Version 54.

user2580062
quelle
Danke dir. Obwohl Strg-R die beliebte Antwort in diesem Thread ist, hat nur Shift-F5 für mich funktioniert (Chromium 55).
Benutzer2662680
5

Ich hatte hier das gleiche Problem! aber ich bin sicher, meine Auflösung ist besser als alle obigen Beispiele, mach das einfach,

  1. Rufen Sie die Chrome-Entwicklerkonsole auf, indem Sie F12 drücken
  2. Klicken Sie mit der rechten Maustaste auf die Schaltfläche zum erneuten Laden oben im Browser und wählen Sie "Cache leeren und hart neu laden".

Das ist es!

Optimaz ID
quelle
4

Mit macOS kann ich Chrome zwingen, die CSS-Datei neu zu laden

+ SHIFT+R

Fand diese Antwort in den Kommentaren hier begraben, aber es verdient mehr Sichtbarkeit.

AlexG
quelle
3

Die aktuelle Version von Chrome (55.x) lädt nicht alle Ressourcen neu, wenn Sie die Seite neu laden (Befehl + R) - und dies ist nicht hilfreich für das Debuggen der CSS-Datei.

Befehl + R funktioniert einwandfrei, wenn Sie nur die Dateien .html, .php, .etc debuggen möchten, und ist schneller, da es mit lokalen / zwischengespeicherten Ressourcen (.css, .js) funktioniert. Es ist nicht bequem, den Browser-Cache für jede Debug-Iteration manuell zu löschen.

Vorgehensweise zum Erzwingen des erneuten Ladens der CSS-Datei auf dem Mac (Tastaturkürzel / Chrome): Befehl + Umschalt + R.

Logikindustrie
quelle
3

Ich verwende Edge Version 81.0.416.64 (offizieller Build) (64-Bit) und basiert auf dem Chromium Open Source-Projekt.

Drücken Sie F12, um zu Dev Tools zu gelangen.
Klicken Sie auf Registerkarte Netzwerk.
Aktivieren Sie Cache deaktivieren

Geben Sie hier die Bildbeschreibung ein

Chris Catignani
quelle
2

Ich weiß, dass es eine alte Frage ist, aber wenn noch jemand nach einer neuen externen CSS / JS-Datei sucht, ist der einfachste Weg in Chrome jetzt:

  1. Wechseln Sie in DevTools zur Registerkarte Netzwerk
  2. Klicken Sie mit der rechten Maustaste auf die Ressource und wählen Sie XHR erneut spielen , um die Anforderung zu wiederholen

Stellen Sie sicher, dass die Option Cache deaktivieren ausgewählt ist, um das Neuladen zu erzwingen.

ivanhoe
quelle
2

Für macOS Chrome:

  1. Offene Entwickler - Tools cmd+ alt+i
  2. Klicken Sie in den Entwicklertools oben rechts auf drei Punkte
  3. Klicken Sie auf Einstellungen
  4. Scrollen Sie nach unten zu Network
  5. Aktivieren Disable cache (while DevTools is open)siehe Screenshot: Geben Sie hier die Bildbeschreibung ein
pbaranski
quelle
1

Warum muss die gesamte Seite aktualisiert werden? Aktualisieren Sie einfach nur CSS-Dateien, ohne die Seite neu zu laden. Dies ist sehr hilfreich, wenn Sie beispielsweise auf eine lange Antwort von DB warten müssen. Sobald Sie Daten aus der Datenbank erhalten und die Seite ausgefüllt haben, bearbeiten Sie Ihre CSS-Dateien und laden Sie sie in Chrome (oder in Firefox) neu. Dazu müssen Sie die CSS Reloader-Erweiterung installieren . Die Firefox-Version ist ebenfalls verfügbar.

Evgeni Nabokov
quelle
1

Sie können dieses Skript kopieren und in die Chrome-Konsole einfügen. Dadurch werden Ihre CSS-Skripte alle 3 Sekunden neu geladen. Manchmal finde ich es nützlich, wenn ich CSS-Stile verbessere.

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
quelle
1

Ich habe durch diesen einfachen Trick gelöst.

<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
quelle
1

Immer noch ein Problem.

Die Verwendung von Parametern wie "..css? Something = random-value" ändert nichts an meiner Kundenbetreuung. Nur Namensänderungen funktionieren.

Eine andere Einstellung zum Umbenennen von Dateien. Ich verwende URL Rewrite in IIS. Manchmal wird Helicons Isapi neu geschrieben.

Neue Regel hinzufügen.

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

Hinweis: Ich behalte mir die Verwendung von Kleinbuchstaben vor, um den Namen von der Zufallszahl zu trennen. Könnte alles andere sein.

Beispiel:

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

(Kein Stilordner, es ist nur ein Namensteil des Musters)

Ausgabecode als:

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

Weiterleiten als:

(R: 1 = Vorlage)

/template.css

Nur die Erklärung ist lang.

Jan Andersen
quelle
0

Hatte gerade dieses Problem, bei dem eine Person, die Chrome (auf einem Mac) ausführt, plötzlich das Laden der CSS-Datei beendet hat. CMD + R hat überhaupt nicht funktioniert. Ich mag die obigen Vorschläge nicht, die ein permanentes Nachladen des Produktionssystems erzwingen.

Was funktionierte, war das Ändern des Namens der CSS-Datei in der HTML-Datei (und natürlich das Umbenennen der CSS-Datei). Dies zwang Chrome, die neueste CSS-Datei abzurufen.

Richard
quelle
0

Wenn Sie Sublime Text 3 verwenden, öffnet die Verwendung eines Build-Systems zum Öffnen der Datei die aktuellste Version und bietet eine bequeme Möglichkeit zum Laden über [STRG + B]. So richten Sie ein Build-System ein, das die Datei in Chrome öffnet:

  1. Gehen Sie zu 'Tools'

  2. Bewegen Sie die Maus über "Build System". Klicken Sie unten in der Liste auf "Neues Build-System ...".

  3. Geben Sie in die Datei des neuen Buildsystems Folgendes ein:

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

** vorausgesetzt, der oben in der ersten Anführungszeichen angegebene Pfad ist der Pfad zu Chrome auf Ihrem Computer, wenn nicht einfach die Position von Chrome gefunden wird, und ersetzen Sie den Pfad in der ersten Anführungszeichenreihe durch den Pfad zu Chrom auf Ihrem Computer.

Shlok Natarajan
quelle
0

Der einfachste Weg, um Ihr Ziel zu erreichen, besteht darin , ein neues Inkognito-Fenster in Ihrem Chrome- oder privaten Fenster in Firefox zu öffnen, das standardmäßig nicht zwischengespeichert wird.

Sie können dies für Entwicklungszwecke verwenden, damit Sie keinen zufälligen Cache einfügen müssen, der Code in Ihr Projekt verhindert.

Wenn Sie IE verwenden, kann Gott Ihnen helfen!

Anarach
quelle
0

Ctrl + F5

Shift + F5

Beide arbeiten

Ashwin Balani
quelle
0

Einfachster Weg unter Safari 11.0 macOS SIERRA 10.12.6: Seite von Origin neu laden Mithilfe der Hilfe können Sie herausfinden, wo sich das Menü befindet, oder Sie können die Verknüpfungsoption (alt) + Befehl + R verwenden.

Rodolfo Pertuz
quelle
-1

Chrome/firefox/safari/IE lädt die gesamte Seite über diese Verknüpfungen neu

Ctrl+ R (ODER) Ctrl+F5

Hoffe es kann dir helfen!.

Leitender Entwickler
quelle
-1

Wenn Sie SiteGround als Hosting-Unternehmen verwenden und keine der anderen Lösungen funktioniert hat, versuchen Sie Folgendes:

Gehen Sie im cPanel zu "SITE IMPROVEMENT TOOLS" und klicken Sie auf "SuperCacher". Klicken Sie auf der folgenden Seite auf die Schaltfläche "Cache leeren".

Don
quelle
Diese Antwort hat nichts mit Visual Studio oder dem Chrome-Browser zu tun. Auch diese Frage wurde vor 4 Jahren gestellt und hatte bereits eine akzeptierte Lösung. Bitte versuchen Sie zu vermeiden, dass Fragen nach oben stoßen, indem Sie Antworten darauf geben, es sei denn, die Frage wurde nicht bereits als gelöst markiert oder Sie haben eine neue und verbesserte Lösung für das Problem gefunden. In der Dokumentation zum Schreiben großartiger Antworten finden Sie einige Tipps, wie Sie Ihre Antworten zählen lassen können :)
Obsidian Age
Hallo Obsidian. Entschuldigen Sie. Es ist das erste Mal, dass ich hier gepostet habe. Ich habe lange und intensiv nach einer Lösung für dieses Problem gesucht. Die akzeptierte Antwort hat bei mir nicht funktioniert. Als ich eine Lösung fand (durch meine eigene Forschung), wollte ich sie "vorwärts zahlen", indem ich allen anderen half, die auf dieses Problem stoßen - selbst wenn es vier Jahre alt ist. Ich bin mir nicht sicher, warum meine Aktion hier einen Schlag auf das Handgelenk rechtfertigen würde, da es mir legitim erscheint. Trotzdem werde ich in Zukunft sicher vorsichtig sein (wirklich - ich meine das nicht auf eine bissige Art und Weise). Danke -Don.
Don