Twoja konsola Cię okłamuje

Narzędzia deweloperskie (DevTools) Twojej przeglądarki mogą wprowadzać Cię w błąd podczas debugowania. To nie błąd. Są one zoptymalizowane pod kątem szybkości, a nie idealnej dokładności.

Oto dlaczego nie zawsze można ufać console.log.

• Leniwa ewaluacja Kiedy logujesz obiekt, przeglądarka nie kopiuje go natychmiast. Przechowuje jedynie żywe odniesienie (reference). Przeglądarka odczytuje właściwości dopiero w momencie, gdy klikniesz strzałkę, aby go rozwinąć. Jeśli Twój kod zmieni ten obiekt przed kliknięciem, zobaczysz nową wartość, a nie starą.

• Efekt Heisenbuga Dodanie console.log może w rzeczywistości ukryć błędy. Logowanie zajmuje czas i zasoby. W szybkim kodzie to minimalne opóźnienie może zmienić timing Twojej aplikacji. Może to zapobiec występowaniu wyścigów (race conditions) w momencie, gdy obserwujesz kod, co sprawia, że błąd znika.

• Pułapki stanu w React Logowanie stanu natychmiast po wywołaniu setCount pokazuje starą wartość. Dzieje się tak z powodu domknięć (closures) oraz sposobu, w jaki React planuje aktualizacje. Wartość, którą logujesz, należy do bieżącego renderowania, a nie do następnego.

• Błędy map źródłowych W środowisku produkcyjnym Twój kod jest minifikowany i pakowany (bundled). Jeśli mapy źródłowe są nieaktualne lub błędne, konsola wskaże niewłaściwą linię kodu. Błąd jest prawdziwy, ale jego lokalizacja jest błędna.

Jak debugować lepiej:

  • Używaj structuredClone, aby robić migawki (snapshots) Jeśli chcesz zobaczyć obiekt dokładnie takim, jakim jest w danej chwili, użyj: const snap = structuredClone(obj) console.log(snap)

  • Loguj typy proste zamiast dużych obiektów Loguj identyfikatory (ID), znaczniki czasu lub ciągi znaków ze statusem. Zmniejsza to ryzyko związane z leniwą ewaluacją oraz spadkami wydajności.

  • Używaj debuggera Używaj punktów przerwania (breakpoints), aby zatrzymać wykonywanie kodu. Pozwala to na inspekcję faktycznego stanu i stosu wywołań (call stack) bez zmiany timingu Twojego kodu.

  • Używaj dedykowanych narzędzi DevTools dla frameworków Jeśli używasz Reacta lub Vue, korzystaj z ich dedykowanych narzędzi DevTools. Pokazują one fazy cyklu życia i renderowania dokładniej niż logi.

Konsola to świetne narzędzie do szybkiej eksploracji. Nie traktuj jej jednak jako ostatecznego źródła prawdy.

Źródło: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc