Ist es möglich, Javascript-Variablenwerte beim Debuggen in Google Chrome zu ändern?

81

Ich debugge eine Javascript-App (mit Chrome-Entwicklungstools) und möchte einige Variablenwerte ändern, während ich durch den Code gehe.

Ist das überhaupt möglich?

Ich habe versucht und so etwas wie:

> modeline
1
> modeline=0
0             <<< seems to work but... 
> modeline
1             <<< ups!!

Aber ich kann keine Dokumentation finden, die besagt, was getan werden kann oder nicht ...

tato
quelle
Schreiben Sie einen Code. Woher modelinekommt das?
Emil Ivanov
4
@Emil: Ist das wichtig? modeline ist eine globale Variable. Ich habe auch versucht, sie mit window.modeline mit denselben Ergebnissen zu ändern. Diese Frage ist aber auch relevant für lokale Variablen, die innerhalb einer Funktion deklariert wurden
am
4
Ich kann dieses Verhalten bestätigen. Das Ändern einer Eigenschaft für ein JS-Objekt in Chrome scheint keine Auswirkungen auf den tatsächlichen Wert des Objekts im Interpreter zu haben. In Firefox bewirkt dieselbe Änderung, dass das js-Skript anders ausgewertet wird, als Sie es erwarten würden. Eine Art Exstra-Sicherheit in Chrome Peraps? Weiß jemand, ob es in Chrome deaktiviert werden kann, damit Sie es zum Debuggen von js verwenden können?
Nikolaj Hansen
1
Hat dafür einen Fehlerbericht eingereicht .
GreenGiant
1
Bereits in V8 implementiert: Ausgabe 2399 Jetzt müssen die Entwicklertools von Chromium aktualisiert werden: Ausgabe 124206
gabrielmaldi

Antworten:

39

Warum erhält diese Antwort immer noch positive Stimmen?

Per Mikaël Mayers Antwort , dann ist dies kein Problem mehr, und meine Antwort ist veraltet ( go()jetzt zurückkehrt , 30nachdem er mit der Konsole Ausmisten). Dies wurde im Juli 2013 festgelegt, nach dem Bericht Fehler in oben verlinkten gabrielmaldi Kommentar . Es alarmiert mich, dass ich immer noch Upvotes bekomme - lässt mich denken, dass der Upvoter weder die Frage noch meine Antwort versteht.

Ich werde meine ursprüngliche Antwort hier aus historischen Gründen verlassen, aber gehe upvote Mikaël Antwort statt .


Der Trick besteht darin, dass Sie eine lokale Variable nicht direkt ändern können, sondern die Eigenschaften eines Objekts ändern können. Sie können auch den Wert einer globalen Variablen ändern:

var g_n = 0;
function go()
{
    var n = 0;
    var o = { n: 0 };
    return g_n + n + o.n;  // breakpoint here
}

Konsole:

> g_n = 10
  10
> g_n
  10
> n = 10
  10
> n
  0
> o.n = 10
  10
> o.n
  10

Überprüfen Sie das Ergebnis von, go()nachdem Sie den Haltepunkt festgelegt und diese Aufrufe in der Konsole ausgeführt haben, und Sie werden feststellen, dass das Ergebnis 20 statt 0 ist (aber leider nicht 30).

gilly3
quelle
19.01.2016 Chrome neuester, trivialer Code (var a = 1; Debugger; console.log (a);) Der Fehler ist immer noch vorhanden ...
Offirmo
@Offirmo - 1wird protokolliert. Was ist der Fehler? Was haben Sie erwartet, um protokolliert zu werden?
gilly3
Ändern Sie bei geöffnetem Debugger den Wert von ain einen
beliebigen
@Offirmo - nichts für mich: Screenshot . Aber wenn ich es in eine Funktion einwickle, sehe ich, was Sie beschreiben. Interessant. Aber dann kann ich den Wert ändern, indem ich ihn direkt in die Konsole eingebe (was ich persönlich einfacher finde als die Verwendung des Bereichsbereichs). Screenshot Ich glaube, ich habe nie versucht, Werte im Bereichsfenster zu ändern. Ich führe immer nur Ausdrücke in der Konsole aus, die den Wert ändern, und das scheint zu funktionieren, egal was passiert.
Gilly3
3
Ich habe zugestimmt, weil Ihre Antwort alle Kriterien einer "guten Antwort" erfüllt und Sie eine andere Antwort erwähnen, die neuere, bessere Informationen liefert, die - basierend auf einer akzeptierten Antwort - sofortige Glaubwürdigkeit verleihen. So danke. Und viel Spaß mit den Upvotes!
Gfullam
67

Dies ist jetzt in Chrom 35 möglich (heute ab 11. Juli 2014). Ich weiß allerdings nicht, welche Version es zuerst erlaubt hat.

