Deine Konsole lügt dich an

Deine Browser-DevTools können dich beim Debugging in die Irre führen. Sie sind nicht kaputt. Sie sind auf Geschwindigkeit optimiert, nicht auf perfekte Genauigkeit.

Hier ist der Grund, warum du console.log nicht immer vertrauen kannst.

• Lazy Evaluation Wenn du ein Objekt loggst, kopiert der Browser es nicht sofort. Er speichert eine Live-Referenz. Der Browser liest die Eigenschaften erst aus, wenn du auf den Pfeil klickst, um es zu erweitern. Wenn dein Code das Objekt ändert, bevor du klickst, siehst du den neuen Wert, nicht den alten.

• Der Heisenbug-Effekt Das Hinzufügen eines console.log kann Bugs tatsächlich verbergen. Das Loggen kostet Zeit und Ressourcen. In schnellem Code kann diese winzige Verzögerung das Timing deiner Anwendung verändern. Dies kann dazu führen, dass Race Conditions während der Beobachtung nicht mehr auftreten, wodurch der Bug verschwindet.

• React State-Fallen Das Loggen des States unmittelbar nach einem setCount-Aufruf zeigt den alten Wert an. Das liegt an Closures und der Art und Weise, wie React Updates plant. Der Wert, den du loggst, gehört zum aktuellen Render, nicht zum nächsten.

• Source-Map-Fehler In der Produktion wird dein Code minifiziert und gebündelt. Wenn deine Source Maps veraltet oder fehlerhaft sind, zeigt die Konsole auf die falsche Codezeile. Der Fehler ist real, aber die Position ist falsch.

So debuggst du besser:

  • Nutze structuredClone, um Snapshots zu erstellen Wenn du ein Objekt genau so sehen möchtest, wie es in diesem Moment ist, verwende: const snap = structuredClone(obj) console.log(snap)

  • Logge Primitive statt großer Objekte Logge IDs, Zeitstempel oder Status-Strings. Dies verringert das Risiko von Lazy Evaluation und Performance-Einbußen.

  • Nutze den Debugger Verwende Breakpoints, um die Ausführung anzuhalten. So kannst du den tatsächlichen State und den Call Stack untersuchen, ohne das Timing deines Codes zu verändern.

  • Nutze Framework-DevTools Wenn du React oder Vue verwendest, nutze deren spezifische DevTools. Sie zeigen dir Lifecycle- und Render-Phasen genauer an als Logs.

Die Konsole ist ein großartiges Werkzeug für schnelle Erkundungen. Nutze sie jedoch nicht als deine endgültige Quelle der Wahrheit.

Quelle: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc