Die Konsole ist der direkteste Draht zwischen dir und JavaScript. Hier siehst du was dein Code tut – oder warum er es nicht tut. Wer mit JavaScript anfängt, sollte die Konsole von Beginn an offen haben. Sie ist kein Werkzeug für Fortgeschrittene, sondern genau das Richtige für den Einstieg.
Voraussetzung für diesen Teil: Du hast den JavaScript Einstieg gelesen und die zwei Beispiele gesehen. Die Konsole werden wir direkt damit ausprobieren.
Abschnitte: Konsole öffnen, console.log() – Ausgaben lesen, Fehlermeldungen lesen, Code direkt eingeben.
Konsole öffnen
Öffne die DevTools mit F12 und klick oben in der Leiste auf den Reiter Konsole – in Firefox heißt er genau so, in Chrome und Edge ebenfalls. Du siehst ein leeres Feld mit einem Eingabeprompt unten. Hier landen alle Ausgaben deines JavaScripts und alle Fehlermeldungen.
console.log() – Ausgaben lesen
console.log() ist der einfachste Weg um dir selbst etwas in der Konsole auszugeben – zum Beispiel den Inhalt einer Variable oder eine kurze Meldung damit du weißt dass dein Code an einer bestimmten Stelle angekommen ist.
Öffne jetzt Beispiel bj001 in einem neuen Tab, öffne dort die Konsole und klick auf den Button. Ohne console.log() passiert in der Konsole nichts – der Alert taucht im Browser auf, aber die Konsole bleibt leer. Jetzt stell dir vor, du würdest die Funktion so ergänzen:
function textAendern() {
document.getElementById("meinText").innerHTML = "Du hast geklickt!";
document.getElementById("meinText").style.color = "red";
console.log("Button wurde geklickt!");
alert("Hallo! Der Text wurde geändert.");
}Mit dieser Zeile würde bei jedem Klick die Meldung Button wurde geklickt! in der Konsole erscheinen. Das klingt simpel – ist aber enorm nützlich sobald du herausfinden willst ob eine Funktion überhaupt aufgerufen wird, und wie oft.
Genauso kannst du Variablenwerte ausgeben. In Beispiel bj002 liest die Funktion einen Namen aus dem Eingabefeld. Ein console.log(name) direkt nach der var name = ...-Zeile würde dir in der Konsole zeigen was genau eingelesen wurde – praktisch wenn du prüfen willst ob der Wert wirklich stimmt.
Fehlermeldungen lesen
Wenn JavaScript auf einen Fehler trifft, bricht es an dieser Stelle ab und schreibt eine rote Fehlermeldung in die Konsole. Öffne bj001 mit geöffneter Konsole und klick auf den Button – alles funktioniert, keine Fehlermeldung.
Stell dir jetzt vor, du hättest dich bei der ID vertippt und statt "meinText" aus Versehen "meinTxt" geschrieben. JavaScript würde das Element nicht finden und in der Konsole erschiene eine Meldung wie:
TypeError: Cannot set properties of null
Das klingt kryptisch, aber es bedeutet schlicht: Ich habe kein Element mit dieser ID gefunden. Die Fehlermeldung zeigt dir außerdem die Zeilennummer im Code – so findest du die Ursache schnell. Mit der Zeit lernst du die häufigsten Fehlermeldungen kennen und weißt sofort was gemeint ist.
Code direkt eingeben
Die Konsole ist nicht nur zum Lesen da – du kannst dort auch direkt JavaScript eintippen und ausführen. Das ist ideal zum schnellen Ausprobieren, ohne eine Datei anfassen zu müssen.
Öffne bj001, öffne die Konsole und gib dort folgendes ein – dann Enter:
document.getElementById("meinText").innerHTML = "Direkt aus der Konsole!";Die Überschrift auf der Seite ändert sich sofort. Du hast gerade JavaScript direkt im Browser ausgeführt – ohne Button, ohne Funktion. Die Seite selbst wurde dabei nicht verändert; beim Neu laden ist alles wieder wie vorher.
Probiere auch das mit bj002: Öffne die Seite, tippe in der Konsole einen Wert in das Ausgabe-Element:
document.getElementById("ausgabe").innerHTML = "Hallo von der Konsole!";Auch hier erscheint der Text sofort auf der Seite. So kannst du JavaScript-Befehle testen bevor du sie fest in deinen Code schreibst.