Variablen in „Quellen“

Mit den Chrome DevTools können Sie sich ganz einfach mehrere Variablen in Ihrer Anwendung ansehen. Wenn Sie Variablen in „Quellen“ beobachten, müssen Sie nicht in die Konsole wechseln und können sich darauf konzentrieren, Ihren Code zu verbessern.

Im Bereich „Quellen“ können Sie Variablen in Ihrer Anwendung beobachten. Sie finden sie in der Seitenleiste des Debuggers im Bereich „Anzeigen“. So müssen Sie keine Objekte mehr wiederholt in der Console loggen.

Watch-Bereich des Debuggers

Variablen hinzufügen

Wenn Sie der Merkliste eine Variable hinzufügen möchten, klicken Sie rechts neben der Abschnittsüberschrift auf das Pluszeichen. Daraufhin wird eine Inline-Eingabe geöffnet, in der Sie den Namen der Variablen eingeben, die beobachtet werden soll. Drücken Sie dann die Eingabetaste, um den Begriff der Liste hinzuzufügen.

Schaltfläche „Zur Merkliste hinzufügen“

Der Beobachter zeigt den aktuellen Wert der Variablen an, sobald sie hinzugefügt wurde. Wenn die Variable nicht festgelegt ist oder nicht gefunden werden kann, wird als Wert angezeigt.

Undefinierte Variable in der Merkliste

Variablen aktualisieren

Variablenwerte können sich im Laufe der Zeit ändern. Die Beobachtungsliste ist keine Liveansicht der Variablen, es sei denn, Sie führen die Ausführung Schritt für Schritt durch. Wenn Sie die Ausführung mithilfe von breakpoints durchgehen, werden die beobachteten Werte automatisch aktualisiert. Wenn Sie die Variablen in der Liste manuell noch einmal prüfen möchten, drücken Sie die Schaltfläche „Aktualisieren“ rechts neben der Abschnittsüberschrift.

Schaltfläche „Smartwatch-Variablen aktualisieren“

Wenn die Aktualisierung angefordert wird, wird der aktuelle Anwendungsstatus noch einmal geprüft. Alle angesehenen Elemente werden mit den aktuellen Werten aktualisiert.

Aktualisierte Variable, die beobachtet wird

Variablen entfernen

Wenn Sie die Anzahl der Variablen in der Beobachtungsliste reduzieren möchten, um schneller arbeiten zu können, müssen Sie möglicherweise Variablen daraus entfernen. Bewegen Sie den Mauszeiger auf die Variable und klicken Sie dann auf das Symbol zum Entfernen, das rechts angezeigt wird.

Den Mauszeiger auf die Variable bewegen, um sie aus der Merkliste zu entfernen