Wie Xdebug dir helfen kann, ein besserer WordPress-Entwickler zu werden

Wie jeder Entwickler bestätigen kann, ist der Code nach dem ersten Entwurf nie fertig für den Einsatz. Ein wichtiger Teil des Entwicklungsprozesses ist das Debugging — das Entfernen oder Ändern aller Teile deines Codes, die nicht funktionieren.

Die Xdebug-Erweiterung für PHP ist eine beliebte Methode, um alle Fehler in deinem Code aufzuspüren und zu beseitigen.

Einer der großartigen Aspekte von Xdebug ist die Flexibilität, die es bietet. Unabhängig von deinem bevorzugten Framework oder deiner Entwicklungsumgebung wirst du eine Version von Xdebug finden, die sich in deinen Arbeitsablauf einfügt. Dann dauert es nicht mehr lange, bis du dich mit dem Tool vertraut gemacht hast.

In diesem Lernprogramm wird Xdebug eingehend behandelt, einschließlich der Installation, der Integration in dein Setup und der allgemeinen Nutzung.

Zuerst wollen wir dir erklären, was Xdebug ist und was es kann.

Einführung in Xdebug

Xdebug ist eine der beliebtesten Erweiterungen, um deinen PHP-Code zu debuggen. Du installierst sie in der von dir gewählten Umgebung und sie fungiert als „Step Debugger“

So kannst du deinen Code Zeile für Zeile durchgehen und sehen, wie er sich innerhalb deines Programms verhält und interagiert, und seine Ausgabe untersuchen. Von dort aus kannst du Änderungen vornehmen, die du für richtig hältst.

Xdebug kann aber noch viel mehr:

• Du kannst die Leistung deines Codes mit einer Reihe von Metriken und Visualisierungen analysieren.
• Wenn du PHP-Unit-Tests durchführst, kannst du sehen, welche Code-Suiten du laufen lässt und ausführst.
• Xdebug verfügt über „Tracing“-Funktionen, die jeden Funktionsaufruf auf die Festplatte schreiben. Dazu gehören Argumente, Variablenzuweisungen und Rückgabewerte.
• Xdebug verbessert auch die standardmäßige PHP-Fehlerberichterstattung. Darauf gehen wir später noch näher ein.

Angesichts des Funktionsumfangs gibt es viele Möglichkeiten, Xdebug (und jeden ähnlichen Debugger) in deinem Arbeitsablauf einzusetzen. Wir werden diese im nächsten Abschnitt behandeln.

Warum du Xdebug benutzen solltest

Viele Entwickler haben keinen eigenen Debugging-Workflow, der Tools und Erweiterungen von Drittanbietern verwendet. Das liegt daran, dass PHP selbst eine rudimentäre Fehlerprotokollierung enthält. Du wirst Befehle wie error_log, var_dump und print verwenden, um die Ergebnisse von Variablen und Funktionsaufrufen zu sehen.

Es gibt zum Beispiel viele Snippets, die du für die WordPress-Entwicklung verwenden kannst — Stack Overflow ist voll von ihnen:

function log_me($message) {
  if ( WP_DEBUG === true ) {
      if ( is_array($message) || is_object($message) ) {
          error_log( print_r($message, true) );
      } else {
           error_log( $message );
      }
  }
}

Dieser Ansatz hat jedoch auch einige wichtige Nachteile:

• Zuerst musst du sicherstellen, dass du die Fehlerprotokolle für die Plattform, mit der du arbeitest, aktivierst. In diesem Fall musst du WP_DEBUG aktivieren (mehr dazu in Kürze).
• Dieses Beispiel des „Dump“-Debugging bietet weniger Möglichkeiten zur Untersuchung als das Step-Debugging. Hier kannst du nur ausgeben, was du definierst.

Der letzte Punkt erfordert viel manuellen Aufwand, vor allem, wenn du nicht gerade als Systemadministrator arbeitest. Wenn du zum Beispiel einen Codeblock debuggen willst, fügst du dein Snippet vielleicht anhand einer von dir definierten Variable ein. Allerdings ist das vielleicht nicht die Ursache des Problems oder zeigt nicht einmal an, was passiert ist.

Stattdessen kann ein Tool wie Xdebug seine Muskeln spielen lassen, um mehr Möglichkeiten zu bieten:

