wake-up-neo.net

Bearbeitung im Chrome-Debugger

Wie kann ich JavaScript-Code im Chrome-Debugger "dynamisch" bearbeiten? Es ist nicht für mich, daher habe ich keinen Zugriff auf die Quelldatei. Ich möchte Code bearbeiten und sehen, welche Effekte sie auf der Seite haben. In diesem Fall kann eine Animation mehrere Male angehalten werden.

217
Tom

Sie können den integrierten JavaScript-Debugger in den Chrome Developer Tools auf der Registerkarte "Scripts" verwenden (in späteren Versionen ist dies die Registerkarte "Sources"). Änderungen, die Sie auf den Code anwenden, werden jedoch nur zu dem Zeitpunkt ausgedrückt, zu dem sie durchlaufen werden. Das bedeutet, dass Änderungen am Code, der nach dem Laden der Seite nicht ausgeführt wird, keine Auswirkungen haben. Im Gegensatz zu z. ändert den Code, der in den mouseover - Handlern gespeichert ist, die Sie sofort testen können.

Es gibt ein Video von Google I/O 2010-Ereignis , das andere Funktionen der Chrome Developer Tools vorstellt.

71
Adam

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

Mir wurde klar, dass ich vorher einen Haltepunkt im Debugger an eine Codezeile anhängen das, was ich dynamisch bearbeiten wollte. Und da Haltepunkte bleiben auch nach einem erneuten Laden der Seite erhalten, konnte ich die gewünschten Änderungen bearbeiten, während ich am Haltepunkt angehalten habe, und ließ die Seite dann weiter laden.

Also als schnelle Abhilfe, und wenn es mit Ihrer Situation funktioniert:

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

Das ist, was Sie suchen:

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 die Änderungen rückgängig zu machen, klicken Sie mit der rechten Maustaste und wählen Sie die Option Local Modifications ... aus dem Menü. Wenn Sie den angezeigten Zeitstempel erweitern, werden Ihre Änderungen in Bezug auf die Originaldatei angezeigt.

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

9
artemisian

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

5
gnur

Jetzt hat Google Chrome eine neue Funktion eingeführt. Mit dieser Funktion können Sie Ihren Code in Chrome-Durchsuchen bearbeiten. (Dauerhafte Änderung am Codeort)

Drücken Sie dazu F12 -> Registerkarte Quelle - (rechte Seite) -> Dateisystem -, und wählen Sie Ihren Code-Ort aus. und dann fragt der Chrome-Browser nach Erlaubnis, und danach wird der Code grün angezeigt. und Sie können Ihren Code ändern und er wird auch den Code-Ort widerspiegeln.

Vielen Dank

3
stackinfostack

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

Ich erkannte, dass ich im Debugger einen Haltepunkt an eine Codezeile anhängen konnte, bevor ich dynamisch bearbeiten wollte. Und da Haltepunkte auch nach einem Neuladen der Seite erhalten bleiben, konnte ich die gewünschten Änderungen bearbeiten, während ich am Haltepunkt pausierte, und dann die Seite weiter laden lassen.

Die obige Lösung funktionierte nicht für recht große JS (Webpack-Bundle - 3.21 MB reduzierte Version, 130.000 Codezeilen in der veretteten Version) - Chrome stürzte ab und bat um das Neuladen der Seite, wodurch alle gespeicherten Änderungen zurückgesetzt wurden. In diesem Fall gehen Sie wie folgt vor: Fiddler. Hier können Sie die AutoRespond-Option festlegen, um jede entfernte Ressource durch eine lokale Datei von Ihrem Computer zu ersetzen - siehe diese SO Frage für Details .

In meinem Fall musste ich außerdem CORS-Header zu Fiddler hinzufügen, um die Antwort erfolgreich zu simulieren.

2
dominik

Wenn das Javascript, das auf eine Schaltfläche ausgeführt wird, angeklickt wird, ist es ausreichend, die Änderung unter Quellen> Quellen (in den Entwicklerwerkzeugen in Chrome) vorzunehmen und durch Drücken von Strg + S zum Speichern . Ich mache das die ganze Zeit. 

Wenn Sie die Seite aktualisieren, sind Ihre JavaScript-Änderungen nicht mehr vorhanden, Chrome wird sich jedoch Ihre Bruchstellen merken.

1
developer747

Ich suchte nach einer Möglichkeit, das Skript zu ändern und das neue Skript zu debuggen. So habe ich es 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. Wenn Sie Strg + s drücken, wird die Seite aktualisiert, sodass der Haltepunkt in der ersten Zeile getroffen wird. 

  5. Wenn Sie mit F8 fortfahren, ersetzt das neu eingefügte Skript das ursprüngliche, solange keine Umleitungen und Neuladevorgänge durchgeführt werden.

1
100r

sie können die Javascrpit-Dateien im Chrome-Debugger unter der Registerkarte "Sources" dynamisch bearbeiten. Wenn Sie die Seite jedoch aktualisieren, gehen Ihre Änderungen verloren. Um das Laden der Seite vor dem Durchführen der Änderungen zu unterbrechen, müssen Sie ein Haltepunkt, dann die Seite neu laden und Ihre Änderungen bearbeiten und schließlich den Debugger ausschalten, um zu sehen, dass Ihre Änderungen wirksam werden .  Chrome debugger

1

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

1
meeech

Chrome DevTools verfügt über ein Snippets -Feld, in dem Sie JavaScript-Code wie in einem Editor erstellen und bearbeiten und ausführen können.

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

 enter image description here

0
mark

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

Image

0
kami wine