Debugging - Kontrollausgabe mit der Konsole

Wer jetzt denkt, dass da doch etwas mit dieser Konsole vor 2 Kapiteln war, liegt richtig. Jetzt schauen wir uns weitere Möglichkeiten an, die uns die Konsole bietet. Wir wollen nicht nur entstandene Fehler dort anzeigen, sondern auf zur Kontrolle Werte ausgeben lassen.

Natürlich war bisher die JavaScript-Funktion alert dazu hilfreich. Allerdings alles andere als unaufdringlich. Wir wollen in Zukunft den Ablauf des JavaScript-Programmes nicht mehr pausieren und damit es weiter geht jedes Mal klicken, sondern einfach Inhalte unserer Variablen zur Kontrolle anzeigen lassen, die wir selber festlegen.

Auch hier als Erweiterung – die Konsole gibt es nicht nur in Chrome (der hier im Kurs verwendet wird), sondern auch in Mozilla Firefox wie auch in Microsoft Edge und dem Internet Explorer. Manche Ausgaben und die Handhabung können sich leicht unterscheiden, aber die Grundfunktionen sind bei allen Browsern vorhanden.

Daher hier erst einmal eine Liste, welche Tastenkombination für den Aufruf bei den unterschiedlichen Browsern notwendig ist:

Browser Windows Mac
Google Chrome Strg + Umschalt + j Cmd + Opt + j
Mozilla Firefox Strg + Umschalt + i Cmd + Opt + i
Microsoft Edge/IE F12 dann Strg + 2

Ausgabe in der Console über JavaScript-Befehle

Es gibt 2 Möglichkeiten eine Ausgabe in der Console ausgeben zu lassen:

  • console.log();
  • console.info();

Die Methode console.log() ist die am häufigsten verwendete. Hier gibt man dann einfach einen Text in Anführungsstrichen an (was natürlich normalerweise wenig hilfreich ist), der dann ausgegeben wird oder den gewünschten Variablennamen. Beim Variablennamen wird der Inhalt der Variable ausgegeben, der zu diesem Zeitpunkt der Variable zugewiesen ist. Durch das folgende Beispiel wird dies deutlicher:

'use strict';
var inhalt;
inhalt = 'Hallo Welt';
console.log("Hier eine Ausgabe in die Konsole");
console.log(inhalt);

Die Ausgabe über console.log funktioniert bei der Verwendung von nur einer Variablen noch problemlos und übersichtlich – werden es aber mehrere Variablen, verliert man schnell den Überblick. Für mehr Überblick hilft dann die JavaScript-Funktion console.info, der man zu dem Variablennamen auch noch Text mitgeben kann.

'use strict';
var inhalt;
inhalt = 'Hallo Welt';
console.log("Hier eine Ausgabe in die Konsole");
console.log(inhalt);
let zahla = 12;
let zahlb = 7;
console.info('Inhalt von zahla:', zahla, ' / Inhalt der zahlb', zahlb);

Und somit können wir unseren Variablen auch gleich Beschreibungen mitgeben – dann wird es übersichtlich und nicht verwirrend. Als Ausgabe in der Konsole von unserem obigen Beispiel erscheint:

Ausgabe in Konsole über console.log() und console.info()

direkt JavaScript-Befehle in der Konsole ausführen lassen

Wir können innerhalb der Konsole nach dem ">" direkt JavaScript-Befehle eintippen. Hier ist besonders interessant, dass nach einer Programmausführung weiterhin die Variablenwerte vorhanden sind und wir diese so kontrollieren können. Möchte ich also den zugewiesenen Inhalt einer Variablen aus dem Programm abfragen, kann ich dies direkt mit der Eingabe console.log(variablenname) in der Konsole erreichen.

In der folgenden Ausgabe sehen wir nach der Ausgabe des Ergebnisses zusätzlich auf der rechten Seite die Ausgabe von "VM" gefolgt von einer Nummer. Zum Vergleich: wird console.log innerhalb unseres JavaScript-Programmes verwendet, sehen wir den Dateinamen und die Zeilennummer. Unbedingt selber testen!

Im folgenden Screenshot sieht man beide Varianten:

direkte Nutzung der Konsole

Variablen über Konsole manipulieren

Wir können Variableninhalte direkt über die Konsole ändern bzw. setzen. Im ersten Moment fragt man sich natürlich, für was das gut sein soll? Es würde nur Sinn machen, wenn man unserer JavaScript-Programm an einer bestimmten Stelle anhalten könnte und dann mit den Werten spielt. Diese Vorgehensweise bietet die Konsole. Diese Möglichkeiten sind später interessant, wenn wir über Breakpoints mitten in Programmen ein Programm anhalten können und dort auch von Hand Variablen abfragen bzw. setzen können und dann das Programm weiter laufen lassen.

Im folgenden Screenshot wurde die Variable zahlc gesetzt und abgefragt:

Variable über die Konsole setzen und abfragen

Das soll es zu diesem Zeitpunkt mit Informationen zur Nutzung der Console sein. Später in einem dritten Kapitel zu Konsole schauen wir uns dann die Möglichkeit mit den Breakpoints an. Dann haben wir auch den Wissenstand, um diese Funktionen sinnvoll nutzen zu können.