Tu consola te está mintiendo

Las DevTools de tu navegador podrían engañarte durante la depuración. No es que estén rotas. Están optimizadas para la velocidad, no para una precisión perfecta.

He aquí por qué no siempre puedes confiar en console.log.

• Evaluación perezosa (Lazy Evaluation) Cuando registras un objeto, el navegador no lo copia inmediatamente. Almacena una referencia en vivo. El navegador solo lee las propiedades cuando haces clic en la flecha para expandirlo. Si tu código cambia ese objeto antes de que hagas clic, verás el nuevo valor, no el anterior.

• El efecto Heisenbug Añadir un console.log puede, de hecho, ocultar errores. El registro consume tiempo y recursos. En un código rápido, este pequeño retraso puede alterar la sincronización de tu aplicación. Esto puede evitar que ocurran condiciones de carrera (race conditions) mientras observas, haciendo que el error desaparezca.

• Trampas del estado de React Registrar el estado inmediatamente después de una llamada a setCount muestra el valor antiguo. Esto sucede debido a los cierres (closures) y a cómo React programa las actualizaciones. El valor que registras pertenece al renderizado actual, no al siguiente.

• Errores de Source Maps En producción, tu código está minificado y empaquetado. Si tus source maps son antiguos o incorrectos, la consola señalará la línea de código equivocada. El error es real, pero la ubicación es incorrecta.

Cómo depurar mejor:

  • Usa structuredClone para tomar instantáneas Si necesitas ver un objeto exactamente como es en este momento, usa: const snap = structuredClone(obj) console.log(snap)

  • Registra primitivos en lugar de objetos grandes Registra IDs, marcas de tiempo (timestamps) o cadenas de estado. Esto reduce el riesgo de la evaluación perezosa y los impactos en el rendimiento.

  • Usa el debugger Usa puntos de interrupción (breakpoints) para pausar la ejecución. Esto te permite inspeccionar el estado real y la pila de llamadas (call stack) sin alterar la sincronización de tu código.

  • Usa las DevTools del framework Si usas React o Vue, utiliza sus DevTools específicas. Muestran las fases de ciclo de vida y renderizado con mayor precisión que los logs.

La consola es una gran herramienta para una exploración rápida. No la uses como tu fuente definitiva de verdad.

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