• Du kannst deinen Code an verschiedenen Stellen während der Ausführung „unterbrechen“, um zu sehen, was in Echtzeit passiert.
• Es gibt unzählige Metriken, Visualisierungen, Verzweigungen und mehr, die dir helfen, herauszufinden, was dein Code tut und wie er reagiert.
• Manchmal kannst du sogar Werte während des Debugging-Prozesses ändern. Das ist selbst für gut funktionierende Code-Suiten von großem Wert. Du kannst im Grunde jederzeit manuelle Unit-Tests durchführen.
• Da du Haltepunkte verwendest, um die zu debuggenden Bereiche zu markieren, musst du nicht mit Schnipseln in deinem Code arbeiten. So bleibt dein Code sauberer und die Anzahl zukünftiger Probleme wird reduziert.

Insgesamt ist der Einsatz eines Tools wie Xdebug eher eine proaktive als eine reaktive Entscheidung. Du kannst das Step-Debugging als Teil des eigentlichen Entwicklungsprozesses nutzen, ähnlich wie die Implementierung von Unit-Tests als Teil der testgetriebenen Entwicklung (TDD).

So schaltest du die PHP-Fehlerprotokollierung ein

Auch wenn du deinen Code ohne einen bestimmten Fehler debuggen kannst, ist es oft gut zu wissen, ob ein Problem auftritt, ohne dass Xdebug geöffnet ist. So erhältst du einen Ausgangspunkt für deine Untersuchungen. Das ist nicht unbedingt notwendig, kann aber ein hilfreicher Teil deiner Kette sein.

Um jeden auftretenden Fehler zu melden, musst du eine Zeile am Anfang der entsprechenden PHP-Datei einfügen:

error_reporting(E_ALL);

Dies ist ein Catch-All-Befehl, und du kannst dasselbe erreichen indem du die ini_set funktion nutzt:

ini_set('error_reporting', E_ALL);

Damit kannst du die Einstellungen in deiner php.ini-Datei projektspezifisch ändern. Du könntest zwar in diese Datei gehen und eine manuelle Änderung vornehmen, aber oft ist es besser, mit ini_set zu arbeiten, um die spezifischen Parameter zu ändern:

ini_set('display_errors', '1');

Sobald du die aktive Fehlerberichterstattung nach deinen Vorstellungen eingestellt hast, kannst du mit Xdebug arbeiten.

Wie man Xdebug benutzt

In den nächsten Abschnitten zeigen wir dir, wie du Xdebug verwendest und welche Schritte du zum Einrichten brauchst. Wir können zwar nicht alle Aspekte des Tools abdecken, aber mit dieser Schnellstart-Anleitung kannst du schnell loslegen.

Zuerst musst du Xdebug installieren. Wir zeigen dir, wie du das machst.

1. Installiere Xdebug für dein Betriebssystem (OS)

Da Xdebug an eine Vielzahl von Systemen angepasst werden kann, ist der genaue Ablauf für jedes System etwas anders. Auf der Ebene des Betriebssystems gibt es ein paar Unterschiede:

• Windows: Das ist ein etwas komplizierter Einrichtungsprozess, bei dem du eine vorhandene PHP-Datei und einen Installationsassistenten verwendest und dann die richtige Version für dein System herunterlädst.
• Linux: Die Methode hier ist wohl die einfachste: Du kannst einen Paketmanager verwenden, um Xdebug oder die PHP Extension Community Library (PECL) zu installieren.
• Mac: Diese Methode ist ebenfalls einfach: Sobald du PECL installiert hast, kannst du pecl install xdebug von einem Terminal aus starten. Außerdem musst du die XCode Kommandozeilentools und PHP auf deinem System installiert haben.

Die meisten Benutzer werden jedoch nicht mit einer Instanz von Xdebug auf Systemebene arbeiten wollen. Stattdessen wirst du es in deine eigene Entwicklungsumgebung integrieren wollen.

2. Integriere Xdebug in deine Entwicklungsumgebung

Sobald du Xdebug für dein Betriebssystem installiert hast, solltest du es mit deiner Umgebung verbinden.

