Bearbeiten im Chrome-Debugger

247

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.

javascript  google-chrome  debugging 
— Tom
quelle
5
Sie könnten Opera verwenden. Opera ermöglicht die Bearbeitung von JS-Dateien. Nachdem Sie die Seite sanft neu geladen haben, werden Ihre Änderungen übernommen. Klicken Sie mit der rechten Maustaste auf> Quelle> Änderungen vornehmen> Änderungen übernehmen.
— XP1
Dies ist ein großartiges Tutorial für den Chrome-Debugger. Es zeigt die sehr einfachen Schritte zum Vornehmen von In-Debugger-Änderungen an Ihren Skripten.
— SaganRitual
1
Sie können Code auch über einen bedingten Haltepunkt "einfügen" . Verwenden Sie im angegebenen Beispiel num = 5, console.log(arguments[0], num), false, um den Wert innerhalb der fooFunktion zu aktualisieren und zu protokollieren .
— Mems
Bitte finden Sie diese stackoverflow.com/questions/66420/…
— stackinfostack

Antworten:

80

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.

— Adam
quelle
26
In späteren Versionen von Chrome wurden die Registerkartensymbole entfernt und die Registerkarte "Skripte" in "Quellen" umbenannt. Daher ist es möglicherweise nicht offensichtlich, den Javascript-Debugger zu finden. Weitere Infos hier stackoverflow.com/questions/12113769/…
— chrisjleu
9
Es gibt keine solche Methode. Ich kann den Code auf der Registerkarte "Quellen" auch nicht ändern.
— Melab
17
Der Chrome-Debugger erlaubt keine lokale Änderung von Javascript. Falsch.
— Omikes
1
@oMiKeY Was ist falsch? Chrome erlaubt sicherlich das Ändern des Skripts im Debugger.
— JLRishe
6
@oMiKeY können Sie ändern, wenn das Skript nicht hübsch ist
— Peterchaula
283

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
— sjacob
quelle
1
Vielen Dank! Ich fand, dass dies funktionierte, wenn Änderungen an einer selbstausführenden anonymen Funktion vorgenommen werden mussten, die direkt neben dem Laden der Seite aufgerufen wurde.
— Peter
1
Argh, weil ich das früher versucht hatte und es nicht funktionierte und obwohl oh man, wie habe ich es vermisst. Aber ja, funktioniert bei mir nicht.
— Jamie Hutber
8
Entscheidend für mich war zu wissen, dass Änderungen gespeichert werden sollten (Schritt 4). Vielen Dank!
— Sergey Goliney
3
Funktioniert für mich nicht mit Javascript in HTML-Dateien. Wenn Sie dem Arbeitsbereich einen Ordner hinzugefügt haben, wählen Sie die lokale JS-Datei aus, klicken Sie mit der rechten Maustaste und ordnen Sie diese Datei dem Netzwerk-Dito zu.
— oo
1
Es gibt also keine Möglichkeit, Skripte in HTML-Dateien zu ändern?
— Krieger
13

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/

— Artemisian
quelle
5

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.

— gnur
quelle
4
Es wäre fantastisch, wenn Sie die Änderungen im Fall von file: // URLs
— Jim Blackler
3
Genau das habe ich getan, aber die Änderungen wurden nicht wie erwartet auf der Seite angezeigt. Ich muss $ (Selektor) .fadeIn () ... in $ (Selektor) .stop (wahr, wahr) .fadeIn () ändern ... Weißt du? Und ich möchte das auf der Seite sehen können.
— Tom
1
Oh verdammt, du hast recht. Jetzt frage ich mich, warum Chrome es uns erlaubt, irgendetwas zu bearbeiten, wenn es keine Wirkung hat.
— gnur
"Speichern unter ..." speichert die Datei nur auf Ihrem Computer. Die Änderungen werden nach dem erneuten Laden der Seite nicht angewendet. Wenn Sie Änderungen an JS-Dateien zum Debuggen anwenden möchten, können Sie Opera verwenden.
— XP1
1
und dieser namens tincr: chrome.google.com/webstore/detail/…
— JustGoscha
3

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.

— dominik
quelle
2

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.

— Entwickler747
quelle
2

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

— stackinfostack
quelle
2

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.

Bild

— Kami Wein
quelle
1

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/

— meeech
quelle
1
Das ist eine gute Zusammenfassung. Leider sagt es nichts über das Bearbeiten von JS im Debugger aus, was die fragliche Aufgabe ist.
— Bruno Bronosky
Nicht zustimmen. Sie sehen am Ende, dass ich speziell ein Beispiel gebe, wie man JavaScript-Code im Chrome-Debugger "dynamisch" bearbeitet, was Teil der Frage ist.
— Meeech
1
meeech, wenn ich Ihren Beitrag nicht missverstehe, zeigen Sie, wie Sie JS an der Konsole bewerten . Dies unterscheidet sich vom Bearbeiten einer Funktion, sodass sich die Funktion beim zukünftigen Aufruf anders verhält.
— Bruno Bronosky
Meinetwegen. Ich habe unter Bearbeiten das Ändern der Werte der Live-Seite verstanden und dachte, das Aufschreiben würde helfen, da Sie, sobald Sie es in der Konsole haben, mit den Werten und allem anderen im Ausführungskontext herumspielen können.
— Meeech
1
Ja, meine Güte, ich habe viele Jahre lang genau das getan, was Sie beschreiben. Ich war nur frustriert darüber, dass ich keine gute Rückkopplungsschleife für die Änderung von Ereignishandlern erreichen konnte. Besonders diejenigen, die beim Laden der Seite ausgelöst werden. Wie AaronLS und ich in den Kommentaren zu Gnurs Antwort besprochen haben, funktioniert das Bearbeiten in DevTools> Quellen> Quellen manchmal und manchmal nicht. Aber wenn es funktioniert, ist es ziemlich süß!
— Bruno Bronosky
1

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. Chrome-Debugger

— Seif Tamallah
quelle
Sie müssen die Konsole offen halten, damit das Chrom an den Haltepunkten stoppt, andernfalls ignoriert Chrom die Haltepunkte
— Seif Tamallah
funktioniert nicht. Ich lade mit F5 neu und es stoppt, ich ändere die Datei, laufe weiter und erhalte den gleichen Fehler, den ich gerade behoben habe. Es ist eine JS-Datei neben der Hauptseite.
— Darkgaze
1

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.

— 100r
quelle
0

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.

Die Unterregisterkarte "Überschreibungen" in den Chrome Developer Tools

— Mark Foreman
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.