Instalowanie Xdebug, część 2: IDE

Teraz, gdy Xdebug jest zainstalowany wraz z lokalną instalacją PHP, nadszedł czas, aby podłączyć go do IDE. Zapewnia nam to wszystkie korzyści, jakie ma do zaoferowania Xdebug.

Oznacza to, że pozwala nam:

• ustawić punkty przerwania,
• przejrzyj nasz kod,
• i obserwuj zmienne

Cały czas program jest wykonywany. Oznacza to, że gdy strona jest renderowana, jesteśmy w stanie ustawić punkty w naszej bazie kodu, w których możemy zobaczyć, co serwer robi z naszym kodem.

Tak więc, oczywiście, nawet jeśli nazywa się to debugowaniem w celu usunięcia błędów, może również dać wgląd w działanie aplikacji, motywu lub wtyczki opartej na WordPressie i może pomóc nam lepiej zrozumieć rdzeń WordPressa.

Instalowanie Xdebug w Visual Studio Code

W tym momencie powinieneś mieć skonfigurowane następujące środowisko na swoim komputerze lokalnym:

• Valet (obejmujący Nginx i MySQL oraz powiązane narzędzia )
• WordPress
• Kod programu Visual Studio
• Xdebug

Pozostałe zadania dla wszystkich powyższych obejmują powiązanie Xdebug z Visual Studio Code, dzięki czemu otrzymujemy dosłowną reprezentację tego, jak działa WordPress (a tym samym nasza praca), co robi i tak dalej, gdy jest uruchomiony w przeglądarce.

Powiedziawszy to, zacznijmy.

1 Instalowanie niezbędnych rozszerzeń

Najpierw upewnijmy się, że rozszerzenie debugowania PHP jest zainstalowane w Visual Studio Code. W menu Rozszerzenia na pasku bocznym IDE wyszukaj PHP Debug, a powinieneś zobaczyć ekran podobny do poniższego.

Jeśli rozszerzenie nie jest jeszcze zainstalowane, zainstaluj je. Może być konieczne ponowne uruchomienie programu Visual Studio Code, aby nowe rozszerzenie zaczęło obowiązywać.

W tym miejscu jest kilka dodatkowych ustawień konfiguracyjnych, które musimy zweryfikować przed próbą debugowania jakiegokolwiek kodu.

2 Konfiguracja Xdebug (nawet więcej!)

Przypomnijmy z poprzedniego wpisu, że musieliśmy dołączyć Xdebug do naszego pliku php.ini . W szczególności musieliśmy dodać następujący wiersz kodu, aby włączyć Xdebug:

zend_extension="/usr/local/lib/php/pecl/20160303/xdebug.so"

Teraz musimy wykonać trochę więcej pracy.

1. będziemy musieli dodać linię konfiguracyjną do pliku php.ini, o którym mowa w ostatnim poście ,
2. musimy skonfigurować skrypt demonstracyjny, aby upewnić się, że istnieje odpowiednia sekcja Xdebug,
3. musimy skonfigurować Visual Studio Code

Na szczęście wszystkie powyższe są stosunkowo szybkimi zadaniami. Po pierwsze, wiersz konfiguracji, który chcesz dodać do swojego pliku , wygląda następująco:

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Następnie skonfiguruj skrypt demonstracyjny i połącz go z usługą Valet. Możesz to łatwo zrobić, tworząc katalog na pulpicie, tworząc coś takiego jak test.php, a następnie dodając phpinfo(); do pliku.

Następnie połącz katalog i uruchom ponownie Valet. Zdarzyło mi się nazwać mój przykład katalogu i upuścić plik test.php w katalogu.

Zezwalając, że wszystko jest poprawnie skonfigurowane, powinieneś być w stanie załadować plik w przeglądarce i zobaczyć coś takiego:

A teraz musimy skonfigurować Xdebug. Zakładając więc, że wszystko poszło dobrze, a rozszerzenia są poprawnie zainstalowane i uruchomione, praca z Visual Studio Code powinna być łatwa.

Oczywiście potrzebujemy skryptu demo, który możemy przetestować, więc napisałem coś trywialnego, ale da ci wyobrażenie o tym, czego się spodziewać podczas ustawiania punktów przerwania, a czego nie.

<?php

// First, set a sample name.
$exampleName = 'alice';
echo $exampleName;

// Next, change the name and display it.
if ('alice' === $exampleName) {
    $exampleName = 'bob';
}
echo $exampleName;

