Console.log-Debugging
Das einfachste und effektivste Debug-Werkzeug
⏱ ca. ~5 Min
01 · Lesen
Es gibt fancy Debug-Werkzeuge mit Breakpoints, Watch-Expressions und Step-Through-Execution. Die lernst du später. Aber das Werkzeug, das du am häufigsten benutzt, selbst als Senior-Entwickler, ist das schlichte console.log().
Die Idee ist absurd einfach: Drucke Dinge aus, um zu sehen, was tatsächlich passiert. Wenn dein Code sich anders verhält als erwartet, ist der schnellste Weg, das herauszufinden, jeden Schritt zu loggen und zu vergleichen, was du erwartest mit dem, was tatsächlich passiert.
Nicht fancy. Nicht elegant. Aber es funktioniert, und zwar schnell.
💡 Stell dir das so vorConsole.log-Debugging ist wie Wildkameras im Wald aufzustellen. Du kannst nicht jeden Baum gleichzeitig im Blick haben, aber du kannst Kameras an wichtigen Stellen platzieren, um zu sehen, was vorbeikommt. Wenn etwas Unerwartetes auftaucht, weißt du genau, wo du nachschauen musst.
02 · Lesen
Du hast eine Shop-App mit einem Bug. Die Funktion getAffordableElectronics sollte Elektronik unterhalb eines bestimmten Preises zurückgeben, die auf Lager ist. Aber sie gibt teure Artikel zurück, die nicht auf Lager sind. Wir untersuchen das.
03 · Terminal-Übung
Lies zuerst das Output-Log, um zu sehen, was die Funktion tatsächlich produziert vs. was erwartet wurde.
(Diese Sektion ist interaktiv — aktiviere JavaScript, um sie zu nutzen.)
04 · Terminal-Übung
Lies jetzt den Code und verfolge die Logik. Schau dir die Filter-Schritte an — einer davon hat einen subtilen Operator-Bug.
(Diese Sektion ist interaktiv — aktiviere JavaScript, um sie zu nutzen.)
05 · Code-Beispiel
Hier siehst du, wie es aussähe, wenn du an jedem Schritt Debug-Logs hinzufügst. Vergleiche die Zwischenergebnisse, um aufzuspüren, wo es schiefgeht.
Mit Debug-Logs
function getAffordableElectronics(items, maxPrice) {
console.log('Input:', items.length, 'items, max price:', maxPrice);
const electronics = items.filter(item => item.category === 'electronics');
console.log('After category filter:', electronics.map(i => i.name));
const affordable = electronics.filter(item => item.price > maxPrice);
console.log('After price filter:', affordable.map(i => i.name));
// ^ This would show ['Laptop', 'Monitor'] — WRONG direction!
const available = affordable.filter(item => item.inStock);
console.log('After stock filter:', available.map(i => i.name));
return available.map(item => item.name);
}
Mit Logs an jedem Schritt springt der Bug ins Auge: nach dem Preisfilter siehst du, dass teure Artikel überleben statt billiger. > sollte < sein. Ohne Logs hättest du vielleicht ewig geraten — mit Logs findest du es in Sekunden.
06 · Lesen
Strategisches Loggen ist eine Kunst. Schütte nicht überall Logs hin — platziere sie an Datentransformationen oder an Stellen, an denen etwas schiefgehen könnte.
Kernpunkte
- Am Anfang einer Funktion loggen (wurde sie aufgerufen? mit welchen Argumenten?)
- Vor und nach Transformationen loggen (was hat sich geändert?)
- Jedes Log mit einem Label versehen: console.log('step 3 - data:', data)
- Debug-Logs vor dem Commit entfernen
07 · Ausfüllen
Beim Debuggen mit console.log fügst du immer ein _____ hinzu, damit du weißt, welches Log zu welchem gehört.
08 · Quiz
Warum sollte jedes console.log ein Label bekommen?
- Damit der Code schneller läuft
- Damit du unterscheiden kannst, welches Log welche Ausgabe erzeugt
- JavaScript verlangt, dass console.log ein Label hat
- Nur Produktions-Code braucht Labels
Andere Lektionen aus diesem Kapitel
⚠ Das volle interaktive Erlebnis braucht JavaScript. Bitte aktiviere es und lade die Seite neu.
※ Diese Seite ist ein unabhängiges Bildungsprojekt — kein offizielles Anthropic-Produkt. Claude™ ist eine eingetragene Marke von Anthropic, PBC.