Die Console

Ein Programm ist erst einmal stumm. Es rechnet, entscheidet, ändert Werte, und du siehst davon nichts. Die Console ist das Fenster, durch das du hineinschaust.

Sie ist das wichtigste Werkzeug der ersten Wochen, und sie bleibt es. Es gibt einen Debugger mit Haltepunkten, den lernst du in Abschnitt 14 kennen, und trotzdem tippen auch erfahrene Leute den ganzen Tag console.log. Wer das als Anfängerkrücke abtut, hat noch nie in fremdem Code nach einem Fehler gesucht.

01 / 05Die vier Stufen

Es gibt nicht nur console.log. Vier Befehle machen fast dasselbe und unterscheiden sich nur darin, wie ihre Ausgabe aussieht.

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

console.log("Eine ganz normale Zeile.");
console.info("Eine Zeile mit Hinweis-Charakter.");
console.warn("Das ist eine Warnung.");
console.error("Und das ein Fehler.");

Schau in die Console. Die Warnung und der Fehler sind farbig hervorgehoben, die anderen beiden nicht.

Am Ablauf ändert keiner der vier etwas. console.error bricht dein Programm nicht ab, es schreibt nur eine Zeile, die aussieht wie ein Fehler. Der Unterschied ist reine Lesbarkeit, und deshalb lohnt es sich, ihn zu nutzen:

• console.log für alles Gewöhnliche. Das ist der Normalfall und wird es bleiben.
• console.info für Hinweise, die zum normalen Ablauf gehören. In der Praxis benutzen viele Leute es nie und bleiben bei log.
• console.warn für „das geht gerade noch gut, sollte aber nicht so sein”.
• console.error für „hier ist etwas kaputt”.

Über der Console steht eine Leiste mit genau diesen Stufen: Alle, Warnungen, Fehler. Bei drei Zeilen ist das egal. Bei einer Anwendung, die im Sekundentakt etwas ausgibt, ist es der Unterschied zwischen Finden und Suchen. „Warnungen” schließt die Fehler dabei mit ein, denn ein Filter, der dir die schwerere Meldung wegnimmt, wäre eine Falle. Daneben liegen ein Suchfeld und ein Knopf, der die Liste leert; die Zahl am Reiter zählt weiter alles, auch das Weggefilterte.

02 / 05Mehrere Werte auf einmal

Du kannst einem Aufruf beliebig viele Werte mitgeben, durch Komma getrennt.

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Mehrere Werte werden durch ein Leerzeichen getrennt ausgegeben.
console.log("Preis:", 19.9, "Euro");

// Das ist praktisch, weil man den Wert nicht selbst zusammenbauen muss.
console.log("Angemeldet:", true);
console.log("Die Liste:", [1, 2, 3]);

Ausgegeben werden sie hintereinander, getrennt durch ein Leerzeichen. Aus console.log("Preis:", 19.9, "Euro") wird also die Zeile Preis: 19.9 Euro.

Das ist mehr als Bequemlichkeit. Du kannst jeden Wert direkt hineinreichen, ohne ihn vorher in Text zu verwandeln, und Listen und Objekte bleiben dabei aufklappbar. Die letzte Zeile im Beispiel zeigt das: dort steht (3) [1, 2, 3] mit einem Pfeil davor, und ein Klick darauf zeigt die drei Werte einzeln. Wer sie stattdessen mit Plus zu einem Text zusammenklebt, macht aus einem Objekt die wenig hilfreiche Zeichenfolge [object Object]. Warum das passiert, klärt Abschnitt 2.

03 / 05Beschrifte deine Ausgaben

Das klingt nach einer Kleinigkeit und ist die Gewohnheit, die dir am meisten Zeit spart.

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Drei Zahlen ohne jeden Hinweis, woher sie kommen.
console.log(1499);
console.log(285);
console.log(1784);

// Dieselben drei mit Beschriftung.
console.log("Netto in Cent:", 1499);
console.log("Steuer in Cent:", 285);
console.log("Brutto in Cent:", 1784);

Der erste Block gibt drei Zahlen aus. Du weißt nicht, welche wozu gehört, und wenn du eine Stunde später zurückkommst, weißt du es erst recht nicht. Der zweite Block gibt dieselben Zahlen aus, jede mit einem Wort davor.

Beim Suchen eines Fehlers hast du schnell zehn oder zwanzig solcher Zeilen. Ohne Beschriftung sind sie wertlos. Angewöhnen kostet nichts, es ist genau ein Textbaustein mehr pro Zeile.

04 / 05Du kannst dort auch selbst tippen

Unter den Zeilen der Console steht eine Eingabezeile. Schreib dort 2 + 2 und drück Enter, und die Antwort steht darüber. Die Console ist also nicht nur ein Fenster, durch das du hineinschaust, sondern auch eine Tür.

Was du dort tippst, läuft in derselben Seite wie dein Skript, und zwar in dem Zustand, in dem sie gerade ist. Du kannst also einen Wert nachschlagen, den dein Code angelegt hat, oder eine Zeile ausprobieren, bevor du sie in den Editor schreibst. Für schnelle Versuche ist das unschlagbar, und im echten Browser funktioniert es genauso.

Eines dazu: Sobald du im Editor etwas änderst, baut der Browser die Seite neu, und die getippten Zeilen sind weg. Das ist kein Fehler. Die Eingabezeile gehört zu der Seite, die gerade dasteht, und die gibt es dann nicht mehr.

05 / 05Wo die Console im echten Browser liegt

Hier im Kurs liegt sie als Reiter neben dem Browser und ist immer da. Auf einer echten Seite musst du sie erst öffnen:

F12 ist der schnellste Weg, in allen gängigen Browsern. Alternativ Rechtsklick auf die Seite und „Untersuchen” beziehungsweise „Element untersuchen”. Es öffnen sich die Entwicklerwerkzeuge, und dort ist „Console” einer der Reiter.

Auf dem Mac funktioniert stattdessen Cmd + Alt + I. In Safari musst du die Entwicklerwerkzeuge einmalig in den Einstellungen freischalten.

Was du dort siehst, ist mehr als deine eigenen Ausgaben. Der Browser meldet dort auch von sich aus: Fehler in deinem Code, Dateien, die nicht geladen werden konnten, Warnungen zu veralteten Funktionen. Diese Meldungen sind der Grund, warum die nächsten beiden Lektionen sich damit beschäftigen, was da eigentlich steht.