Mit der Konsole kannst du also hervorragende Ausgaben machen, die dir helfen, Zwischenergebnisse anzusehen, die der Anwender später nicht sehen soll. Anbei zeige ich dir noch spezielle Konsolenmethoden, die zusätzlich zum Debugging existieren.

Die Verwendung von console.debug()

console.debug() ist eine leistungsstarke, aber oft übersehene Methode des console-Objekts in JavaScript. Diese Funktion dient speziell zur Ausgabe von Debug-Informationen während der Entwicklung.

Grundlegende Funktionsweise

console.debug() funktioniert ähnlich wie console.log(), ist jedoch speziell für Debug-Zwecke konzipiert:

console.debug("Dies ist eine Debug-Nachricht", { wert: 42 });

Besonderheiten von console.debug()

1. Unterschied zur Standardausgabe

Der Hauptunterschied zu console.log() liegt in der Filtermöglichkeit:

• In den meisten Browsern sind console.debug()-Ausgaben standardmäßig ausgeblendet
• In Chrome müssen Entwickler explizit die Log-Ebene „Verbose“ oder „All“ aktivieren
• In Firefox müssen Entwickler den „Debug“-Filter einschalten
• In Node.js erscheinen sie standardmäßig, können aber durch Logging-Level gesteuert werden

2. Visuelle Darstellung

In manchen Umgebungen werden Debug-Ausgaben anders formatiert oder hervorgehoben:

• Grau oder weniger prominent als reguläre Log-Ausgaben
• Manchmal mit einem speziellen Präfix oder Icon gekennzeichnet
• Können in Produktionsumgebungen automatisch unterdrückt werden

Vorteile gegenüber console.log()

Logging-Frameworks: In vielen Logging-Frameworks wird debug als eigene Log-Ebene behandelt

Klarere Trennung von Informationen: console.debug() signalisiert eindeutig Debug-Informationen

Einfacheres Filtern: Erleichtert das Ausblenden von Debug-Ausgaben in der Konsole

Bessere Code-Hygiene: Du kannst Debug-Ausgaben im Code belassen, ohne dass sie normale Nutzer stören

Bedingtes Logging mit assert

function divide(a, b) {
console.assert(b !== 0, ‚Division durch Null!‘);
return a / b;
}

divide(10, 0); // „Assertion failed: Division durch Null!“

Debugging-Best-Practices

1. Verwende console.table() für die Anzeige von Arrays und Objektsammlungen
2. Nutze Gruppierung mit console.group() für strukturierte Logs
3. Verwende console.trace(), um herauszufinden, woher ein Funktionsaufruf stammt
4. Setze Zeitmessungen mit console.time() für Performance-Optimierungen ein
5. Entferne oder deaktiviere Debug-Ausgaben in Produktionscode

Das console-Objekt ist ein mächtiges Werkzeug für das Debugging und die Entwicklung von JavaScript-Anwendungen. Mit den verschiedenen verfügbaren Methoden kannst du Informationen effektiver strukturieren und präsentieren, was die Fehlersuche und Optimierung erheblich erleichtert.

Hinweise für gezieltes Debuggen

Sinnvolle Ausgaben: Verwende verständliche und präzise Formulierungen, damit du beim späteren Lesen sofort erkennst, worauf sich die Ausgabe bezieht.

Richtiger Einsatzort: Platziere Ausgaben genau an den Stellen im Code, an denen du den aktuellen Zustand oder einen bestimmten Wert nachvollziehen möchtest.

Aufräumen nicht vergessen: Sobald der Fehler gefunden ist, solltest du überflüssige Konsolenausgaben wieder entfernen, damit der Code übersichtlich bleibt.

Alternativen:

Viele verschiedene IDEs haben einen eigenen Debug-Modus. In unserer Anleitung zu JetBrains WebStorm und PHPStorm zeigen wir dir, wie du auch mit weniger Konsolen-Ausgaben arbeiten kannst. Dennoch kann es manchmal sinnvoll sein, nicht ganz darauf zu verzichten: Du kannst nicht unbedingt immer mit den gleichen Ausgaben in jedem Browser und vor allem den unterschiedlichen Versionen von Ausgehen.