Debugowanie lokalne (przez koło zamachowe): Przewodnik dla początkujących

Opublikowany: 2022-08-13

Problemy pojawiające się na stronie internetowej lub nawet w ramach lokalnej instalacji strony internetowej mogą być denerwujące. W końcu problemy z wydajnością witryny lub błędy mogą spowodować przestój witryny. A przestoje w witrynie mogą oznaczać utratę ruchu, stracone okazje, a nawet utratę przychodów.

Na szczęście istnieje wiele rozwiązań debugowania służących do identyfikowania i naprawiania problemów z witryną. Ale skąd możesz wiedzieć, co najlepiej sprawdzi się w Twojej sytuacji?

W języku lokalnym dostępne jest wielokierunkowe podejście do debugowania. W tym miejscu omówimy domyślne opcje debugowania zawarte w Local, a także sposoby identyfikowania błędów i dodatkowe dodatki, których można użyć do szybszego i wydajniejszego wykrywania i naprawiania problemów.

Co to jest Xdebug w języku lokalnym?

Zanim omówimy sposób debugowania w Local, musimy najpierw porozmawiać o Xdebug, narzędziu debugowania dostępnym w Local i niektórych z jego najbardziej godnych uwagi funkcji.

Xdebug jest w rzeczywistości rozszerzeniem PHP, które upraszcza proces debugowania. Przede wszystkim sprawia, że ​​formatowanie funkcji var_dump () jest czystsze i dodaje więcej ostrzeżeń i powiadomień o określonych błędach. W ten sposób zapewnia bardziej intuicyjne wrażenia użytkownika.

xdebug var różnice zrzutu

Jeśli nie wiesz, var_dump() to przydatna część PHP, która szybko ujawnia, co jest nie tak z twoim kodem. Ale różnica polega na tym, że jeśli nie masz pod ręką Xdebug, kod generowany po wywołaniu var_dump() byłoby o wiele trudniejsze do odczytania. Dodatkowo musiałbyś sformatować PHP w bardzo szczególny sposób, nawet wywołując var_dump() na pierwszym miejscu.

Xdebug jest dostępny w języku lokalnym, ponieważ oferuje większą ilość informacji o błędach, gdy się pojawią. Jest również wyposażony w debugger krokowy, który usprawnia proces debugowania, szczególnie w przypadku większych problemów. Debuger kroków działa, umożliwiając ocenę kodu krok po kroku w określonych punktach przerwania. Pozwala to ocenić kod w mniejszych sekcjach i łatwiej zlokalizować problemy.

A najlepsze jest to, że Xdebug jest domyślnie włączony w Local, więc nie musisz nawet grzebać w żadnych ustawieniach, aby zacząć. Po prostu otwórz Lokalny i idź.

Jak debugować witrynę lokalnie?

Witrynę można debugować w trybie lokalnym na kilka kluczowych sposobów. Oto podstawowe kroki, które będziemy omawiać:

  1. Identyfikowanie błędów konsoli przeglądarki
  2. Korzystanie z Monitora zapytań
  3. Przez Xdebug i VS Code
  4. Z Xdebug i PhpStorm
  5. Używanie Xdebug do debugowania krokowego

Zanurzmy się.

1. Zidentyfikuj błędy konsoli przeglądarki

Konsola przeglądarki Firefox w trybie lokalnym

Pierwszym krokiem w debugowaniu jest użycie konsoli przeglądarki, która jest częścią wszystkich narzędzi programistycznych przeglądarek. Pozwala to wykryć błędy na stronach internetowych bez specjalnych narzędzi. Po prostu uruchom Local, wejdź na daną stronę w wybranej przeglądarce i użyj konsoli, aby wykryć błędy. Poniżej znajduje się zestawienie sposobu uzyskiwania dostępu do konsoli przeglądarki w wielu przeglądarkach.

Jeśli używasz Chrome…

  1. Otwórz DevTools, przechodząc do Więcej narzędzi > Narzędzia programistyczne w menu przeglądarki Chrome. Alternatywnie naciśnij Ctrl/Cmd+Shift+I .
  2. Kliknij kartę Konsola .
  3. Jeśli są jakieś błędy, powinny być teraz widoczne. Jeśli nie, przeładuj stronę internetową, aby je wygenerować.
  4. Zanotuj typ błędu, jego lokalizację oraz numer wiersza w konsoli przeglądarki.

Jeśli używasz Firefoksa…

  1. Otwórz narzędzia programistyczne przeglądarki, przechodząc do Więcej narzędzi > Narzędzia programistów internetowych w menu Firefox. Tutaj również działa Ctrl/Cmd+Shift+I .
  2. Kliknij konsolę patka. Alternatywnie możesz również uzyskać dostęp do konsoli bezpośrednio przez Więcej narzędzi > Konsola przeglądarki .
  3. Wszelkie błędy powinny być teraz widoczne. Jeśli nie, odśwież stronę.

Jeśli korzystasz z Safari…

  1. Włącz Narzędzia programistyczne, przechodząc do Preferencje> Zaawansowane w menu Safari. Option+Cmd+I jest tutaj twoim przyjacielem.
  2. Zaznacz pole obok Pokaż menu rozwijania na pasku menu . Następnie zamknij okno dialogowe.
  3. Kliknij Rozwijaj > Pokaż konsolę błędów . Taka sama oferta jak powyżej.

Uzbrojony w te informacje, możesz wrócić do systemu plików skonfigurowanego w trybie lokalnym i znaleźć konkretny fragment kodu powodujący problemy, a następnie wdrożyć poprawkę. Użyj przycisku Przejdź do folderu serwisu , aby uzyskać dostęp do lokalizacji lokalnych serwisów WWW.

przejdź do folderu witryny

2. Użyj Monitora zapytań, aby naprawić problemy z wydajnością witryny

Możesz również identyfikować i naprawiać problemy z witryną bezpośrednio w WordPressie. W rzeczywistości wtyczka Query Monitor to fantastyczny wybór do debugowania i identyfikacji problemów z wydajnością. Stanowi to przydatną parę z wbudowanymi lokalnymi narzędziami do debugowania i jest szczególnie pomocne w wykrywaniu problemów z wtyczkami i motywami innych firm.

Możesz zainstalować wtyczkę jak każdą inną. Po prostu przejdź do Wtyczki> Dodaj nowy i wyszukaj go według nazwy. Znajdź go na liście i kliknij Zainstaluj teraz , a następnie Aktywuj po pobraniu.

zainstaluj monitor zapytań

Co monitor zapytań może ci powiedzieć

Po zainstalowaniu wtyczki powinieneś zobaczyć nową opcję menu u góry pulpitu WordPress.

menu paska administracyjnego monitora zapytań

Najechanie na nią spowoduje wyświetlenie rozwijanej listy narzędzi i opcji Monitora zapytań. Wybranie dowolnego z nich otworzy menu na dole, w którym możesz dowiedzieć się więcej o bieżącej stronie.

Konsola monitora zapytań

Monitor zapytań zapewni między innymi przegląd wydajności Twojej strony, w tym:

  • Szczytowe wykorzystanie pamięci. To narzędzie pokazuje, ile pamięci jest używane do wygenerowania strony w danym momencie.
  • Czas generowania strony. Pokazuje, ile czasu zajmuje wygenerowanie strony.
  • Czas zapytań do bazy danych. Na koniec, to narzędzie pokazuje, ile czasu zajęło bazie danych odpowiedź na żądania motywów lub wtyczek.

Oprócz problemów z wydajnością ta wtyczka może również identyfikować błędy i powiadomienia PHP — podobnie jak robi to Xdebug. Jednak jego wysiłki koncentrują się na motywach i wtyczkach innych firm. Wygodne jest to, że jeśli wystąpią błędy, w narzędziu pojawi się nowa zakładka o trafnej nazwie Błędy PHP , która wyświetli listę każdego błędu wraz z jego zagrożeniem bezpieczeństwa. Poinformuje Cię również o wierszu kodu, w którym pojawia się błąd, a także o konkretnym kodzie błędu lub powiadomieniu.

Teraz jest to naprawdę pomocne w przypadku witryn, które już działają lub są na późnym etapie testowania. Jednakże, jeśli nadal jesteś na etapie rozwoju lokalnego, najlepszym rozwiązaniem będzie użycie Xdebug in Local.

3. Konfigurowanie Xdebug i VS Code do debugowania

Po powrocie do Local możesz korzystać z Xdebug na wiele sposobów, aby przeprowadzić debugowanie witryny lokalnej. Aby uzyskać więcej korzyści za wydaną złotówkę, możesz, że tak powiem, dodać moc VS Code do równania.

VS Code to edytor kodu typu open source z rozbudowanymi narzędziami i bardziej intuicyjnym interfejsem użytkownika. Dzięki temu proces debugowania wiersz po wierszu jest o wiele bardziej intuicyjny i łatwy dla oczu.

