Wie kann man den Skript-Debugger von Chrome zwingen, Javascript neu zu laden?

244

Ich mag die Möglichkeit, Javascript im Chrome-Debugger zu bearbeiten, sehr. Ich finde jedoch, dass es sehr problematisch sein kann, den Debugger dazu zu bringen, das JavaScript erneut vom Server abzurufen.

Manchmal muss ich so weit gehen, dass nur der Debugger geschlossen und der Frame neu geladen wird. Aber manchmal (ein dI kann nicht feststellen, unter welchen Bedingungen dies geschieht) muss ich meinen temporären Internet-Cache leeren. Manchmal schwöre ich, ich muss Chrome vollständig schließen, dann den Cache leeren und dann die Seite laden, bevor der Debugger mir endlich das aktuellste Skript anzeigt.

(Hinweis: Das Skript wird vom Webserver nicht zwischengespeichert.)

Ich habe mich gefragt, ob jemand eine schnelle und einfache Möglichkeit kennt, den Debugger anzuweisen, sein gesamtes Javascript ungültig zu machen und alles beim erneuten Laden der Seite neu abzurufen.

Chris Fewtrell
quelle
1
Manchmal muss ich sogar IIS Express neu starten, damit die Dinge richtig neu geladen werden.
Chris O

Antworten:

330

Versuchen Sie während der Entwicklung Ihres Skripts, den Chrome-Cache zu deaktivieren.

Wenn Sie die Seite neu laden, sollte das JavaScript jetzt aktualisiert werden.


Chrome circa 2011

Einstellungen öffnen Deaktivieren Sie den Cache


Chrom um 2018

Einstellungen öffnen Deaktivieren Sie den Cache

Sie können auch auf der Registerkarte Netzwerk darauf zugreifen:

Registerkarte Netzwerk

adrianbanks
quelle
8
Gilt dies also immer oder nur, wenn der Debugger geöffnet ist?
PilotBob
7
nur wenn die Dev Tools geöffnet sind
Karolis
11
Ich hatte das die ganze Zeit eingestellt und jetzt stecke ich plötzlich bei einer bestimmten Datei fest. Hat jemand eine Lösung gefunden?
IronicMuffin
5
Dies hat meinem Leben nur einige Jahre hinzugefügt. Ich habe CMD + SHIFT + R ausprobiert, aber das hat es nicht geschafft. Vielen Dank
Kevin Zych
7
Beachten Sie für diejenigen, die in jüngerer Zeit zu dieser Frage kommen, dass sich das Einstellungsmenü außerhalb des Menüs mit drei vertikalen Punkten in den Entwicklertools befindet. Dort können Sie das Kontrollkästchen aktivieren, um den Cache zu deaktivieren.
Scott C Wilson
136

Geben Sie hier die Bildbeschreibung ein

Das oben gezeigte Kontextmenü kann durch Klicken mit der rechten Maustaste / Drücken und Halten der Schaltfläche " Neu laden" aufgerufen werden , während Chrome Dev Tools geöffnet wird .

Leerer Cache und hartes Neuladen funktionieren am besten für mich.

Ein weiterer Vorteil: Diese Option lässt alle anderen geöffneten Registerkarten und Website-Daten unberührt. Es wird nur die aktuelle Seite neu geladen und gelöscht.

Bishoy Hanna
quelle
5
Das ist besonders nützlich, weil es einfach zu erklären ist. Ich hatte das Problem, dass ein Kunde die auf seiner Website vorgenommenen Änderungen nicht sah. Drücken Sie F12, klicken Sie mit der rechten Maustaste auf die Schaltfläche zum erneuten Laden und wählen Sie "Cache leeren" und "Hard Reload". Ich war fertig, als zu diesem Kommentar :-)
Gull_Code
Es ist das beste Chrom-Feature :), jederzeit Kumpel.
Bishoy Hanna
1
Vielen Dank! Ich habe versucht herauszufinden, warum der Reload-Button mir manchmal ein Menü gab und manchmal nicht.
Bilderstürmer
1
Ich hatte keine Probleme mit Strg + Umschalt + R beim erneuten Laden von Javascript-Dateien, aber dies würde keine aktualisierten Inhalte zurückbringen, die in HTML-Dateien bereitgestellt wurden. Leerer Cache und Hard Reload haben den Trick dafür gemacht.
S. Baggy
Verwenden Sie am besten diesen leeren Cache und laden Sie ihn neu
hoogw
34

Sie können eine bestimmte Datei jederzeit wie folgt löschen:

  1. Öffnen DevTools
  2. Klicken Sie auf die Registerkarte Quellen
  3. Finden Sie Ihr Skript / Bild / Datei
  4. Überprüfen Sie im rechten Bereich, ob Ihre Datei aktuell ist

Wenn nicht:

  1. Klicken Sie mit der rechten Maustaste auf die Ressource im linken Bereich und wählen Sie "Link in neuem Tab öffnen".
  2. Erzwingen Sie ein erneutes Laden der Ressource mit den oben genannten Methoden. (Siehe das Beispiel von @Bishoy Hanna)

Dies ist sehr praktisch, wenn Sie Ressourcen in Frames haben und diese CTRL+F5nicht zwangsweise aktualisieren.

Steve Tauber
quelle
1
wahr. Drücken von STRG + F5 = Aktuelle Seite der Cache-Aktualisierung
löschen
Ich habe keine Registerkarte Ressourcen.
Mike W
@ MikeW es wurde in Quellen umbenannt - Ich habe die Antwort aktualisiert
Steve Tauber
12

