Your Console Is Lying To You

Инструменты разработчика (DevTools) в вашем браузере могут вводить вас в заблуждение во время отладки. С ними всё в порядке. Они оптимизированы для скорости, а не для идеальной точности.

Вот почему console.log не всегда можно использовать как источник истины.

• Lazy Evaluation Когда вы логируете объект, браузер не копирует его мгновенно. Он сохраняет живую ссылку. Браузер считывает свойства только тогда, когда вы нажимаете на стрелку, чтобы развернуть объект. Если ваш код изменит этот объект до того, как вы нажмете на стрелку, вы увидите новое значение, а не старое.

• The Heisenbug Effect Добавление console.log может на самом деле скрывать баги. Логирование требует времени и ресурсов. В быстром коде эта крошечная задержка может изменить тайминг вашего приложения. Это может предотвратить возникновение состояния гонки (race condition) в тот момент, когда вы наблюдаете за процессом, из-за чего баг исчезает.

• React State Traps Логирование состояния сразу после вызова setCount покажет старое значение. Это происходит из-за замыканий и того, как React планирует обновления. Значение, которое вы логируете, относится к текущему рендеру, а не к следующему.

• Source Map Errors В продакшене ваш код минифицирован и собран в бандл. Если ваши source maps устарели или некорректны, консоль укажет на неверную строку кода. Ошибка реальна, но местоположение указано неверно.

How to debug better:

  • Use structuredClone to take snapshots Если вам нужно увидеть объект именно таким, каким он является в данный момент, используйте: const snap = structuredClone(obj) console.log(snap)

  • Log primitives instead of large objects Логируйте ID, временные метки (timestamps) или строки статуса. Это снижает риск ленивых вычислений и падения производительности.

  • Use the debugger Используйте точки остановки (breakpoints), чтобы приостановить выполнение. Это позволит вам изучить реальное состояние и стек вызовов (call stack), не меняя тайминг вашего кода.

  • Use framework DevTools Если вы используете React или Vue, используйте их специализированные DevTools. Они показывают фазы жизненного цикла и рендеринга точнее, чем логи.

Консоль — отличный инструмент для быстрого исследования. Не используйте её как окончательный источник истины.

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