Bearbeiten von Javascript mit Chrome Developer Tools

Lesezeit: 5 Minuten

Benutzer-Avatar
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:

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

  2. 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:

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

und es wird für mich funktionieren.

Oder wenn Sie mögen,

function foo() {
    doAThing();
}

Sie können einfach eintreten

function foo() {
    doSomethingElse();
}

und foo werden neu definiert.

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.

Geben Sie hier die Bildbeschreibung ein

Meine Lösung:

  1. Aktivieren Sie in den Devtools-Einstellungen die Option Lokale Außerkraftsetzungen aktivieren.
  2. 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).
  3. 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!

1205810cookie-checkBearbeiten von Javascript mit Chrome Developer Tools

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy