Bearbeiten von Javascript mit den Chrome Developer Tools

94

Ich versuche, Javascript auf einer Website mit den Chrome Developer Tools zu bearbeiten. Ich habe ungefähr 30 Berichte darüber gelesen und mir ein paar Videos angesehen. Tatsache ist, wenn ich zur 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 Haltepunkte erstellen, durchgehen usw. Ich kann einfach nicht bearbeiten. Wurde diese Funktionalität kürzlich entfernt?

javascript google-chrome web-developer-toolbar Genossenschaft
quelle
1
Ich kann gut in der Konsole telefonieren. Ich kann einfach nichts bearbeiten.
Cooperia
1
Sie können lokale Funktionen und Variablen überschreiben, aber es gibt keine Möglichkeit, Änderungen an einer Datei aus den Entwicklertools zu speichern. Dafür benötigen Sie noch einen externen Editor.
Geuis
1
Eigentlich kann ich CSS-Dateien bearbeiten, aber kein in eine PHP-Datei eingebettetes Skript bearbeiten. >.>
Cooperia
1
Nun, ich kann mit Opera machen, was ich will. Problem irgendwie gelöst.
Cooperia
1
@cooperia fügt Ihren js-Code in eine * .js-Datei ein, dann können Sie ihn in Echtzeit in Chrome bearbeiten und ausführen.
Mahn

Antworten:

102

Ich weiß, dass diese Frage veraltet ist, aber ich hatte gerade ein ähnliches Problem und fand die Lösung.

Wenn Sie die Datei verschönert haben, lässt Chrome keine Änderungen zu. Ich habe es ausgeschaltet und konnte es bearbeiten. Die Bereitschaft zu wetten, dass dies Ihr Problem ist / war.

Raddevon
quelle
4
Ja, das hat geholfen, danke @raddevon, ich kann sie jetzt bearbeiten, aber es passiert kein Effekt auf der Seite
Bolas
2
Für andere, die nach diesem Thema suchen: Ich hatte Prettify auf OFF gesetzt, konnte es aber immer noch nicht bearbeiten. Das Ein- und Ausschalten half. (Danke an IT Crowd für diesen Rat;))
Drkawashima
3
Fortsetzung: Nein. Es stellt sich heraus, dass ich das gleiche Problem wie @raddevon habe. Vielleicht ein Fehler in Chrom. 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 erreichen usw. Die bearbeitete Version wird also nicht einmal ausgeführt, sondern nur angezeigt ... Natürlich starte ich das Skript neu auf alle möglichen Arten ohne Wirkung
Drkawashima
4
Als Randnotiz, wenn Sie hübsch machen, dann kopieren und wieder in die Originaldatei einfügen, wird es eine vorgetäuschte Originaldatei sein, die bearbeitet werden kann.
Eoin
2
@Eoin Wunderbar! Das hat den Trick vollbracht. Und mit der Funktion "Lokale Überschreibungen" funktioniert dies perfekt. Danke für den Hinweis :-)
Xan-Kun Clark-Davis
52

Sie können Javascript in den Entwicklertools auf der Registerkarte "Quellen" bearbeiten, ABER Sie können Javascript nur in einer eigenen Datei bearbeiten. In eine HTML- (oder PHP-) Datei eingebettetes Skript bleibt schreibgeschützt.

welah
quelle
4
Ich verwende Chrome unter Linux und kann das Javascript immer noch nicht bearbeiten, selbst wenn es sich um eine einzelne .js-Datei handelt.
Roopunk
2
Leicht interessanter Hinweis: Wenn Sie Pretty Print ein- / ausschalten (das Symbol "{}"), können Sie eingebettete js bearbeiten, die Änderungen werden jedoch nicht wirksam, sodass wir immer noch nicht danach suchen. (Chrome 29)
Patrick
Das musste ich wissen. Danke dir.
Geeves
29

Es gibt einige Einschränkungen:

  1. muss eine JS-Datei sein. Tags können nicht in eine HTML-Seite eingebettet werden.

  2. es kann nicht verschönert werden.

gcb
quelle
Wenn Sie nach Befolgung der obigen Richtlinie und der Änderungen auf der Registerkarte "Quellen" nicht wirksam werden, klicken Sie mit der rechten Maustaste auf die bearbeitete Datei in der Baumansicht links und wählen Sie "Speichern". Möglicherweise wird ein Dialogfeld angezeigt, in dem Sie aufgefordert werden, eine lokale Datei zu speichern. Sie können diese jedoch einfach abbrechen. Erst zu diesem Zeitpunkt zeigt der Bearbeitungsverlauf von Chrome, dass die Bearbeitung hängen geblieben ist.
Erhhung
Ich wurde verrückt, weil diese neue Datei js eingebettet hatte, aber ich konnte sie nicht bearbeiten. Ich verstand nicht warum. Danke #gcb und #welah
carinlynchin
Ist es möglich, eine JS-Datei aus der Liste unter der SourcesRegisterkarte der Entwicklertools zu entfernen?
Techie_28
@ techie_28 nicht sicher, öffnen Sie eine andere Frage. Aber dafür würde ich eine kurze Erweiterung schreiben.
GCB
13

Ich weiß nicht, ob Sie dies benötigen, um dauerhaft zu speichern, aber ob Sie die 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. Dadurch werden alle Funktionen oder alles, was neu definiert werden muss, neu definiert.

Zum Beispiel, wenn die Seite Folgendes hat:

<script>
var foo = function() { console.log("Hi"); }
</script>

Ich kann den Inhalt zwischen dem Skript übernehmen, bearbeiten und dann wie folgt in den Debugger eingeben.

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

und es wird für mich funktionieren.

Oder wenn Sie möchten, 

function foo() {
    doAThing();
}

Sie können einfach eingeben 

function foo() {
    doSomethingElse();
}

und foo wird neu definiert.

Wahrscheinlich nicht die beste Problemumgehung, aber es funktioniert. Wird so lange dauern, bis Sie die Seite neu laden.

byronaltice
quelle
4

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 verfügt über die Option "Lokale Überschreibungen aktivieren". Mit der Funktion konnte ich ein Javascript bearbeiten und ausführen und debuggen.

Geben Sie hier die Bildbeschreibung ein

wafe
quelle