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

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.

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

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.

[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".

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

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.

Drücken Sie SHIFT+ F5.

Es funktioniert für mich mit Chrome Version 54.

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!

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.

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.

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

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.

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:

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.

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

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>

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.

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.

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.

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!

Ctrl + F5

Shift + F5

Beide arbeiten

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.

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

Ctrl+ R (ODER) Ctrl+F5

Hoffe es kann dir helfen!.

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