Ваша консоль вас обманює

Ваші браузерні DevTools можуть вводити вас в оману під час налагодження. Вони не зламані. Вони оптимізовані для швидкості, а не для ідеальної точності.

Ось чому console.log не завжди можна вважати надійним.

• Ліниве обчислення Коли ви логуєте об'єкт, браузер не копіює його миттєво. Він зберігає живе посилання. Браузер зчитує властивості лише тоді, коли ви натискаєте на стрілку, щоб розгорнути його. Якщо ваш код змінює цей об'єкт до того, як ви натиснете, ви побачите нове значення, а не старе.

• Ефект Гейзенбага Додавання console.log може насправді приховувати помилки. Логування потребує часу та ресурсів. У швидкому коді ця крихітна затримка може змінити таймінг вашого застосунку. Це може запобігти виникненню станів гонитви (race conditions) саме під час вашого спостереження, через що помилка зникає.

• Пастки стану React Логування стану одразу після виклику setCount показує старе значення. Це стається через замикання та те, як React планує оновлення. Значення, яке ви логуєте, належить поточному рендеру, а не наступному.

• Помилки source maps У продакшені ваш код мініфікований і зібраний у бандл. Якщо ваші source maps застарілі або некоректні, консоль вкаже на неправильний рядок коду. Помилка справжня, але місце її виникнення вказано невірно.

Як налагоджувати краще:

  • Використовуйте structuredClone для створення знімків Якщо вам потрібно побачити об'єкт саме таким, яким він є зараз, використовуйте: const snap = structuredClone(obj) console.log(snap)

  • Логуйте примітиви замість великих об'єктів Логуйте ID, часові мітки або рядки зі статусом. Це зменшує ризик лінивого обчислення та впливу на продуктивність.

  • Використовуйте дебагер Використовуйте точки зупинки (breakpoints), щоб призупинити виконання. Це дозволяє перевірити фактичний стан і стек викликів, не змінюючи таймінг вашого коду.

  • Використовуйте DevTools фреймворків Якщо ви використовуєте React або Vue, використовуйте їхні спеціалізовані DevTools. Вони показують фази життєвого циклу та рендерингу точніше, ніж логи.

Консоль — чудовий інструмент для швидкого дослідження. Не використовуйте її як остаточне джерело істини.

Джерело: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc