Chrome Dev Tools - Ändern Sie Javascript und laden Sie es neu

192

Ist es möglich, das JavaScript einer Seite zu ändern und die Seite dann neu zu laden, ohne die geänderte JavaScript-Datei neu zu laden (und damit Änderungen zu verlieren)?

javascript google-chrome-devtools CDT
quelle

Antworten:

216

Dies ist eine kleine Umgehung, aber eine Möglichkeit, dies zu erreichen, besteht darin, am Anfang der Javascript-Datei oder des Javascript-Blocks, den Sie bearbeiten möchten, einen Haltepunkt hinzuzufügen.

Wenn Sie dann neu laden, wird der Debugger an diesem Haltepunkt angehalten, und Sie können alle gewünschten Änderungen an der Quelle vornehmen, die Datei speichern und den Debugger dann über den geänderten Code ausführen.

Aber wie jeder gesagt hat, werden die Änderungen beim nächsten Neuladen weg sein - zumindest können Sie damit eine leicht modifizierte JS-Clientseite ausführen.

Ashley Schroder
quelle
10
Es stellte sich heraus, dass dies die Antwort war, nach der ich gesucht hatte. Setzen Sie einen Haltepunkt in die erste Zeile des Javascript-Codes. Fügen Sie dann, wenn die Unterbrechung eintritt, Ihren geänderten Code dort ein. Pause und es funktioniert!
Nicholas Blasgen
Wie können Sie dort Code bearbeiten oder einfügen? Ich sehe diese Funktionalität definitiv nicht in der Chrome-Konsole. Ich kann JS / HTML im Abschnitt "Elemente" bearbeiten, dies wird jedoch nicht automatisch neu geladen. Aber an dem Ort, an dem Haltepunkte gesetzt sind, scheint das nur lesbar zu sein
Josh Sutterfield
Leider ist dies immer noch keine gute Lösung. Der von Ihnen hinzugefügte Code ist in der Konsole nicht verfügbar. Das Hinzufügen var foo = 'bar'eines Skripts wird beispielsweise nicht foofür die Konsole verfügbar gemacht.
AgmLauncher
Was ist mit externen Skripten los? Haltepunkte scheinen von ihnen zu verschwinden.
OlehZiniak
Dies funktioniert so lange, wie Sie extern geladene Skripte ändern möchten. Weder Chrome noch die FireFox-Debugging-Tools erlauben es, das Inline-Javascript zu ändern, selbst wenn seine Ausführung durch einen Haltepunkt unterbrochen wird.
Marek
146

Tolle Neuigkeiten, das Update kommt im März 2018, siehe diesen Link: https://developers.google.com/web/updates/2018/01/devtools

"Mit lokalen Überschreibungen können Sie Änderungen in DevTools vornehmen und diese Änderungen über das Laden von Seiten hinweg beibehalten. Bisher gingen alle Änderungen, die Sie in DevTools vorgenommen haben, beim erneuten Laden der Seite verloren. Lokale Überschreibungen funktionieren für die meisten Dateitypen

Wie es funktioniert:

  • Sie geben ein Verzeichnis an, in dem DevTools Änderungen speichern soll. Wenn Sie Änderungen in DevTools vornehmen, speichert DevTools eine Kopie der geänderten Datei in Ihrem Verzeichnis.
  • Wenn Sie die Seite neu laden, stellt DevTools die lokale, geänderte Datei und nicht die Netzwerkressource bereit.

So richten Sie lokale Überschreibungen ein:

  1. Öffnen Sie das Quellenfenster.
  2. Öffnen Sie die Registerkarte Überschreibungen.
  3. Klicken Sie auf Setup Overrides.
  4. Wählen Sie das Verzeichnis aus, in dem Sie Ihre Änderungen speichern möchten.
  5. Klicken Sie oben in Ihrem Ansichtsfenster auf Zulassen, um DevTools Lese- und Schreibzugriff auf das Verzeichnis zu gewähren.
  6. Nehmen Sie Ihre Änderungen vor. "