Visual Studio code vscode code editor

W rzeczywistości możesz podłączyć VS Code do Xdebug Step Debugger, aby uzyskać świetny efekt. Oto jak skonfigurować go do użytku w lokalnym:

  1. Pobierz VS Code i zainstaluj go zgodnie z instrukcjami programisty.
  2. Pobierz i zainstaluj rozszerzenie debugera PHP. Dokumentacja firmy Local zaleca do tego zadania rozszerzenie PHP Debug.
  3. W lokalnym kliknij Dodatki > Xdebug + VS Code .
  4. Kliknij Zainstaluj dodatek .
  5. Po zakończeniu naciśnij Włącz i uruchom ponownie .
  6. Otwórz witrynę lokalnie, a następnie kliknij kartę Narzędzia .
  7. Kliknij opcję Dodaj konfigurację uruchamiania do programu VS Code .
  8. Program VS Code zostanie uruchomiony i możesz rozpocząć proces debugowania.

Jeśli nie wolisz VS Code, możesz użyć innego narzędzia do edycji zadania.

4. Konfiguracja Xdebug i PhpStorm do debugowania

Lokalny dodatek xdebug i phpstorm

Inną opcją jest użycie PhpStorm z Xdebug. Możesz dodać go do Local za pomocą dodatku i będzie działać w połączeniu z Xdebug Step Debugger. Instalacja i konfiguracja są bardzo podobne do procesu opisanego powyżej dla programu VS Code. Aby z niego skorzystać, wykonaj następujące czynności:

  1. Pobierz i zainstaluj PHPStorm.
  2. W trybie lokalnym kliknij Dodatki > Xdebug + PhpStorm .
  3. Kliknij Zainstaluj dodatek .
  4. Ponownie włącz i uruchom ponownie po zakończeniu.
  5. Otwórz dowolną witrynę lokalnie i kliknij Narzędzia patka.
  6. Kliknij Dodaj konfigurację uruchamiania do PhpStorm .
  7. Przy aktywnym PhpStorm ustaw punkty przerwania, klikając rynnę w określonym wierszu kodu, w którym chcesz, aby pojawił się punkt przerwania.
  8. Kliknij Odtwórz , aby rozpocząć proces debugowania.

Jeśli potrzebujesz więcej wskazówek dotyczących procesu debugowania, zawsze dostępna jest opcja debugowania krokowego.

5. Używanie Xdebug do debugowania krokowego

Step Debugging to bardzo przydatne narzędzie i część Xdebug, które zasadniczo trzyma Cię za rękę podczas procesu debugowania. Współpracuje z VS Code i PhpStorm (a także wieloma innymi IDE i edytorami tekstu), aby zapewnić szczegółowe, ale łatwe do naśladowania narzędzia, kroki i protokoły debugowania.

W Local nie musisz nic robić, aby skonfigurować Xdebug – jest on domyślnie włączony automatycznie. Chociaż istnieją bardziej złożone instrukcje konfiguracji, jeśli masz skomplikowane środowisko testowe (z wieloma systemami działającymi jednocześnie), zakładamy, że na razie musisz wykonać debugowanie w jednym systemie w jednej instalacji Local.

Aby skorzystać z debugowania krokowego, wystarczy wykonać czynności opisane w poprzednich dwóch sekcjach. Ta funkcja działa zarówno z VS Code, jak i PhpStorm. Gdy wszystko zostanie skonfigurowane, automatycznie ustawi punkty przerwania i będzie odtwarzać kod jeden po drugim. Zapewnia to intuicyjny sposób uruchamiania kodu, przeglądania błędów i naprawiania ich w miarę ich pojawiania się.

Debugowanie w trybie lokalnym stało się łatwe

Jak widać, debugowanie w trybie lokalnym jest w rzeczywistości dość łatwym procesem, który wymaga minimalnej konfiguracji, aby rozpocząć. Podstawowe narzędzie do debugowania jest już domyślnie obecne. Wszystko, co musisz zrobić, to skonfigurować preferowany edytor tekstu lub IDE, skonfigurować dodatek lub dwa i gotowe. Oczywiście będziesz musiał dokonać rzeczywistych poprawek błędów, aby Twoja witryna była w doskonałym stanie. Ale przynajmniej sam proces debugowania można przeprowadzić z łatwością i przy minimalnym zamieszaniu.

Jakie są Twoje preferowane narzędzia do debugowania w trybie lokalnym? Chętnie poznamy Twoją opinię w komentarzach poniżej.