W poprzednich postach mówiłem trochę o tym, dlaczego używanie odpowiedniego debuggera w porównaniu do niektórych wbudowanych instrukcji PHP jest ważne. W ostatnim poście przechodzę nawet przez to, jak skonfigurować Xdebug za pomocą Visual Studio Code (i MAMP Pro, jeśli używasz).
Ale jeśli nigdy wcześniej nie korzystałeś z takiego narzędzia, nigdy nie widziałeś, jak ono działa, lub nigdy nie wiesz, dlaczego jest tak potężne, chcę omówić to trochę w tym poście.
Więc zamierzam przejść przez to trochę w kontekście kilku definicji i zrzutów ekranu, a także krótkiego screencastu na końcu, abym mógł pokazać działający debugger Visual Studio Code.
Debuger kodu programu Visual Studio
Zakładając, że masz zainstalowany debugger; jest kilka pojęć, których warto się nauczyć. Jasne, jest ich więcej, ale te, które uważam za kluczowe:
- Punkty przerwania to miejsce, w którym każesz programowi zatrzymać wykonywanie. Gdy kod zatrzyma się w tym momencie, możesz zbadać zmienne, zobaczyć, jakie wartości są przechowywane w pamięci i tak dalej.
- Zegarki to zmienne w kodzie, które chcesz dosłownie obserwować, gdy zmieniają się podczas wykonywania zmiennych.
- Start wprawia debuger w ruch. Nawet jeśli masz ustawione punkty przerwania i zegarki, debuger nie zrobi nic, dopóki go nie uruchomisz.
- Step Into to akcja, która po wywołaniu funkcji zabierze Cię do funkcji, która jest wywoływana. Czasami jest to przydatne, na przykład jeśli chcesz zobaczyć, co robi funkcja; innym razem jest to niepotrzebne, jeśli zależy ci tylko na wykonaniu funkcji lub zależy ci tylko na tym, co zwraca.
- Przekroczenie pozwoli Ci przeskoczyć wykonywanie funkcji tak, że wykonywanie programu zostanie zatrzymane natychmiast po zakończeniu funkcji, nad którą przeszłeś.
- Step Out jest używany, gdy wszedłeś do funkcji, osiągnąłeś punkt, w którym skończyłeś oceniać kod, a następnie jesteś gotowy do wyjścia z powrotem do miejsca, w którym ustawiłeś punkt przerwania.
- Stop zakończy działanie debugera.
Brzmi stosunkowo czysto, prawda? Moim zdaniem najłatwiej zobaczyć to w akcji.
Ponadto, aby zobaczyć, które ikony robią co, zwykle najlepiej jest najechać na nie kursorem, a następnie przeczytać podpowiedzi; jednak po pewnym czasie lub dwóch korzystania z nich będziesz zaznajomiony z tym, co każdy z nich robi.
W końcu ikony są dość opisowe.
Przykład
Mając to na uwadze, zakładając, że wykonałeś kroki opisane w poprzednim artykule, oto krótki przykład, jak ustawić punkt przerwania i śledzić jego wykonanie za pomocą wtyczki.
1 punkt przerwania
Zauważ, że na poniższym obrazku umieściłem punkt przerwania obok linii kodu (co wskazuje czerwona kropka).
W tym miejscu wykonanie zostanie zatrzymane po uruchomieniu debugera i rozpoczęciu wykonywania programu.
2 Ustaw zegarek
Następnie obserwowanie zmiennej oznacza, że chcemy widzieć wartość zmiennej przez cały cykl życia programu. Poniżej dodaję zegarek do zmiennej $description.
W następnej sekcji zobaczysz wartość zegarka po wykonaniu programu, który przekazał tę linię kodu.
3 Oceń zegarek
Gdy kod przejdzie przez ten wiersz, możesz zobaczyć wartość zmiennej w sekcji Obserwacja w okienku debugowania.
Zauważ, że w funkcji jest wywołanie woocommerce_wp_text_input. Użyjemy tej funkcji jako przykładu, aby przejść do funkcji, ponieważ jest to funkcja, która jest częścią rdzenia WooCommerce.
4 Przygotuj się do wejścia
Przed wejściem do funkcji należy się upewnić, że nazwa funkcji jest podświetlona.
Po zakończeniu będziesz mógł kliknąć przycisk Wejdź, aby zobaczyć, co dzieje się w funkcji.
5 Krok w
Po wejściu zobaczysz kod, którego nie napisałeś. Zamiast tego jest to kod będący częścią WooCommerce (przynajmniej w tym przykładzie).
W oparciu o swoje doświadczenie zobaczysz kod, który być może napisałeś lub napisał ktoś inny.
6 Wyjdź
Po wyjściu z kodu wrócisz do wiersza kodu bezpośrednio po tym, w którym wszedłeś w kod.
Ma sens?
Screencast
I na koniec, oto bardzo krótki screencast pokazujący, jak wygląda to wszystko w akcji:
Jak wspomniano w filmie, nie jest to wyczerpujące, ale powinno wystarczyć, aby pokazać, jak potężne może być debugowanie.
To wymaga czasu i praktyki
Debugowanie zajmuje trochę więcej czasu niż zrzucanie zmiennych na ekran.
I nie mówię, że robienie tego nie ma swojego miejsca; Jeśli jednak chcesz lepiej zrozumieć, co się dzieje za każdym razem, gdy uruchamiasz swój program lub chcesz poznać, powiedzmy, rdzeń WordPressa, użycie debuggera jest naprawdę dobrym sposobem na zrobienie tego.
Ponadto twierdzę, że użycie debuggera może pomóc w lepszym zrozumieniu tego, co dzieje się nie tak (lub dobrze) w kontekście kodu, abyś był w stanie stworzyć najlepsze możliwe rozwiązanie.