Es gibt so viele unterstützte Systeme und Tools, dass wir hier nicht auf alle eingehen können. Später werden wir dir eine Anleitung für DevKinsta und PhpStorm geben. Es gibt aber auch viele andere beliebte Umgebungen, aus denen du wählen kannst. Im Folgenden findest du einige unserer Top-Empfehlungen.

Varying Vagrant Vagrants (VVV)

VVV ist eine der Umgebungen, die auf der Make WordPress Website genannt werden:

Die gute Nachricht ist, dass VVV bereits eine Version von Xdebug enthält, aber du musst sie aktivieren. Das kannst du mit Secure Shell (SSH) in einem Terminalfenster tun:

vagrant ssh -c "switch_php_debugmod xdebug"

Allerdings leidet die Leistung ein wenig darunter, und du musst diese Option wieder aktivieren, wenn du deine Websites bereitstellst.

Laravel Valet

Für einige Nutzer ist Laravel Valet eine nahezu perfekte Webentwicklungsumgebung. Noch besser ist, dass du Xdebug damit integrieren kannst.

Dazu musst du eine Konfigurationsdatei für den Debugger erstellen. Du kannst deinen eigenen Pfad mit php --ini auf der Kommandozeile finden, das einige verschiedene Dateipfade zurückgibt:

Als Nächstes erstellst du eine neue xdebug.ini Datei an dem Pfad für zusätzliche .ini Dateien. In unserem Beispiel befindet sie sich unter /opt/homebrew/etc/php/7.4/conf.d.

Sobald du diese neue Datei geöffnet hast, öffne auch den Pfad zur geladenen Konfigurationsdatei (deine Hauptdatei php.ini ). Wenn du beide Dateien geöffnet hast, füge Folgendes am Ende hinzu:

• php.ini: zend_extension="xdebug.so"
• xdebug.ini: xdebug.mode=debug

Sobald du deine Änderungen gespeichert hast, starte valet restart im Terminal und füge phpinfo(); exit; zu einer der Dateien deiner Website hinzu. Überprüfe, ob das funktioniert, indem du eine Seite im Browser lädst.

Beachte, dass du eventuell PHP mit sudo brew services restart php neu starten und mit php --info | grep xdebug überprüfen musst, ob deine Systeminstallation von Xdebug korrekt ist. Du wirst die Xdebug-spezifischen Zeilen in der Ausgabe bemerken:

Von hier aus kannst du Xdebug in den Code-Editor deiner Wahl integrieren.

XAMPP

Ähnlich wie bei Valet gibt es auch bei XAMPP mehrere Schritte des Prozesses. Allerdings gibt es für die Windows- und die macOS-Version zwei unterschiedliche Prozesse.

Beginne mit der Installation von XAMPP und überprüfe kurz, ob die Datei php_xdebug.dll (Windows) oder xdebug.so (macOS) auf deinem System vorhanden ist:

Wenn die Datei existiert, kannst du mit der Konfiguration fortfahren. Andernfalls musst du zunächst entweder die richtige Binärdatei für Windows herunterladen — eine 64-Bit-Datei für deine bevorzugte PHP-Version — oder ein paar weitere Abhängigkeiten installieren, wenn du einen Mac verwendest.

Unter Windows benennst du die DLL-Datei php_xdebug.dll um und verschiebst sie dann in den Dateipfad von xamppphpext. Als nächstes öffnest du die Datei \xampp\php\php.ini in deinem bevorzugten Code-Editor und fügst Folgendes hinzu:

output_buffering = Off

Im Abschnitt [XDebug] fügst du die folgenden drei Zeilen ein:

zend_extension=xdebug
xdebug.mode=debug
xdebug.start_with_request=trigger

Sobald du deine Änderungen gespeichert hast, starte Apache neu und teste auf Xdebug.

Auf dem Mac musst du sicherstellen, dass du die Xcode-Befehlszeilentools mit xcode-select --install in einer Terminal-Instanz installierst. Danach gibt es drei Pakete, die du mit Homebrew installieren musst:

brew install autoconf automake libtool

In manchen Fällen musst du auch XAMPP neu installieren, um sowohl das Kernprogramm als auch die „Developer Files“ zu erhalten. Du solltest in der Lage sein, nur diese Dateien neu zu installieren, aber du solltest vorher ein Backup deiner bestehenden Installation machen.

Als Nächstes navigierst du zum Download des Xdebug-Quellordners auf deinem System und entpackst die TGZ-Datei. Navigiere in einem Terminal-Fenster zu diesem Verzeichnis und führe Folgendes aus:

phpize
pecl install xdebug

Beachte, dass du eventuell auch hier sudo verwenden musst. Von hier aus kannst du die XAMPP php.ini-Datei bearbeiten. Bei den meisten macOS-Installationen findest du sie unter /Applications/XAMPP/xamppfiles/etc/php.ini. In diesem Verzeichnis findest du auch den Pfad zu deiner xdebug.so-Datei — notiere dir diesen und benutze ihn anstelle des Platzhalters für den Dateipfad in diesem Abschnitt:

[xdebug]
zend_extension=/path/to/xdebug.so
xdebug.mode=develop,degug
xdebug.start_with_request=yes

Um zu testen, ob dies funktioniert, erstelle eine neue Datei xdebug_info.php im XAMPP-Hauptverzeichnis htdocs. Füge darin das Folgende ein:

<?php
xdebug_info();

…dann aktualisiere den Apache und teste Xdebug im Browser.

PhpStorm mit Xdebug verwenden

Sobald du Xdebug über das Betriebssystem und deine Entwicklungsumgebung installiert hast, musst du auch den Debugger selbst anzeigen. Das tust du mit dem Code-Editor oder der integrierten Entwicklungsumgebung (IDE) deiner Wahl. Wie bei deiner Entwicklungsumgebung gibt es auch hier eine große Auswahl, und jede hat einen anderen Ansatz.

Viele Entwickler entscheiden sich jedoch für PhpStorm von JetBrains. PhpStorm bietet nämlich „WordPress-gerechte Unterstützung“ — und ist auch aus vielen anderen Gründen eine beliebte Wahl.

Auf der Website von JetBrains findest du eine ausführliche Anleitung zur Verbindung von Xdebug und PhpStorm, die wir hier kurz zusammenfassen.

Navigiere zunächst zur Seite Languages & Frameworks > PHP im Bereich Preferences. Hier öffnest du das Menü Weitere Elemente neben dem Dropdown-Feld CLI-Interpreter:

Hier werden einige weitere Details zu deiner PHP-Version und deinem Interpreter angezeigt. Wenn du neben der Option „Konfigurationsdatei“ auf die Ellipse “ Weitere Elemente “ klickst, siehst du die vollständigen Pfade zu deiner php.ini-Datei:

Du wirst als Nächstes mit dieser PHP-Datei arbeiten, um den Einrichtungsprozess fortzusetzen.

Arbeiten in der php.ini-Datei

Die erste Aufgabe besteht darin, alle Zeilen zu bearbeiten, die sich darauf auswirken, wie Xdebug mit PhpStorm funktioniert.

Suche in der php.ini-Datei nach den folgenden Zeilen und entferne sie oder kommentiere sie aus:

zend_extension=<path_to_zend_debugger>
zend_extension=<path_to_zend_optimizer>

Diese Zeilen sind nicht in allen Fällen vorhanden, also sei nicht beunruhigt, wenn du sie nicht siehst.

Als Nächstes fügst du die folgenden Zeilen in die Datei ein:

[xdebug]
zend_extension="xdebug.so"
xdebug.mode=debug
xdebug.client_host=127.0.0.1
xdebug.client_port="<the port (9003 by default) to which Xdebug connects>"

Es gibt ein paar Dinge, die du bei dieser Reihe von Code beachten solltest:

• Möglicherweise hast du bereits einen Abschnitt [xdebug]. In diesem Fall kannst du die erste Bezeichnung weglassen.
• Beim Eintrag zend_extension musst du möglicherweise den vollständigen Pfad von xdebug.so angeben, um eine Verbindung herzustellen.
• Auch wenn es wie ein Platzhalter aussieht, ist der Parameter xdebug.client_port so, wie du ihn in deinem Code setzen wirst.

Wenn du sie hinzugefügt hast, speichere und schließe die Datei und teste dann die PHP-Version von der Kommandozeile aus (mit php --version):

Wenn du eine funktionierende Version von Xdebug hast, wird sie als eine der PHP-Erweiterungen angezeigt. Du kannst auch phpinfo(); zu einer neuen Datei hinzufügen und diese im Browser testen.

Das ist so ziemlich alles, was du tun musst, damit Xdebug als Standard-Debugger in PhpStorm funktioniert. Der letzte Schritt vor der Verwendung von Xdebug ist die Installation einer Browser-Helfererweiterung.

Installation einer Browser-Helfer-Erweiterung

Die letzte wichtige Verbindung, die du herstellen musst, ist die zwischen deinem Browser und PhpStorm, indem du das Step-Debugging auf dem Server aktivierst. Du kannst dies zwar auch über die Kommandozeile mit speziellen GET oder POST Werten tun, aber es ist einfacher, eine Erweiterung zu verwenden.

Wir empfehlen, die spezielle Erweiterung Xdebug Helper zu verwenden. Du kannst sie im Browser deiner Wahl installieren:

• Xdebug Helper für Chrome/Chromium/Brave
• Xdebug-Helfer für Firefox

Wenn du andere Erweiterungen ausprobieren möchtest, findest du auf der JetBrains-Website ein paar zusätzliche Optionen für die gängigsten Browser.

Wenn du die Browsererweiterung deiner Wahl installiert hast, solltest du keine weiteren Konfigurationseinstellungen vornehmen müssen. Von hier aus kannst du Xdebug mit PhpStorm verwenden.

Xdebug verwenden

Auch wenn wir hier PhpStorm verwenden, sind das Layout und die Benutzeroberfläche der verschiedenen IDEs ähnlich — es gibt aber auch einige offensichtliche Unterschiede.

Es gibt ein paar Konzepte, die das gesamte Debugging-Erlebnis ausmachen:

• Breakpoints: Das sind die Punkte, an denen Xdebug anhält, damit du die Ausgabe überprüfen kannst. Du kannst so viele Haltepunkte setzen, wie du möchtest.
• Listening for connections: Du kannst diese Funktion ein- und ausschalten, aber die meisten Entwickler werden sie immer aktiviert lassen.
• The debugging screen: Die meiste Zeit wirst du in der Debugging-Oberfläche verbringen – hier arbeitest du mit den verschiedenen Codezeilen, Variablen und Parametern.

Der erste Schritt besteht darin, das Listening zu aktivieren – ohne das kannst du nichts debuggen. Dazu klickst du in der Symbolleiste auf die Option Ausführen > Start Listening for PHP Debug Connections :

Alternativ kannst du auch auf das „Telefon“-Symbol in der Symbolleiste von PhpStorm klicken:

Mit jeder dieser Optionen wird das Abhören von Verbindungen gestartet.

Von hier aus kannst du in den Gutters des Code-Editors Haltepunkte setzen. Ein roter Punkt zeigt einen Haltepunkt an, auf den du klicken kannst, um ihn zu aktivieren:

Wenn du deinen Code debuggen willst, ist es am einfachsten, mit dem Abhören zu beginnen, Haltepunkte zu setzen und dann zu der entsprechenden Seite in deinem Browser zu gehen. Suche das Symbol für deine Erweiterung im Browser, klicke darauf und wähle die Option „Debuggen“:

Dadurch wird der Debugger in PhpStorm geöffnet und liefert entweder die gute oder die schlechte Nachricht:

Wenn du mit der rechten Maustaste auf die verschiedenen Werte, Attribute, Parameter und Variablen klickst, kannst du ein weiteres Kontextmenü aufrufen. So hast du viele zusätzliche Möglichkeiten, um deinen Code zu testen und zu debuggen:

Du könntest zum Beispiel verschiedene Werte für Variablen entlang des Pfades setzen. Das kann ein absichtlicher Versuch sein, deinen Code zu brechen und zu sehen, was passiert, oder es kann eine Möglichkeit sein, Code zu testen, der bereits eine Korrektur benötigt. In jedem Fall ist dies eine fantastische Methode, um deinen Code zu debuggen, ohne ihn vorher ändern zu müssen.

Wie Kinsta dir bei der Fehlersuche auf deiner WordPress-Website hilft

