Bearbeiten im Chrome-Debugger

Wie bearbeite ich "dynamisch" JavaScript-Code im Chrome-Debugger? Es ist nichts für mich, daher habe ich keinen Zugriff auf die Quelldatei. Ich möchte Code bearbeiten und sehen, welche Auswirkungen sie auf die Seite haben. In diesem Fall möchte ich verhindern, dass eine Animation einige Male in die Warteschlange gestellt wird.

Sie können den integrierten JavaScript-Debugger in den Chrome Developer Tools auf der Registerkarte "Skripte" verwenden (in späteren Versionen ist dies die Registerkarte "Quellen"). Änderungen, die Sie am Code vornehmen, werden jedoch nur zum Zeitpunkt der Ausführung ausgedrückt. Das bedeutet, dass Änderungen am Code, der nach dem Laden der Seite nicht ausgeführt wird, keine Auswirkungen haben. Im Gegensatz zu z. B. Änderungen am Code in den Mouseover-Handlern , die Sie im laufenden Betrieb testen können.

Es gibt ein Video von der Google I / O 2010-Veranstaltung, in dem andere Funktionen der Chrome Developer Tools vorgestellt werden.

Ich bin heute darauf gestoßen, als ich mit der Website eines anderen herumgespielt habe.

Ich erkannte, dass ich einer Codezeile einen Haltepunkt im Debugger hinzufügen konnte, bevor ich sie dynamisch bearbeiten wollte. Und da Haltepunkte auch nach einem erneuten Laden der Seite bestehen bleiben , konnte ich die gewünschten Änderungen bearbeiten, während ich am Haltepunkt pausierte, und dann die Seite weiter laden.

Als schnelle Lösung und wenn es mit Ihrer Situation funktioniert:

1. Fügen Sie an einer früheren Stelle im Skript einen Haltepunkt hinzu
2. Seite neuladen
3. Bearbeiten Sie Ihre Änderungen im Code
4. CTRL+ s(Änderungen speichern)
5. Unterbrechen Sie den Debugger

Das suchen Sie:

1.- Navigieren Sie zur Registerkarte Quelle und öffnen Sie die Javascript-Datei

2.- Bearbeiten Sie die Datei, klicken Sie mit der rechten Maustaste darauf und ein Menü wird angezeigt: Klicken Sie auf Speichern und speichern Sie sie lokal.

Um den Unterschied anzuzeigen oder Ihre Änderungen rückgängig zu machen, klicken Sie mit der rechten Maustaste und wählen Sie die Option Lokale Änderungen ... aus dem Menü. Sie werden feststellen, dass sich Ihre Änderungen in Bezug auf die Originaldatei unterscheiden, wenn Sie den angezeigten Zeitstempel erweitern.

Weitere Informationen finden Sie hier: http://www.sitepoint.com/edit-source-files-in-chrome/

Ziemlich einfach, gehen Sie zur Registerkarte "Skripte". Wählen Sie die gewünschte Quelldatei aus und doppelklicken Sie auf eine beliebige Zeile, um sie zu bearbeiten.

Da dies eine sehr beliebte Frage ist, die sich mit der Live-Bearbeitung von JS befasst, möchte ich auf eine weitere nützliche Option hinweisen. Wie von svjacob in seiner Antwort beschrieben:

Ich erkannte, dass ich vor einer dynamischen Codebearbeitung einen Haltepunkt im Debugger an eine Codezeile anhängen konnte. Und da Haltepunkte auch nach einem erneuten Laden der Seite bestehen bleiben, konnte ich die gewünschten Änderungen bearbeiten, während ich am Haltepunkt pausierte, und dann die Seite weiter laden.

Die obige Lösung funktionierte bei mir nicht für ziemlich große JS (Webpack-Bundle - 3,21 MB minimierte Version, 130.000 Codezeilen in der hübschen Version) - Chrome stürzte ab und forderte das Neuladen der Seite an, wodurch alle gespeicherten Änderungen zurückgesetzt wurden. In diesem Fall war Fiddler der richtige Weg, um die AutoRespond-Option so einzustellen, dass jede Remote-Ressource durch eine lokale Datei von Ihrem Computer ersetzt wird. Weitere Informationen finden Sie in dieser SO-Frage .