UPDATE (19. März 2018): Hier finden Sie ausführliche Live-Erklärungen: https://developers.google.com/web/updates/2018/01/devtools#overrides

Nico
quelle
12
Mit der Veröffentlichung von Chrome 65 sollte dies die neu akzeptierte Antwort sein. (Funktionalität war bereits in Chrome Canary verfügbar)
Micros
1
Ich habe eine Datei "a.js? Ver = 1.2". Es wird im Überschreibungsordner als "a.js" gespeichert und nicht als Überschreibung geladen. Funktioniert es nicht, wenn Parameter vorhanden sind? Gibt es eine Problemumgehung?
Ralf
Funktioniert wie vorgesehen, muss sich aber um eine Sache kümmern. Sie müssen Überschreibungskonfigurationen löschen oder lokal geänderte Dateien löschen (die in dem Ordner gespeichert sind, den Sie beim Konfigurieren von Überschreibungen angegeben haben), sobald Sie Ihre ursprünglichen js laden möchten.
Muhammad Murad Haider
61

Mit der Erweiterung Resource Override können Sie genau das tun:

  • Erstellen Sie eine Dateiregel für die URL, die Sie ersetzen möchten
  • Bearbeiten Sie die js / css / etc in der Erweiterung
  • lade so oft du willst nach :)
Laktak
quelle
1
Hat mir den Trick getan, danke. Ich habe vor dieser Erweiterung Fiddler für Windows verwendet. Im Moment kann ich Remote-Dateien auf jeder Plattform debuggen.
Ahmad Alfy
Ich verstehe die Software nicht. Kann jemand erklären, wie genau ich sie einrichten muss?
Schwarz
0

Ich weiß, dass dies nicht die Antwort auf die genaue Frage ist (Chrome Developer Tools), aber ich verwende diese Problemumgehung mit Erfolg: http://www.telerik.com/fiddler

(ziemlich sicher, dass einige der Webentwickler bereits über dieses Tool Bescheid wissen)

  1. Speichern Sie die Datei lokal
  2. Nach Bedarf bearbeiten
  3. Profitieren!

Geben Sie hier die Bildbeschreibung ein

Vollständige Dokumente: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Ich hätte es lieber in Chrome als Flag implementiert preserve after reload, kann dies jetzt nicht, Foren und Diskussionsgruppen im Unternehmensnetzwerk blockiert :)

Mars Robertson
quelle
-8

Ja, öffnen Sie einfach die Registerkarte "Quelle" in den Entwicklertools und navigieren Sie zu dem Skript, das Sie ändern möchten. Nehmen Sie Ihre Anpassungen direkt im Fenster "dev tools" vor und drücken Sie dann Strg + s, um das Skript zu speichern. Sie müssen wissen, dass die neuen js verwendet werden, bis Sie die gesamte Seite aktualisieren.

Jackbox
quelle
Welche Version von Chrom? Ja, Sie können den Inhalt eines Skripts "bearbeiten" (jedoch keine Skripte auf der Seite selbst), aber Änderungen haben keine Auswirkungen. Mit Strg-s / Speichern können Sie das Skript nur lokal speichern (als Strg-wie in) das Hauptfenster).
Davidkonrad
Ich verwende Version 34 - Wenn ich ein Skript bearbeite, z. B. ein console.log zu einem Klickereignis hinzufüge (bereits verbunden) und speichere, gibt die Konsole die folgende Meldung aus: "Neukompilierung und Aktualisierung erfolgreich." - nachdem. Wenn ich das Klickereignis auslöse, erhalte ich die Protokollausgabe in der Konsole.
Jacksbox
Wenn Sie die Seite neu laden, wird die lokal geänderte Datei anscheinend nicht verwendet.
Jake Wilson
32
Sie hatten mich bei "Ja" ... aber dann haben Sie mich bei "Bis Sie die ganze Seite aktualisieren" verloren ....
Cool Blue