czego szukasz?
budując złożoną aplikację internetową, prawdopodobnie napotkałeś na fakt, że coś nie działało zgodnie z planem. Spędziłeś wiele godzin szukając błędu w kodzie, a następnie w Internecie szukając pomocy w rozwiązaniu problemu. Aby ci to ułatwić, w tym artykule wyjaśniamy kilka skutecznych technik debugowania aplikacji internetowej, które znacznie zmniejszają ból związany z debugowaniem i skracają czas wykrywania problemów.
konsola.log
po pierwsze, powszechnie używana konsola metod javascript.dziennik. Możesz wstawić metodę do kodu z podaną zmienną. Podczas wykonywania kodu aplikacja zwróci wartość zmiennych określonych wewnątrz metody w konsoli. Jest to najprostszy sposób sprawdzenia, czy program zwraca wartość oczekiwaną.
niestety nie jest to zbyt skuteczna metoda debugowania. Takie podejście T nie pozwala nam zobaczyć postępu wykonania kodu (chyba że wstawimy konsolę.loguj co kilka linijek, ale wtedy ilość danych wrzuconych do konsoli będzie nieczytelna i będziemy tylko robić bałagan w kodzie.) Ponadto zwraca tylko przekazaną zmienną, pod warunkiem, że aplikacja nie wyrzuci błędu podczas wykonywania kodu.
wskazówka nr 1
jeśli masz wiele konsol.logi umieszczają nazwę w łańcuchu znaków i następną zmienną, np. konsolę.log(’zmienna’, zmienna).
Chrome DevTools (Karta Źródła)
bardziej wydajną metodą debugowania aplikacji internetowej jest użycie Chrome DevTools i zakładki Źródła. Zanim zaczniemy debugować w zakładce źródło, musimy dodać node_modules do black boxing. Dodajemy tę regułę, aby podczas przechodzenia przez punkty przerwania nie pokazywała nam plików z zewnętrznych pakietów, co utrudnia debugowanie. Musimy otworzyć ustawienia w Chrome → Blackboxing → Dodaj wzorce, a następnie napisać tam / node_modules.
po dodaniu node_modules do black boxing możemy przejść do zakładki Source. Załóżmy, że chcesz śledzić w czasie rzeczywistym proces swojej funkcji i sprawdzić wyniki. Naciśnij Ctrl + O na karcie źródło i wprowadź nazwę pliku źródłowego. Następnie umieść punkty przerwania na liniach kodu, które interesują, możesz i możesz rozpocząć wykonywanie procesu w przeglądarce. Gdy wybrane linie rozpoczną przetwarzanie, przeglądarka przestanie wykonywać kod. Zobacz zrzut ekranu poniżej.
jak widać, bieżąca linia kodu, w której przeglądarka została zatrzymana, ma niebieskie tło. Po prawej stronie znajduje się bar, w którym znajduje się nasze centrum dowodzenia. Oto nasze krótkie wprowadzenie.
elementy sterujące
u góry paska znajduje się sekcja elementy sterujące. Skupmy się na kluczowych elementach. Pierwsza kontrola wznowienia przenosi nas do następnego oznaczonego punktu przerwania w zakresie wykonywanego kodu. Drugi krok kontrolny nad następnym wywołaniem funkcji przenosi nas do następnej linii wykonywanego kodu. Kontrola ostatnich Deaktywnych punktów przerwania dezaktywuje wybrane punkty przerwania. Jest to przydatna Kontrola, gdy mamy zaznaczone wiele punktów przerwania i chcemy wrócić do klikania aplikacji na chwilę bez zatrzymywania się na każdym punkcie przerwania.
zakresy
mamy sekcję zakresy poniżej. Mamy kilka rodzajów zakresów: local( aktualnie wykonywana funkcja) i closures w zależności od zakresu, w którym jesteśmy (na przykład rodzic aktualnie wykonywanej funkcji lub komponentu). W każdym z tych zakresów przeglądarka pokazuje nam wszystkie występujące w nich zmienne.
punkty przerwania
ostatnia omawiana sekcja to punkty przerwania. Pokazuje, jakie punkty przerwania i w jakich plikach są zaznaczone. Za pomocą pól wyboru możemy je łatwo dezaktywować i ponownie aktywować.
2-5
- jeśli używasz niezmiennego.js w swoim projekcie zainstaluj niezmienny.wtyczka js Object Formatter i aktywuj ją w ustawieniach przeglądarki. Znacznie uprości to debugowanie niezmiennych obiektów.
- jeśli nie używasz immutable.js w Twoim projekcie i używasz kodu Visual Studio jako IDE, zdecydowanie zalecamy instalację i konfigurację debuggera dla Chrome (VSC nie ma niezmiennego.wtyczka formatowania js). Upraszcza to jeszcze bardziej debugowanie i pozwala na szybsze zmiany kodu.
- jeśli karta źródło nie pokazuje plików lokalnych, sprawdź mapę źródła w swoim projekcie.
- gdy przeglądarka zatrzymuje się na punkcie przerwania, masz dostęp do zmiennych również w konsoli.
narzędzia programistyczne React
narzędzia programistyczne React są również pomocnymi rozwiązaniami. Takie narzędzia umożliwiają łatwe przeglądanie struktury drzewa Reactowego w projekcie, stanów i właściwości komponentu. Funkcja Wybierz element na stronie, aby go sprawdzić, jest potężna, zwłaszcza gdy nie znasz całego projektu. Pomaga znaleźć komponent, który chcesz zaktualizować.
wskazówka nr 6
jeśli używasz Vue. js, możesz użyć Vue.js devtools. Rozszerzenie ma podobne funkcje i dostęp do Vuex (odpowiednika redux w reaccie).
Redux DevTools
jeśli używasz Redux w swoim projekcie, Redux DevTools jest koniecznością. Takie rozwiązanie pozwala śledzić pełny przepływ akcji, zmian statusu, ładunku i przeglądać bieżący sklep po każdej wykonanej akcji. Jeśli coś nie działa tak, jak zakładamy, a wszystko wydaje się w kodzie w porządku, warto zastanowić się, jakie akcje wysyłają, z jaką ładownością. Czasami zdarzają się proste błędy, takie jak skopiowanie stałej z powyższej akcji, zmiana nazwy bez zmiany wartości, a następnie wywołanie czegoś zupełnie innego. Poniżej znajduje się gif pokazujący najważniejsze funkcje Redux DevTools.
7
jeśli aplikacja wykonuje dużą liczbę operacji, rozszerzenie może nie działać poprawnie z powodu niewystarczającej pamięci do przetworzenia tak wielu operacji. Możesz spróbować skonfigurować go w opcjach rozszerzenia (w tym przypadku opcja maxAge.)
Fiddler
ostatnim narzędziem, które chcielibyśmy wprowadzić, jest Fiddler. Narzędzie zostało stworzone do zarządzania ruchem sieciowym. Jest to bardzo przydatne, gdy mamy jakieś błędy produkcyjne i nie możemy skopiować danych produkcyjnych do niższego środowiska, aby debugować lokalnie. W takiej sytuacji, aby mieć dostęp do danych produkcyjnych w środowisku lokalnym, ustawiamy ruch w zakładce AutoResponder. Po otwarciu strony, zamiast pobierać plik js z serwera, Fidler łączy nasz lokalnie zbudowany plik produkcyjny. Dalsze debugowanie odbywa się w zakładce chrome Dev tools source. Poniżej znajduje się zrzut ekranu z ustawieniem przekierowania ruchu do pliku lokalnego. Program pozwala również na makiety punktów końcowych.
wskazówka nr 8
jeśli chcesz tworzyć mocki punktów końcowych w łatwy i szybki sposób, możesz użyć programu mock moon.
podsumowanie zwinnego debugowania aplikacji internetowej
dla wielu z nas proces debugowania aplikacji internetowej wiąże się z bólem głowy i długimi godzinami spędzonymi przed komputerem. Jednak proces ten można skrócić i uczynić przyjemniejszym, jeśli masz odpowiednie narzędzia i wiedzę na ich temat. Często są one na wyciągnięcie ręki i za darmo. Podzieliliśmy się z wami najważniejszymi i przydatnymi narzędziami, z których korzystamy na co dzień.