Bearbeiten von Javascript mit Chrome Developer Tools
Lesezeit: 5 Minuten
cooperia
Ich versuche, Javascript auf einer Website mit den Entwicklertools von Chrome zu bearbeiten. Ich habe ungefähr 30 Berichte darüber gelesen, wie man das macht, und mir ein paar Videos angesehen. Tatsache ist, wenn ich auf die Registerkarte “Quellen” gehe und die Datei öffne, die ich bearbeiten möchte, kann ich nichts dagegen tun. Gibt es einen Schritt, den ich vermisse?
Ich kann Unterbrechungspunkte erstellen, schrittweise durchlaufen usw. … Ich kann nur nicht bearbeiten. Wurde diese Funktion kürzlich entfernt?
Über die Konsole kann ich problemlos telefonieren. Ich kann einfach nichts bearbeiten.
– cooperia
26. September 2012 um 1:17 Uhr
Sie können lokale Funktionen und Variablen überschreiben, aber es gibt keine Möglichkeit, Änderungen an einer Datei aus den Entwicklungstools zu speichern. Dafür benötigen Sie noch einen externen Editor.
– Geis
26. September 2012 um 1:21 Uhr
Eigentlich kann ich CSS-Dateien bearbeiten, aber kein in eine PHP-Datei eingebettetes Skript. >.>
– cooperia
26. September 2012 um 1:25 Uhr
Nun, ich kann mit Opera machen, was ich will. Problem irgendwie gelöst.
– cooperia
26. September 2012 um 1:54 Uhr
@cooperia fügen Sie Ihren JS-Code in eine *.js-Datei ein, dann können Sie ihn in Chrome in Echtzeit bearbeiten und ausführen.
– Mahn
26. September 2012 um 2:08 Uhr
Ich weiß, dass diese Frage veraltet ist, aber ich hatte gerade ein ähnliches Problem und habe die Lösung gefunden.
Wenn Sie die Datei verschönert haben, lässt Chrome keine Bearbeitungen zu. Ich habe es deaktiviert und konnte es bearbeiten. Wetten, dass dies Ihr Problem ist/war.
Ja, das hat geholfen, danke @raddevon, ich kann sie jetzt bearbeiten, aber es passiert kein Effekt auf der Seite
– ElieH
6. Juni 2013 um 23:19 Uhr
Für andere, die nach diesem Thema suchen: Ich hatte Prettify auf OFF gesetzt, konnte aber immer noch nicht bearbeiten. Ein- und wieder ausschalten hat geholfen. (Danke an IT Crowd für diesen Rat 😉 )
– Drkawashima
22. Oktober 2013 um 12:43 Uhr
Fortsetzung: Nein. Es stellt sich heraus, dass ich das gleiche Problem wie @raddevon habe. Vielleicht ein Bug in Chrome. Sie können das Skript bearbeiten und speichern und beim Debuggen Haltepunkte darin treffen. Das tatsächlich ausgeführte Skript ist jedoch immer noch die ursprüngliche, nicht bearbeitete Version. Beispiel: Ich habe das Skript bearbeitet, jede einzelne Zeile kommentiert, konnte das Skript aber trotzdem ausführen, Haltepunkte in den Zeilen treffen usw. Die bearbeitete Version läuft also nicht einmal, sondern wird nur angezeigt … Natürlich starte ich das Skript neu auf alle möglichen Arten ohne Wirkung
– Drkawashima
22. Oktober 2013 um 13:19 Uhr
Als Randnotiz, wenn Sie verschönern, dann kopieren und wieder in die Originaldatei einfügen, wird es eine verschönerte Originaldatei sein, die bearbeitet werden kann.
– Eoin
22. August 2018 um 13:24 Uhr
@Eoin Wunderbar! Das hat voll und ganz funktioniert. Und mit der „Local Overrides“-Funktionalität funktioniert das perfekt. Danke für den Tipp 🙂
– Xan-Kun Clark-Davis
5. März 2020 um 1:25 Uhr
Sie können Javascript in den Entwicklertools auf der Registerkarte “Quellen” bearbeiten, ABER es erlaubt Ihnen nur, Javascript in seiner eigenen Datei zu bearbeiten. In eine HTML- (oder PHP-) Datei eingebettete Skripte bleiben schreibgeschützt.
Ich verwende Chrome unter Linux und kann das Javascript immer noch nicht bearbeiten, selbst wenn es sich um eine einzelne .js-Datei handelt.
– Rooppunk
11. März 2013 um 18:01 Uhr
Leicht interessanter Hinweis: Das Ein-/Ausschalten von Pretty Print (das “{ }”-Symbol) ermöglicht die Bearbeitung von eingebetteten js, aber die Änderungen werden nicht wirksam, also ist es immer noch nicht das, wonach wir suchen. (Chrom 29)
– Patrick
18. September 2013 um 7:27 Uhr
Das musste ich wissen. Vielen Dank.
– geeves
11. Oktober 2018 um 19:25 Uhr
Es hat einige Einschränkungen:
muss eine JS-Datei sein. können keine Tags in eine HTML-Seite eingebettet werden.
es kann nicht verschönert werden.
Wenn Sie die obige Richtlinie befolgt haben und die Änderungen auf der Registerkarte „Quellen“ einfach nicht wirksam werden, versuchen Sie, mit der rechten Maustaste auf die bearbeitete Datei in der Baumansicht auf der linken Seite zu klicken und „Speichern“ auszuwählen. Möglicherweise wird ein Dialogfeld angezeigt, in dem Sie aufgefordert werden, eine lokale Datei zu speichern, aber Sie können einfach abbrechen. Erst an diesem Punkt zeigt der Bearbeitungsverlauf von Chrome endlich, dass die Bearbeitung stecken geblieben ist.
– Erhhung
29. August 2014 um 1:57 Uhr
Ich wurde verrückt, weil diese neue Datei eingebettete js hatte, aber ich konnte sie nicht bearbeiten. Ich verstand nicht warum. Danke #gcb und #welah
– Karinlynchin
20. Juni 2015 um 14:50 Uhr
Ist es möglich, eine JS-Datei aus der Liste unter der Sources Registerkarte der Entwicklertools?
– Technikfreak_28
27. Juni 2016 um 8:44 Uhr
@techie_28 nicht sicher, öffne eine andere Frage. Aber ich würde eine schnelle Erweiterung dafür schreiben.
– gcb
29. Juni 2016 um 0:12 Uhr
Ich weiß nicht, ob Sie dies zum dauerhaften Speichern benötigen, aber wenn Sie das js nur vorübergehend ändern müssen:
Ich kann das Javascript, das ich ändern möchte, in einen Texteditor kopieren, bearbeiten und dann in die Konsole einfügen, und es werden alle Funktionen neu definiert oder was auch immer ich neu definieren muss.
zum Beispiel, wenn die Seite Folgendes hat:
<script>
var foo = function() { console.log("Hi"); }
</script>
Ich kann den Inhalt zwischen dem Skript nehmen, bearbeiten und dann in den Debugger eingeben:
Wahrscheinlich nicht die beste Lösung, aber es funktioniert. Wird dauern, bis Sie die Seite neu laden.
Ich habe nach “chrome dev tool edit javascript” gesucht. Diese Seite ist das erste Suchergebnis. Aber es ist zu veraltet, es hilft mir nicht.
Ich verwende Chrome 73, diese Version von Chrome hat die Option „Lokale Überschreibungen aktivieren“. Mit der Funktion konnte ich ein Javascript bearbeiten und ausführen und debuggen.
Meine Lösung:
Aktivieren Sie in den Devtools-Einstellungen die Option Lokale Außerkraftsetzungen aktivieren.
Gehen Sie zur Registerkarte „Netzwerk“, suchen Sie die Datei, die Sie bearbeiten möchten, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Für Überschreibungen speichern“ (auf der Registerkarte „Quellen/Überschreibungen“ müssen Sie einen lokalen Ordner hinzufügen).
Die Datei erscheint in einer neuen Registerkarte auf der Registerkarte Quellen als lokale Kopie, sodass Sie diese Datei bearbeiten können, und nach dem Neuladen der Website wird die neue (und bearbeitete) Überschreibungsdatei auf der Website geladen!
12058100cookie-checkBearbeiten von Javascript mit Chrome Developer Toolsyes
Über die Konsole kann ich problemlos telefonieren. Ich kann einfach nichts bearbeiten.
– cooperia
26. September 2012 um 1:17 Uhr
Sie können lokale Funktionen und Variablen überschreiben, aber es gibt keine Möglichkeit, Änderungen an einer Datei aus den Entwicklungstools zu speichern. Dafür benötigen Sie noch einen externen Editor.
– Geis
26. September 2012 um 1:21 Uhr
Eigentlich kann ich CSS-Dateien bearbeiten, aber kein in eine PHP-Datei eingebettetes Skript. >.>
– cooperia
26. September 2012 um 1:25 Uhr
Nun, ich kann mit Opera machen, was ich will. Problem irgendwie gelöst.
– cooperia
26. September 2012 um 1:54 Uhr
@cooperia fügen Sie Ihren JS-Code in eine *.js-Datei ein, dann können Sie ihn in Chrome in Echtzeit bearbeiten und ausführen.
– Mahn
26. September 2012 um 2:08 Uhr