Teraz zwróćmy naszą uwagę na IDE. W Visual Studio Code kliknij ikonę debugowania, która znajduje się tuż nad ikoną Rozszerzenia i tuż pod ikoną Kontrola źródła.

Na pasku bocznym na samej górze zauważysz przycisk odtwarzania. Obok znajduje się lista rozwijana. Może brzmieć „Brak konfiguracji". Jeśli tak jest, a zakładam, że tak, jest kilka bardzo konkretnych kroków, które musisz wykonać, aby upewnić się, że debugowanie działa poprawnie.

1 Otwórz katalog skryptów

Musisz upewnić się, że znajdujesz się w katalogu skryptu w Visual Studio Code.

Oznacza to, że nie wystarczy upewnić się, że masz otwarty plik. Visual Studio Code musi wiedzieć, z którego katalogu pracujesz (ponieważ tworzy ukryty katalog .vscode w katalogu nadrzędnym).

2 Utwórz konfigurację uruchamiania

Domyślna konfiguracja uruchamiania powinna działać po wyjęciu z pudełka, ale jest oparta na poprzednim kroku.

Po otwarciu katalogu (w moim przypadku tego, który zawiera test.php) w Visual Studio Code, uruchom paletę poleceń (możesz to zrobić za pomocą skrótu, który różni się w zależności od systemu operacyjnego lub za pomocą menu Pomoc i następnie wybierz polecenie Paleta poleceń).

Gdy się pojawi, wpisz > launch.json, a otrzymasz opcję wyświetlenia pliku launch.json. Po wyjęciu z pudełka powinien wyglądać tak :

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

W tym momencie menu debugowania powinno mieć coś w rodzaju Uruchom obecnie otwarty skrypt obok ikony odtwarzania. Jeśli nie, to da ci możliwość wybrania czegoś takiego jak PHP (ponieważ mamy zainstalowane rozszerzenie).

Jeśli tak, wybierz tę opcję.

3 Ustaw kilka punktów przerwania

Teraz nadszedł czas, aby zobaczyć debugger w akcji. W tym momencie przejdź dalej i uruchom okno przeglądarki ze swoim skryptem testowym.

Mój jest prosty:

Następnie przejdź do swojego IDE, a następnie kliknij lewy panel po lewej stronie numeru linii. To ustawi kilka punktów przerwania.

Oto przykład:

Teraz kliknij przycisk Odtwórz dla debugera. Natychmiast powinieneś zauważyć, że pasek stanu zmieni kolor na pomarańczowy i niektóre kontrolki debugowania (dla opcji Continue, Step In, Step Out, Restart i Stop). W tej chwili nie jesteśmy nimi zainteresowani, ponieważ przyjrzymy się im głębiej w następnym poście.

Zauważ również, że w lewym panelu znajdują się informacje o zmiennych, zegarkach i tak dalej. Jeśli ustawisz punkty przerwania w zmiennych lokalnych, zauważysz, że $exampleName jest podświetlona, ​​ale prawdopodobnie niezainicjowana.

Kliknij przycisk Odtwórz w nowych kontrolkach, które się pojawiły i powinien przejść do następnego punktu przerwania.

Linia zostanie teraz podświetlona, ​​aw okienku debugowania $exampleName otrzyma wartość. W moim przypadku to jest Alicja.

Możesz dalej bawić się tym tak długo, jak chcesz, aby poczuć, jak działa debuger.

Następnym razem, screencasty

Debugowanie jest potężne, ale może być zniechęcające na wiele sposobów. Począwszy od następnego wpisu, zacznę udostępniać kilka screencastów, które pokazują, jak:

• funkcje i zmienne debugowania,
• zmieniaj wartości w locie,
• praca z konsolą debugowania,
• i więcej.

Zajmą one trochę więcej czasu, ponieważ będą to filmy przedstawiające, jak to zrobić, ale korzyści powinny być duże.

Jeśli nie miałeś jeszcze okazji zapoznać się z całą zawartością tej serii, gorąco polecam.

📣 Uwaga dotycząca korzyści dla członków

Pamiętaj jednak, że przed następnym wpisem dotyczącym screencastów i następnej części tej serii mam kilka ogłoszeń, które specjalnie dla członków witryny, które zawierają zniżki na oprogramowanie oparte na WordPressie.

Więcej o tym powiem w przyszłym tygodniu.