Debugowanie JS w Firefoksie

Nie wiem, jak to się stało, ale dopiero niedawno odkryłem debugowanie skryptów JS w przeglądarce (a konkretniej w Firefoksie). Po tylu latach zwróciłem uwagę na taką możliwość w narzędziach deweloperskich, a gdy zacząłem drążyć temat okazało się, że jest to niesamowicie wygodne i proste w użyciu.

W większości przypadków wystarczy po prostu uruchomić narzędzia deweloperskie w przeglądarce, wskazać interesujący nas plik i założyć w nim breakpointy. Przeglądarka po osiągnięciu wskazanego miejsca w kodzie po prostu wstrzyma jego wykonywanie i pozwoli nam na dalsze przetwarzanie krok po kroku, wraz z podglądem kontekstu, śledzeniem określonych zmiennych, itd.

Przy używaniu debuggera zauważyłem, że nie wszystkie pliki są widoczne na liście źródeł. To jednak też łatwo rozwiązać – wystarczy w dynamicznie ładowanym pliku JS umieścić odpowiednią adnotację.

Również w przypadku często stosowanej minifikacji skryptów nie będzie problemów z debugowaniem – firefoksowy debugger ma wbudowany prettyfier, który sformatuje zminifikowany kod do czytelnej konwencji.