Mój sprawdzony trik na szybkie debugowanie: zamrażanie strony za pomocą setTimeout i debugger

Jako web developer wiem, że jedne z najtrudniejszych do debugowania elementów to dropdowny, menu czy listy, które znikają lub zmieniają stan, gdy tracą fokus albo gdy klikniesz w inną część strony. Mój ulubiony i błyskawiczny sposób na nie to setTimeout(() => { debugger; }, 5000). Dlaczego to tak dobrze działa:

Czas na interakcję: Opóźnienie 5 sekund (albo dowolne inne) daje Ci wystarczająco dużo czasu, żeby kliknąć co trzeba na stronie i doprowadzić element do pożądanego stanu.
Wstrzymanie wykonywania: Gdy przeglądarka dojdzie do instrukcji debugger, zatrzymuje wykonywanie kodu, co w praktyce "zamraża" stronę. Możesz wtedy spokojnie obejrzeć aktualny stan swoich elementów.
Idealne dla ulotnych elementów: Przydaje się to szczególnie przy elementach, które znikają, gdy klikniesz gdzie indziej albo otworzysz narzędzia deweloperskie, bo pozwala sprawdzić ich style, atrybuty i całą resztę.
Bez skomplikowanej konfiguracji: To jedna prosta linijka kodu, która nie wymaga ustawiania breakpointów w DevTools ani większych zmian w istniejącym kodzie.

Użycie:

jsjavascript

setTimeout(() => { debugger; }, 5000)

Wystarczy uruchomić to w konsoli przeglądarki albo w swoim kodzie, doprowadzić elementy na stronie do stanu, który chcesz zbadać, i poczekać na wstrzymanie wykonywania.

Pamiętaj, że to trik wyłącznie na czas developmentu, więc jeśli użyjesz go w kodzie, koniecznie usuń go przed wdrożeniem na produkcję!

Miłego debugowania!