Your Console Is Lying To You
Your browser DevTools might mislead you during debugging. It is not broken. It is optimized for speed, not for perfect accuracy.
Here is why you cannot always trust console.log.
• Lazy Evaluation When you log an object, the browser does not copy it immediately. It stores a live reference. The browser only reads the properties when you click the arrow to expand it. If your code changes that object before you click, you see the new value, not the old one.
• The Heisenbug Effect Adding a console.log can actually hide bugs. Logging takes time and resources. In fast code, this tiny delay can change the timing of your application. This can stop race conditions from happening while you watch, making the bug disappear.
• React State Traps Logging state immediately after a setCount call shows the old value. This happens because of closures and how React schedules updates. The value you log belongs to the current render, not the next one.
• Source Map Errors In production, your code is minified and bundled. If your source maps are old or incorrect, the console will point to the wrong line of code. The error is real, but the location is wrong.
How to debug better:
Use structuredClone to take snapshots If you need to see an object exactly as it is right now, use: const snap = structuredClone(obj) console.log(snap)
Log primitives instead of large objects Log IDs, timestamps, or status strings. This reduces the risk of lazy evaluation and performance hits.
Use the debugger Use breakpoints to pause execution. This lets you inspect the actual state and call stack without changing the timing of your code.
Use framework DevTools If you use React or Vue, use their specific DevTools. They show you lifecycle and render phases more accurately than logs.
The console is a great tool for quick exploration. Do not use it as your final source of truth.
Source: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc