Debugging mit PHPStorm und MAMP

In der letzten Woche ging es um die Erstellung einer Galerie mit der PhotoSwipe Library in WordPress. Das Ergebnis war gut, aber wie so oft fehlte noch eine Kleinigkeit. Unter dem Einzelbild sollte außer der Beschreibung des Bildes noch ein Link zum Artikel sein, in dem das Bild verwendet wird. Als Entwickler muss man nun suchen, wo man diesen Link am Besten einfügt und wie man an die gewünschten Daten kommt. Glücklicherweise merkt sich WordPress in welchem Beitrag ein Bild verwendet wird, so dass es grundsätzlich relativ einfach möglich sein müsste, einen korrekten Link einzufügen.

Wer öfter programmiert, hat einen Lieblingseditor oder eine Lieblingsentwicklungsumgebung (IDE). Im PHP Umfeld ist vermutlich das Produkt PHPStorm „die IDE“. PHPStorm ist ein proprietäres Produkt aber auch im Open Source Umfeld sehr beliebt. Du kannst dir eine kostenlose 30 Tage Version von der Website des Herstellers laden.

Die Aufgabe mit dem Link ist eine gute Gelegenheit um das Debbuging mit PHPStorm zu zeigen. Unter Debugging versteht man den Vorgang, Fehler in Computersystemen zu diagnostizieren und zu finden. Der Name geht tatsächlich auf Käfer und Motten (bugs) zurück, die in frühen Computern zu Kurzschlüssen an den Elektronenröhren führten. Webentwickler nutzen für die lokale Entwicklung oft eine Zusammenstellung freier Software für Webserver, Datenbank und Programmiersprache. Im macOS Umfeld ist das oft MAMP, im Windows Umfeld XAMP, bei Linux sind alle benötigten Programme bereits enthalten. Eine Website wird meistens lokal erstellt und in einem Git Repo gelagert (siehe auch Entwicklungsworkflow für Deine Website(s)). Die Änderungen am Code werden dann auf unterschiedliche Weise (git pull, FTP, Browser-Upload, etc.) auf den produktiven Server übertragen.

Die Fehlersuche und überhaupt das Verständnis von Programmcode ist bei modernen Content Management Systemen nicht mehr ganz einfach. WordPress ist glücklicherweise immer noch relativ leicht zu verstehen, die Innereien der Variablen und Arrays sind aber oft unübersichtlich.

Eine wichtige Funktion eines Debuggers ist das Setzen von Haltepunkten an bestimmten Code Zeilen. Die Programmausführung wird an so einem Haltepunkt unterbrochen und man kann sich dann in der IDE die Werte aller im Speicher vorhandenen Variablen ansehen. Ein für meinen Zweck sehr hilfreiches Feature.

Was wir hier machen nennt sich Remote Debugging. PHPStorm wird so konfiguriert, dass es weiß, welcher Server auf welchem Port verwendet wird und wartet dann auf einen speziellen Parameter beim Aufruf der lokalen Website. MAMP/XAMPP muss ebenfalls vorbereitet werden und den Parameter an PHPStorm weitergeben. Ich beschreibe die Vorgehensweise bei MAMP, da ich mit macOS arbeite.

MAMP vorbereiten

Dein PHP Interpreter benötigt die entsprechenden Informationen in seiner Konfigurationsdatei php.ini. Damit du die richtige Datei änderst, musst du in den Preferences herausfinden, welche PHP Version dein MAMP benutzt. In meinem Fall ist das PHP 7.0.12.

Nun musst du die passende php.ini Datei finden und ein paar Änderungen vornehmen. Die Datei liegt bei mir in /Applications/MAMP/bin/php/php7.0.12/conf.

Ganz am Ende der Datei müssen folgende Zeilen eingefügt werden, bzw. auskommentiert werden.

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.0.12/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.idekey=PHPSTORM

Danach muss der Webserver neu gestartet werden.

PHPStorm vorbereiten

Ich lege mir für jede Website einen Unterordner in meinem /dev Ordner an, also in diesem Fall /dev/wordpress. In PHPStorm ist jede Website dann ein Projekt.

Das Remote Debugging muss in den PHPStorm Preferences konfiguriert werden (einfach nach dem Wort debug suchen). Die Standardwerte kannst du übernehmen, wichtig ist der Debug port 9000. Es muss der gleiche Port wie in der php.ini von MAMP sein.

In PHPStorm kann nun der Debugger eingeschaltet werden. Oben im Menu ist ein kleiner Telefonhörer, der im oberen Bereich rot ist (ausgeschaltet). Nach einem Mausklick ist er oben und unten grün, „hört“ also mit.

Jetzt fehlt noch die Verbindung zum MAMP. Rufe im Menü den Punkt Run -> Edit Configurations auf.

Unter dem Eintrag PHP Remote Debug musst du einen neuen Server einrichten (Name MAMP) und als IDE key den gleichen Schlüssel wie in der php.ini eintragen (PHPSTORM).

Debugging

Jetzt kann es losgehen. PHPStorm wartet auf das vereinbarte „Zauberwort“ (PHPSTORM) und MAMP auf einen Seitenaufruf. Bevor der kommt, musst du allerdings einen Haltepunkt festlegen. In meinem Beispiel nutze ich das PhotoSwipe Masonry Plugin (siehe Beitrag WordPress Galerie mit PhotoSwipe und Masonry Effekt) und möchte dort etwas in Erfahrung bringen. Ich öffne die Datei photoswipe-masonry.php und klicke die Zeilen 474 und 480 an. An dieser Stelle wird der Titel erzeugt, der unter der Einzelansicht eines Fotos angezeigt wird. Mein Ziel ist herauszufinden, ob die ID des mit dem Foto verknüpften Artikels als Variablenwert zur Verfügung steht.

Ich rufe die Website mit folgendem Parameter auf:
http://127.0.0.1/?XDEBUG_SESSION_START=PHPSTORM
und navigiere dann auf der Website an die Stelle mit dem Foto, wo der zusätzliche Link erscheinen soll.

PHPStorm hält tatsächlich automatisch an der von mir markierten Codezeile an und ich kann im Debug Fenster die Variablenwerte durchgehen. Der Aufbau der Website stoppt ebenfalls an diesem Punkt.
(Ein Klick auf den kleinen grünen Play Button im Debugger Fenster lässt das Programm zum nächsten Haltepunkt laufen).

WordPress behandelt ein Bild im Medienbereich intern als Post. Mein Bild hat die ID 23. Im Attachment Array sehe ich einen Eintrag mit dem Namen post_parent und der richtigen ID des Beitrags in dem das Bild benutzt wird (26). Hurra! Jetzt kann ich eine WordPress Funktion suchen, die mir den Titel des Beitrags liefert. Den Link zum Artikel kann ich mit der ID zusammenbauen (Vielleicht Stoff für einen neuen Beitrag 😉 ).

Fazit

Auch wenn es Anfangs etwas mühselig und zeitaufwendig ist und sicher nicht beim ersten Mal klappt, halte durch! Der Debugger spart dir viel Zeit und macht manche Dinge erst möglich, so dass du ihn nicht mehr missen möchtest.

Links:

• PHPStorm
• MAMP, XAMPP
• How to debug PHP with PHPStorm & MAMP
• Installing and Configuring XAMPP with PhpStorm IDE
• Photoswipe Masonry Gallery

tl;dr: Debugging ist nützlich, gar nicht schwer und funktioniert auch mit MAMP und XAMPP.