Debugger Installation

Anleitung

In diesem Tutorial wird „kurz“ erklärt, wie ihr das Debugging Tool XDEBUG im Visual Studio Code installieren könnt. XDEBUG wird eure Arbeit mit PHP um einiges leichter machen.

Schritt 1 – PHP Debug Extension im Visual Studio Code installieren

Schritt 2 – Xdebug herunterladen

Link: https://xdebug.org/
Hier auf Install (erster Menüpunkt) klicken:

Danach zu „Installing on Windows“ scrollen & auf „Follow these instructions“ klicken. Die nächste Seite ist der „Installation Wizard"

Schritt 2.1 – den Output der PHP Info in den Installation Wizard kopieren

Wie bekomme ich das Ergebnis der PHP Info? Die PHP Info ist über den Link: http://localhost/dashboard/ zugänglich.
(Apache Webserver muss dafür im XAMPP gestartet sein!). Hier auf PHP Info klicken:

Die PHP Info sollte dann so aussehen:

Den gesamten Inhalt der PHP Info Seite in den Wizard (auf der XDEBUG Seite kopieren). Dann auf „Analyse my phpinfo() output“ klicken.
Danach solltet ihr eine ähnliche Ansicht sehen:

Schritt 2.2 – Die Installationsdatei herunterladen

Die php_xdebug-3.0.4-7.4-vc15-x86_64.dll (Natürlich ändert sich hier die Version von Xdebug regelmäßig) File herunterladen und auf php_xdebug.dll umbenennen.
Die Datei in den ext Ordner der XAMPP Installation kopieren(C:/xamp/php/ext) Unter C:/xampp/php die php.ini Datei öffnen & am Ende der Datei folgenden Code hinzufügen:

[Xdebug]
zend_extension = C:/xampp/php/ext/php_xdebug.dll
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host="127.0.0.1"
xdebug.remote_port=9003
xdebug.remote_enable_port=9003

xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.default_enable=1

Schritt 3 – Apache Webserver neu starten (im XAMPP)

Im XAMPP Control Panel bei Apache auf STOP klicken, danach wieder auf START

Schritt 4 – Zurück ins Visual Studio Code / PHP Storm

!!ACHTUNG: für PHP-Storm User:innen, der Anleitung in dem Link folgen: https://www.jetbrains.com/help/phpstorm/configuring-xdebug.html#integrationWithProduct

Zurück ins Visual Studio Code! In der linken Werkzeugleiste auf den Debug Button (Käfer-Play Button) drücken.

Damit der Debugger im Visual Studio Code gestartet werden kann muss eine 'launch.json Datei erstellt werden.

Die linke Spalte eures Visual Studio Codes zeigt folgendes an:

Klickt auf den link „create launch.json file“ (unter dem Button „Run and Debug“). Die launch.json wird automatisch generiert (im Ordner eures Projekts), mit den notwendigen Daten für XDEBUG.

Schritt 5 – den Debugger starten

Jetzt sollte der Debugger schon funktionieren, also jetzt: Breakpoint im Code setzen, auf den grünen Pfeil „Listen for Xdebug“ neben „Run & Debug“ klicken (Unter der Hauptmenüleiste) & die betroffene Seite im Browser öffnen (localhost/whatever.php). Sobald die Zeile, in der ihr den Breakpoint gesetzt habt gelb hinterlegt ist (siehe Screenshot 9), seht ihr, dass die Installation erfolgreich war & ihr Xdebug richtig installiert habt.