it-swarm.com.de

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

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

Ich habe versucht:

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

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

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

Aktualisieren:
1. Inline-Stiländerungen in meiner ASPX-Datei werden bei der Aktualisierung übernommen. Änderungen in einer .css-Datei werden jedoch nicht vorgenommen. 2. Es ist eine ASP.NET MVC4-App, also klicke ich auf einen Hyperlink, der ein GET ausführt. Dabei sehe ich keine neue Anfrage für das Stylesheet. Wenn Sie jedoch auf F5 klicken, wird die .css-Datei erneut geladen, und der Statuscode (auf der Registerkarte "Netzwerk") ist 200.

131
duyn9uyen

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

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

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

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

131
anson

So erzwingen Sie das erneute Laden von CSS und JS durch Chrome:

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)


rsprüngliche Antwort:

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

Unter OS X:  + R

Wenn Sie Probleme beim Neuladen von CSS/JS-Dateien haben, öffnen Sie den Inspektor (CTRL + SHIFT + C) vor dem Neuladen.

173
Bart Calixto

[LESEN SIE DAS UPDATE UNTEN]

Die einfachste Methode, die ich gefunden habe, ist in 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. Markieren Sie dort das Kästchen: "Cache deaktivieren (während DevTools geöffnet ist)"


UPDATE: Diese Einstellung wurde nun verschoben. Es befindet sich auf der Registerkarte "Netzwerk". Es ist ein Kontrollkästchen mit der Bezeichnung "Cache deaktivieren" .  enter image description here

118
Deepak Joy

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

Deaktivieren Sie den Cache auf der Seite selbst. Das speichert die unterstützende Datei der Seite nicht im Browser/Cache.

<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 müssen/müssen Sie im head-Tag der Seite, die Sie debuggen, oder im head-Tag von master page Ihrer Site einfügen

Dadurch kann der Browser keine Dateien zwischenspeichern. Dateien werden möglicherweise nicht in temporären Dateien des Browsers gespeichert. Daher ist kein Cache erforderlich, so dass kein Neuladen erforderlich ist.

Ich bin mir sicher, das wird es tun :)

9
MarmiK

In meinem Fall setzen Sie in den Chrome DevTools-Einstellungen einfach "Cache deaktivieren (während DevTools geöffnet ist)" nicht. Es muss "CSS-Quellkarten aktivieren" und "Generiertes CSS automatisch neu laden" aktiviert werden Gruppe, um dieses Cache-Problem zu beseitigen.

8
gustavH

Drücken Sie SHIFT+F5.

Es funktioniert für mich mit Chrome Version 54.

6
user2580062

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

 + SHIFT + R

Fanden diese Antwort in den Kommentaren begraben hier , aber es hat mehr Aufmerksamkeit verdient.

4
AlexG

ich hatte hier das gleiche Problem! aber ich bin sicher, meine auflösung ist besser als alle oben genannten beispiele.

  1. Rufen Sie die Chrome-Entwicklerkonsole auf, indem Sie die Taste F12 drücken
  2. Klicken Sie mit der rechten Maustaste auf die Reload-Schaltfläche oben im Browser und wählen Sie "Leeren Cache und Hard Reload".

Das ist es 

4
Optimaz ID

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

Befehl + R funktioniert gut, wenn Sie nur die Dateien .html, .php und .etc debuggen möchten, und ist schneller, da er mit lokalen/zwischengespeicherten Ressourcen (.css, .js) arbeitet Debug-Iteration ist nicht bequem.

Vorgehensweise zum Erzwingen des Neuladens der .css-Datei auf einem Mac (Tastenkombination/Chrome): Befehl + Umschalt + R

3
Logic Industry

Für macOS Chrome:

  1. Öffnen Sie die Entwicklertools cmd+alt+i
  2. Klicken Sie in den Entwicklertools oben rechts auf drei Punkte
  3. Klicken Sie auf Einstellungen
  4. Scrolle runter zu Network
  5. Disable cache (while DevTools is open) aktivieren, siehe Screenshot: enter image description here
2
pbaranski

Ich weiß, dass dies eine alte Frage ist, aber wenn jemand noch sucht, wie er nur eine einzige externe css/js-Datei lädt, ist der einfachste Weg jetzt in Chrome:

  1. Gehen Sie zu Registerkarte Netzwerk in DevTools 
  2. Klicken Sie mit der rechten Maustaste auf die Ressource und wählen Sie Replay XHR , um die Anfrage zu wiederholen

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

2
ivanhoe

Sie können dieses Skript in die Chrome-Konsole einfügen. Dadurch werden Ihre CSS-Skripts 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);
1
Martin Vseticka

Immer noch ein Problem. 

Die Verwendung von Parametern wie "..css? Etwas = zufälliger Wert" ändert nichts an meinem Kundenservice. Nur Namensänderungen funktionieren. 

Eine weitere Einstellung zur Umbenennung der Datei. Ich verwende URL Rewrite in IIS. Manchmal schreibt Helicon Isapi Rewrite. 

Neue Regel hinzufügen.

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

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

Beispiel:

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

(Kein Stilordner ist nur ein Teil 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. 

1
Jan Andersen

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 eine lange Antwort von der DB abwarten müssen. Wenn Sie Daten aus der Datenbank abrufen und die Seite auffüllen, bearbeiten Sie die CSS-Dateien und laden Sie sie in Chrome (oder Firefox) neu. Dazu müssen Sie die CSS Reloader-Erweiterung installieren. Firefox-Version ist ebenfalls verfügbar.

1
Evgeni Nabokov

Ich habe 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>
0

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

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

0
Don

Ich hatte gerade dieses Problem, als eine Person, die Chrome (auf einem Mac) ausführte, plötzlich die CSS-Datei nicht mehr lädt. CMD + R hat überhaupt nicht funktioniert. Ich mag die obigen Vorschläge nicht, die das permanente 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.

0
Richard

Wenn Sie Sublime Text 3 verwenden, wird beim Öffnen der Datei mit einem Build-System die aktuellste Version geöffnet. Sie können sie bequem über [STRG + B] .__ laden. Ein Build-System einrichten, das die Datei in Chrome öffnet :

  1. Gehe zu "Tools"

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

  3. Geben Sie in der neuen Build-Systemdatei Folgendes ein:

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

** vorausgesetzt, der Pfad, der oben in den ersten Anführungszeichen angegeben wurde, ist der Pfad zu dem Ort, an dem sich chrome auf Ihrem Computer befindet, wenn er nicht einfach die Position von chrome ermittelt und den Pfad in der ersten Anführungszeichengruppe durch den Pfad zu ersetzt Chrom auf Ihrem Computer. 

0
Shlok Natarajan

Ctrl + F5

Shift + F5

Beide arbeiten

0
Ashwin Balani

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

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

Wenn Sie IE verwenden, kann Gott Ihnen helfen!

0
Anarach

Einfachste Möglichkeit unter Safari 11.0 macOS SIERRA 10.12.6: Seite neu laden Von Origin aus können Sie mithilfe der Hilfe herausfinden, wo sich das Menü befindet, oder Sie können die Tastenkombination (alt) + Befehlstaste + R verwenden.

0
Rodolfo Pertuz