Shift+ F5löscht schnell den Cache.

Peter Kelly
quelle
18
Ich fürchte, Strg-F5 schneidet den Senf nicht. Die alte Javascript-Datei verbleibt im Debugger.
Chris Fewtrell
9

Für Google Chrome ist es nicht Ctrl+ F5. Es ist Shift+ F5, um den aktuellen Cache zu leeren! Für mich geht das !

RPDeshaies
quelle
Warum ? Ich verstehe nicht, was der Unterschied zwischen dem und einem Kommentar ist. Am Ende wird die nützlichste Frage oben im Beitrag angezeigt.
RPDeshaies
2
Der Fragesteller hat zu keinem Zeitpunkt Strg-F5 erwähnt , daher ist Ihre Antwort per Definition keine Antwort auf die vom Fragesteller gestellte Frage, sondern eher ein Kommentar , eine Korrektur der Antworten der anderen Personen, und sie sollte so behandelt werden.
Edward A
9

Hier ist eine Verknüpfung zu DevTools:

  1. F12 um Chrome DevTools zu öffnen
  2. F1 um DevTools-Einstellungen zu öffnen
  3. Überprüfen Sie Disable Cache (während DevTools geöffnet ist) , wie unten dargestellt:

Geben Sie hier die Bildbeschreibung ein

Hinweis: Aktualisiert gemäß Dimis Kommentar. Sie neigen dazu, es zu verschieben. Lassen Sie mich den Beitrag wissen oder aktualisieren, wenn Sie feststellen, dass er geändert wurde.

Tony L.
quelle
3

Unter Windows würde Ctrl+ Shift+ rdas Neuladen des Skripts in Chrome erzwingen.

Vijay Nandwana
quelle
2

Wenn Sie lokale Änderungen an einem Javascript in den Entwicklertools vornehmen, müssen Sie sicherstellen, dass Sie diese Änderungen deaktivieren, bevor Sie die Seite neu laden.

Klicken Sie auf der Registerkarte Quellen bei geöffnetem Skript mit der rechten Maustaste in Ihr Skript und klicken Sie im Kontextmenü auf die Option "Lokale Änderungen". Daraufhin wird die Liste der Skripte angezeigt, in denen Sie Änderungen gespeichert haben. Wenn Sie es in diesem Fenster sehen, behalten die Entwicklertools Ihre lokale Kopie immer bei, anstatt sie vom Server zu aktualisieren. Klicken Sie auf die Schaltfläche "Zurücksetzen" und aktualisieren Sie sie erneut. Sie sollten die neue Kopie erhalten.

Steve K.
quelle
1

Es scheint, als würde der Chrome-Debugger Quelldateien in den Speicher laden und sie trotz Browser-Cache-Updates nicht loslassen, dh er hat einen eigenen Cache, abgesehen vom nicht synchronisierten Browser-Cache. Zumindest ist dies der Fall, wenn Sie mit zugeordneten Quelldateien arbeiten (ich debugge Typoskriptquellen). Nachdem Sie den Browser-Cache erfolgreich aktualisiert und überprüft haben, indem Sie direkt zur Quelldatei navigieren, laden Sie die aktualisierte Datei herunter. Sobald Sie die Datei im Debugger erneut öffnen, wird die alte Datei unabhängig von der Version aus dem normalen Browser-Cache zurückgegeben. Sehr ärgerlich.

Ich würde dies als einen Fehler in Chrom betrachten. Ich benutze die Version 46.0.2490.71 m.

Das einzige, was hilft, ist das Neustarten von Chrome (schließen Sie alle Chrome-Browser).

David Fahlander
quelle
0

Wenn die Dateien, die Sie laden, zwischengespeichert werden und die von Ihnen vorgenommenen Änderungen nicht im Code enthalten sind, gibt es zwei Möglichkeiten, wie Sie damit umgehen können

  1. Leere den Cache, wie alle sagten

  2. Wenn Sie Cache möchten und nur die Dateien neu geladen werden müssen, können Sie zur Registerkarte Netzwerk des Entwicklertools gehen und löschen, was geladen wurde. Das nächste Mal wird es nicht aus dem Cache geladen. Sie werden Ihre letzten Änderungen haben.

iamshravan
quelle
0

Wenn Sie einen lokalen Server unter Apache ausführen, können Probleme mit dem Caching auftreten. Dies passierte mir, als ich einen Apache-Server unter Vagrant (in virtualbox) laufen ließ.

Fügen Sie einfach die folgenden Zeilen zu Ihrer Konfigurationsdatei ( /etc/httpd/conf/httpd.confoder einer gleichwertigen Datei ) hinzu:

#Disable image serving for network mounted drive
EnableSendfile off

Beachten Sie, dass es sich lohnt, die Konfigurationsdatei zu durchsuchen, um festzustellen, ob sie EnableSendfileauf eine onandere Stelle eingestellt ist.

MattCochrane
quelle
0

Es gibt auch 2 (schnelle) Problemumgehungen:

  1. Verwenden Sie beim Debuggen den Inkognito-Modus, schließen Sie das Fenster und öffnen Sie es erneut.
  2. Löschen Sie Ihren Browserverlauf
Vladimir verleg
quelle
0

Durch das Deaktivieren von Haltepunkten wurde das neue Skript für mich geladen.

Mike W.
quelle
0

Meiner Meinung nach ist es am einfachsten, in einer "privaten Browsersitzung" von Chrome zu arbeiten, um sicherzustellen, dass Ihre Javascript-Dateien nicht aus dem Cache stammen.

scottbiker
quelle