Console.log Is Lying to You: debugging traps and tricks
The article explores common pitfalls of using console.log for debugging in JavaScript, including asynchronous behavior, reference vs value copying, and how console.log can show outdated or misleading information. It offers practical tricks and alternative debugging techniques to avoid being misled by the console.
Background
console.log is a fundamental command in JavaScript: it prints a value to the browser's developer console for debugging. JavaScript is a programming language that powers almost all websites, and all major browsers have a built-in "DevTools" panel (the console) that developers use to inspect code. However, console.log has a subtle quirk: when you log objects or arrays, the console stores a **reference** to them (a pointer) rather than a snapshot of what they looked like at the moment the line ran. If the object's properties change after the log line executes, expanding the console later will show the *current* values, not the values when the log was called. This can make bugs appear to happen where they don't, or hide where they actually occur. The article also covers tricks like async timing traps (promises resolving out of order), how breakpoints are more reliable than logs, and lesser-known DevTools features (conditional breakpoints, the "monitor" function, blackboxing scripts you don't control).