In meinem Fall musste ich dem Geiger auch CORS-Header hinzufügen, um die Antwort erfolgreich zu verspotten.

Wenn das Javascript, das auf einer Schaltfläche ausgeführt wird, ausgeführt wird, reicht es aus, die Änderung unter Quellen> Quellen (in den Entwicklertools in Chrome) vorzunehmen und zum Speichern Strg + S zu drücken . Ich mache das die ganze Zeit.

Wenn Sie die Seite aktualisieren, sind Ihre Javascript-Änderungen nicht mehr vorhanden, aber Chrome merkt sich weiterhin Ihre Haltepunkte.

Jetzt hat Google Chrome eine neue Funktion eingeführt. Mit dieser Funktion können Sie Ihren Code in Chrome Browse bearbeiten. (Permanente Änderung der Codeposition)

Drücken Sie dazu F12 -> Registerkarte Quelle - (rechte Seite) -> Dateisystem - und wählen Sie dort Ihren Code-Speicherort aus. und dann werden Sie vom Chrome-Browser um Erlaubnis gebeten und danach wird der Code mit grüner Farbe versenkt. und Sie können Ihren Code ändern und er wird sich auch auf Ihren Code-Speicherort auswirken (dies bedeutet, dass er dauerhaft geändert wird).

Vielen Dank

Genau wie bei der Antwort von @mark können wir in Chrome DevTools Snippets mit overridedem Standard-JavaScript erstellen . Schließlich können wir sehen, welche Auswirkungen sie auf die Seite haben.

Hier ist eine sanfte Einführung in den js-Debugger in Chrome, den ich geschrieben habe. Vielleicht hilft es anderen, Informationen zu diesem Thema zu suchen: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

Sie können die Javascrpit-Dateien dynamisch im Chrome-Debugger auf der Registerkarte Quellen bearbeiten. Ihre Änderungen gehen jedoch verloren, wenn Sie die Seite aktualisieren. Um das Laden der Seite zu unterbrechen, bevor Sie Änderungen vornehmen, müssen Sie einen Haltepunkt festlegen und die Seite neu laden Bearbeiten Sie Ihre Änderungen und halten Sie den Debugger endgültig an, damit Ihre Änderungen wirksam werden.

Ich suchte nach einer Möglichkeit, das Skript zu ändern und das neue Skript zu debuggen. Das habe ich geschafft:

1. Legen Sie den Haltepunkt in der ersten Zeile des Skripts fest, das Sie ändern und debuggen möchten.

2. Laden Sie die Seite neu, damit der Haltepunkt erreicht wird

3. Fügen Sie Ihr neues Skript ein und legen Sie die gewünschten Haltepunkte fest

4. Strg + s, und die Seite wird aktualisiert, wodurch der Haltepunkt in der ersten Zeile erreicht wird.

5. F8, um fortzufahren, und jetzt ersetzt Ihr neu eingefügtes Skript das ursprüngliche, solange keine Umleitungen und Neuladungen vorgenommen werden.

Chrome DevTools verfügt über Snippets Bedienfeld, in dem Sie JavaScript-Code wie in einem Editor erstellen, bearbeiten und ausführen können. Öffnen Sie DevTools, wählen Sie das Bedienfeld Quellen und anschließend die Registerkarte Snippets.

https://developers.google.com/web/tools/chrome-devtools/snippets

Sie können "Überschreibungen" in Chrome verwenden, um Javascript-Änderungen zwischen den Seitenladevorgängen beizubehalten, auch wenn Sie nicht die ursprüngliche Quelle hosten.

1. Erstellen Sie einen Ordner unter Entwicklertools> Quellen> Überschreibungen
2. Chrome fragt nach der Erlaubnis für den Ordner. Klicken Sie auf Zulassen
3. Bearbeiten Sie die Datei unter Quellen> Seite und speichern Sie sie (Strg-S). Ein violetter Punkt zeigt an, dass die Datei lokal gespeichert ist.