Wenn JavaScript nicht das tut was du erwartest, tappst du schnell im Dunkeln. Hat die Variable den richtigen Wert? Wird die Funktion überhaupt aufgerufen? Genau dafür gibt es console.log(). Du schreibst es direkt in deinen Code und siehst die Ausgabe live im Browser – ohne die Seite umzubauen, ohne extra Werkzeuge.
Abschnitte: Die Konsole öffnen, Die Grundlagen, Variablen prüfen, Nützliche Varianten, Danach aufräumen.
Die Konsole öffnen
Die Ausgaben von console.log() landen nicht auf der Webseite selbst – sie erscheinen in den Entwicklertools des Browsers. Die öffnest du so:
- Windows / Linux: Taste F12 drücken, dann den Tab Konsole wählen.
- Mac: Cmd + Option + J
- Oder: Rechtsklick auf die Seite → Untersuchen → Tab Konsole
Die Konsole zeigt dir nicht nur deine eigenen Ausgaben – der Browser meldet dort auch automatisch Fehler, wenn etwas in deinem JavaScript schiefläuft. Es lohnt sich, sie beim Entwickeln immer offen zu haben.
Die Grundlagen
Die Verwendung ist denkbar einfach – du übergibst console.log() einfach das, was du sehen möchtest:
console.log("Hallo Welt");
// Ausgabe in der Konsole: Hallo Welt
console.log(42);
// Ausgabe: 42
console.log("Der Wert ist:", 42);
// Ausgabe: Der Wert ist: 42Du kannst Text in Anführungszeichen, Zahlen oder Variablen übergeben – und auch mehrere Werte gleichzeitig, getrennt durch ein Komma.
Variablen prüfen
Der häufigste Einsatz: du willst wissen ob eine Variable den richtigen Wert hat. Statt zu raten, loggst du sie einfach aus:
let name = "Matthias";
let alter = 32;
console.log(name);
// Ausgabe: Matthias
console.log("Name:", name, "| Alter:", alter);
// Ausgabe: Name: Matthias | Alter: 32Besonders praktisch ist es, den Variablennamen als Text davor zu schreiben – so weißt du bei mehreren Ausgaben sofort welcher Wert zu welcher Variable gehört.
Du kannst auch prüfen ob eine Funktion überhaupt aufgerufen wird – einfach ein console.log() am Anfang der Funktion einbauen:
function berechne(zahl) {
console.log("Funktion aufgerufen mit:", zahl);
return zahl * 2;
}
berechne(5);
// Konsole zeigt: Funktion aufgerufen mit: 5Erscheint die Ausgabe nicht in der Konsole, wird die Funktion gar nicht erst erreicht – das verrät dir schon wo das Problem liegt.
Nützliche Varianten
Neben console.log() gibt es noch ein paar Geschwister die dir farblich markierte Ausgaben liefern – praktisch um wichtige Meldungen hervorzuheben:
console.log("Normale Ausgabe"); // grau / Standard
console.info("Information"); // blau – Hinweis
console.warn("Achtung, prüf das mal!"); // gelb – Warnung
console.error("Da ist etwas falsch!"); // rot – Fehler
Für den Alltag reicht console.log() völlig aus. Die anderen Varianten sind nützlich wenn du größere Skripte schreibst und Ausgaben nach Schweregrad unterscheiden willst.
Danach aufräumen
console.log() ist ein Werkzeug für die Entwicklung – nicht für die fertige Seite. Bevor du eine Seite veröffentlichst, solltest du alle Ausgaben wieder entfernen. Gründe dafür:
- Jeder Besucher kann die Konsole öffnen und deine Debug-Ausgaben lesen – das gibt manchmal ungewollte Einblicke in die Logik deiner Seite.
- Viele Log-Aufrufe können die Performance minimal bremsen.
- Es sieht schlicht unprofessionell aus wenn eine fertige Seite noch voller Test-Ausgaben steckt.
Ein einfacher Trick: Such im Editor nach console.log – Notepad++ zeigt dir dann alle Fundstellen auf einen Blick (Suchen → In allen geöffneten Dokumenten suchen).