WordPress verfügt über eine Reihe von Debugging-Optionen, die du mit WP_DEBUG und anderen Tools wie Query Monitor nutzen kannst. Damit kannst du einen Modus aktivieren, in dem du zuvor verborgene Fehlermeldungen auf deiner Website und im Dashboard sehen kannst. Von dort aus kannst du herausfinden, wo das Problem liegt.

Du kannst diese Fehlermeldungen auch unter WP_DEBUG_LOG speichern, damit du die Probleme mit deiner Website dokumentieren kannst. Wie du das einrichtest, erfährst du in einem anderen Blog-Artikel. Die Einrichtung ist über dein MyKinsta-Dashboard (und den Bildschirm Sites > Tools) ein Kinderspiel:

Wenn du dies mit dem kostenlosen DevKinsta-Tool für die lokale Umgebung kombinierst, kannst du mit einem Klick WP_DEBUG für jede Seite, die du erstellst, aktivieren und deaktivieren:

So kannst du Fehler auf deiner Website während der Entwicklung abfangen und sicherstellen, dass sie nicht auf deine Live-Site übertragen werden. Diese Modi lassen sich auch leicht deaktivieren — das ist wichtig für die Sicherheit von Website und Nutzern.

Alle Kinsta-Tarife enthalten außerdem das integrierte Kinsta APM-Tool, unser speziell entwickeltes Tool zur Leistungsüberwachung von WordPress-Websites.

Spickzettel für Befehle

Bevor wir diesen Beitrag abschließen, sollten wir noch die Shortcuts erwähnen.

Wie bei vielen anderen Programmen gibt es auch bei Xdebug (und PhpStorm) verschiedene Möglichkeiten, allein über die Tastatur zu navigieren. Du kannst sogar die Kommandozeile verwenden, um PHP-Skripte zu debuggen.

Wenn Xdebug einmal gestartet ist, kannst du die folgenden Befehle verwenden:

Auch wenn dein spezieller Code-Editor seine eigenen Tastenkombinationen hat, liegt der Fokus hier auf PhpStorm. Sieh dir die Tabelle mit den Tastaturkürzeln für die Verwendung von Xdebug mit PhpStorm an:

Zum Glück gibt es hier nicht viel zu merken. Du musst den Debugger öffnen, Haltepunkte pro Zeile setzen, auf Verbindungen warten und deine Skripte ausführen.

Wenn du jedoch eine Abkürzung für eine bestimmte Aufgabe brauchst, kannst du den Befehl PhpStorm Find Action verwenden:

Sobald du anfängst, in dieses Feld zu tippen, wird dir eine dynamische Liste mit Befehlen und zugehörigen Abkürzungen angezeigt. Du kannst auch eine PDF-Version aller Tastaturkürzel über das Menü Hilfe > Tastaturkürzel PDF finden.

Wenn du die Tastenkombinationen in Echtzeit sehen willst, während du mit der Maus arbeitest, bietet JetBrains das Plugin Key Promoter X an:

Dieses praktische Tool zeigt dir Benachrichtigungen über deine zuletzt ausgeführte Aktion und die dazugehörige Tastenkombination an. Sobald du die Tastenkombinationen gelernt hast, kannst du dieses Plugin ausschalten und den wertvollen Platz auf deinem Bildschirm wieder nutzen.

Zusammenfassung

Das Debugging hat sich seit seinen bescheidenen Anfängen stark weiterentwickelt und umfasst heute ein viel breiteres Spektrum, als es sich seine Vorgänger je hätten vorstellen können. Um deinen PHP-Code gründlich zu fixen, brauchst du ein kompetentes Tool. Es gibt viele hervorragende Erweiterungen und Tools zur Auswahl, aber Xdebug ist zweifellos der Spitzenreiter.

Wie wir gesehen haben, passt sich Xdebug selbst den vielseitigsten Ansprüchen an Code-Editoren an und ist besonders gut in Kombination mit PhpStorm. Unabhängig davon, wie du dich entscheidest, wird es oft eine Version von Xdebug geben, die deinen Bedürfnissen entspricht. Insgesamt ist es ein leistungsstarkes, flexibles und intuitives Tool.

Findest du, dass Xdebug sein hohes Lob verdient, oder gibt es ein anderes Debugging-Tool, das du bevorzugst? Lass es uns in den Kommentaren unten wissen!