Habe gerade @ gilly3 Beispiel auf meinem Computer getestet und es funktioniert.

  • Öffnen Sie die Konsole in Sourcesund die Registerkarte Snippets, fügen Sie ein neues Snippet hinzu und fügen Sie den folgenden Code ein:

    var g_n = 0; function go() { var n = 0; var o = { n: 0 }; return g_n + n + o.n; // breakpoint here }

  • Klicken Sie mit der rechten Maustaste auf den Snippet-Namen und klicken Sie auf "Ausführen" (die Funktion wird jedoch nicht ausgelöst).

  • Fügen Sie den Haltepunkt an der return-Anweisung hinzu.
  • Geben Sie in die Konsole unten ein go()
  • und ändern Sie die Variablenwerte wie unten gezeigt

Funktion mit lokaler Änderung erlaubt.

und das zurückgegebene Ergebnis g_n + n + o.nist 30.

Mikaël Mayer
quelle
1
Die Regression dieses Fehlers wird in dem Link in Brians Antwort verfolgt .
Mike
7

Dies ist ein anerkannter Fehler in den Chrome Dev Tools:

http://code.google.com/p/chromium/issues/detail?id=124206

Brianpeiris
quelle
Sieht so aus, als wäre es am 21. März 2013 behoben worden. Ich bin mir nicht sicher, wie ich sagen soll, in welcher Chromversion es sein wird.
David
@ David Sie haben es in Blink behoben, wir müssen möglicherweise einige Zeit warten, um einen Chrome-Build zu erhalten, der Blink verwendet
Anshul
3
Es ist (wieder) in Chrome Version 49.0.2623.87 eingebrochen. Melden Sie sich bei dem obigen Link an und markieren Sie das Problem, wenn Sie seine Bedeutung erhöhen möchten.
Mike
5

Ja! Schließlich! Ich habe es gerade mit Chrome, Version 66.0.3359.170 (Official Build) (64-Bit) auf dem Mac versucht.

Sie können die Werte in den Bereichen wie im ersten Bild oder mit der Konsole wie im zweiten Bild ändern.

Änderungswerte für Chrome-Debugger

Geben Sie hier die Bildbeschreibung ein

Tyler Collier
quelle
Das scheint auch für komplexe Situationen (wie Intervalle und Trigger) zu funktionieren.
Gerfried
4

Es sieht so aus als nicht.

Setzen Sie einen Haltepunkt. Wenn der Schalter nicht mehr zur Konsole wechselt, versuchen Sie, die Variable festzulegen. Es tritt kein Fehler auf, wenn Sie ihm einen anderen Wert zuweisen. Wenn Sie ihn jedoch nach der Zuweisung lesen, bleibt er unverändert. : - /

Vlad GURDIGA
quelle
Ok ... zumindest sehen Sie das gleiche Verhalten wie ich. Aber ... ist es möglich?
Tato
4

Firebug scheint Ihnen das zu erlauben.

Bobo
quelle
3
Und IE und Opera Dragonfly auch.
Keith K
5
Ich vermisse Opera Dragonfly -____-
ThorSummoner
2

Tatsächlich gibt es eine Problemumgehung. Kopieren Sie die gesamte Methode, ändern Sie ihren Namen, z. B. originalName (), in originalName2 (), ändern Sie jedoch die darin enthaltene Variable, um den gewünschten Wert anzunehmen, oder übergeben Sie sie als Parameter.

Wenn Sie diese Methode dann direkt von der Konsole aus aufrufen, hat sie dieselbe Funktionalität, Sie können jedoch die Variablenwerte ändern.

Wenn die Methode automatisch aufgerufen wird, geben Sie stattdessen in die Konsole ein

originalName = null;
function originalName(original params..)
{
    alert("modified internals");
    add whatever original code you want
}
mdubez
quelle
2

Ich kann einen Wert für eine Skriptvariable durch Zuweisung in der Konsole ändern. Scheint am einfachsten.

Jeff Lowery
quelle
1

Ich weiß nicht, warum das Chrome-Team diese alberne Funktion nicht zulässt ... aber die einzige Möglichkeit, Variablenwerte mit Erfolg zu ändern, besteht darin, das Skript direkt im Chrome-Editor auf der Registerkarte "Quellen" zu ändern (dies ändert das Verhalten von Ihr Skript, bis Sie die Seite aktualisieren), aber diese Änderungen gehen beim Aktualisieren verloren. Seien Sie also vorsichtig.

LeonardoX
quelle
0

Ich hatte das gleiche Problem, ging zu "Über Google Chrome" -> Hilfe und sagte, ich müsse meinen Browser neu starten, um die neuesten Updates zu erhalten.

Ich habe dies getan und plötzlich kann ich jetzt lokale Variablen ändern. Klicken Sie einfach im Fenster Bereichsvariablen auf die Variable, die Sie bearbeiten möchten, und geben Sie Ihren neuen Wert ein.

Ich bemerkte jedoch einige Kuriositäten, dass ich einige nicht verwandte Variablenzuweisungen übergehen musste, bevor ich den Text im rechten Fenster ändern konnte (Bereichsvariablen).

GilesDMiddleton
quelle
Wenn Sie lokalen Speicher zum Speichern von Eigenschaften verwendet haben, können Sie auch unter Ressourcen-> LocalStorage die Eigenschaften bearbeiten, die Sie direkt dort gespeichert haben.
GilesDMiddleton
0

So ändern Sie einen Wert jedes Mal, wenn ein Codeblock ausgeführt wird, ohne den Ausführungsfluss unterbrechen zu müssen :

Mit der Funktion "Logpoints" im Debugger können Sie beliebige Werte in der Konsole protokollieren, ohne sie zu beschädigen. Es wertet Code innerhalb des Ausführungsflusses aus, was bedeutet, dass Sie ihn tatsächlich verwenden können, um Werte im laufenden Betrieb zu ändern, ohne anzuhalten.

Klicken Sie mit der rechten Maustaste auf eine Zeilennummer, wählen Sie "Logpoint" und geben Sie den Zuweisungsausdruck ein. Es sieht ungefähr so ​​aus:

Geben Sie hier die Bildbeschreibung ein

Ich finde es sehr nützlich, um Werte auf einen Zustand zu setzen, der ansonsten nicht einfach zu reproduzieren ist, ohne mein Projekt mit Debug-Zeilen neu erstellen zu müssen. Denken Sie daran, den Haltepunkt zu löschen, wenn Sie fertig sind!

Matthew Marichiba
quelle