Ist es möglich, das JavaScript einer Seite zu ändern und dann die Seite neu laden, ohne die geänderte JavaScript-Datei neu zu laden (und damit Änderungen zu verlieren)?Chrome Dev Tools - Ändern Sie Javascript und reloaden
Antwort
Dies ist ein bisschen eine Arbeit herum, aber eine Möglichkeit, die Sie erreichen können, ist, indem Sie einen Haltepunkt am Anfang der Javascript-Datei oder Block hinzufügen, die Sie manipulieren möchten.
Anschließend wird der Debugger beim erneuten Laden an diesem Haltepunkt angehalten, und Sie können die gewünschten Änderungen an der Quelle vornehmen, die Datei speichern und anschließend den Debugger über den geänderten Code ausführen.
Aber wie jeder gesagt hat, nächste laden die Änderungen werden weg sein - zumindest lassen Sie uns einige leicht modifizierte JS-Client-Seite ausführen.
Ja, öffnen Sie einfach die Registerkarte "Quelle" in den Dev-Tools und navigieren Sie zu dem Skript, das Sie ändern möchten. Nehmen Sie Ihre Anpassungen direkt im dev tools-Fenster vor und drücken Sie dann Strg + s, um das Skript zu speichern - wissen Sie, dass die neue js verwendet wird, bis Sie die gesamte Seite aktualisieren.
Welche Version von Chrom? Ja, Sie können‚Bearbeiten‘der Inhalt eines Skripts (keine Skripts auf der Seite selbst obwohl), aber Änderungen haben keine Auswirkungen, und ctrl -s/speichere nur, damit du das Skript lokal speichern kannst (als ctrl-wie im Hauptfenster) – davidkonrad
Ich benutze Version 34 - wenn ich ein Skript bearbeite zB ein console.log zu einem click-Event (bereits bond) hinzufüge und speichere gibt die Konsole folgende Meldung aus: "Neukompilierung und Aktualisierung erfolgreich." - Wenn ich das Klickereignis auslöst, erhalte ich die Protokollausgabe in der Konsole. – jacksbox
Wenn Sie die Seite neu laden, scheint sie die lokal geänderte Datei nicht zu verwenden. –
Die Resource Override Erweiterung ermöglicht es Ihnen, genau das zu tun:
- eine Datei Regel für die gewünschte URL erstellen
- bearbeiten die js/css/etc in der Verlängerung
- reload so oft ersetzen wie Sie wollen :)
Hat der Trick zu mir, danke. Früher habe ich Fiddler für Windows vor dieser Erweiterung benutzt. Im Moment kann ich entfernte Dateien auf jeder Plattform debuggen. –
Danke. Cooles Zeug. – TiSer
ich weiß, es ist nicht der asnwer auf die genaue Frage (Chrome Developer tools), aber ich bin mit dieser Problemumgehung mit Erfolg: http://www.telerik.com/fiddler
(ziemlich sicher, dass einige der Web-Entwickler bereits über dieses Tool kennen)
- Speichern Sie die Datei lokal
- bearbeiten je nach Bedarf
- Profit!
Voll docs: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder
PS. Ich würde es eher in Chrome als Flag preserve after reload
implementiert haben, kann dies jetzt nicht tun, Foren und Diskussionsgruppen auf Firmennetzwerk blockiert :)
Große Nachrichten, wird das Update März 2018 kommen, sehen Sie diesen Link: https://developers.google.com/web/updates/2018/01/devtools
„Lokale Überschreibungen können Sie Änderungen in DevTools machen, und halten Sie diese Änderungen auf Seite geladen wird. Bisher alle Änderungen, die Sie in DevTools gemacht würde verloren gehen, wenn Sie die Seite neu geladen. Lokale Überschreibungen arbeiten für die meisten Dateitypen
Wie es funktioniert:
- Sie geben ein Verzeichnis an, in dem DevTools Änderungen speichern soll. Wenn Sie in DevTools Änderungen vornehmen, speichert DevTools eine Kopie der modifizierten Datei in Ihrem Verzeichnis.
- Wenn Sie die Seite neu laden, bedient DevTools die lokale, geänderte Datei und nicht die Netzwerkressource.
- Öffnen Sie die Quellen-Panel:
Um lokale Überschreibungen einzurichten.
Mit der Veröffentlichung von Chrome 65 sollte dies die neue akzeptierte Antwort sein. (Funktionalität war bereits in Chrome Canary verfügbar) – Micros
Es stellte sich heraus, dass dies die Antwort war, die ich suchte. Platzieren Sie einen Haltepunkt in der ersten Zeile des JavaScript-Codes. Wenn der Fehler auftritt, fügen Sie den geänderten Code ein. Unpause und es funktioniert! –
'+ 1' das sollte die Antwort sein! –
Dies ist eine gute Problemumgehung. –