Zo kan Xdebug je helpen een betere WordPress developer te worden

Zoals elke developer kan beamen, is code nooit klaar voor productie na de eerste opzet. Een belangrijk onderdeel van het ontwikkelingsproces is debuggen – het verwijderen of veranderen van alle delen van je code die niet werken.

De Xdebug extensie voor PHP is een populaire manier om alle bugs in je code op te sporen en te vernietigen.

Een van de geweldige aspecten van Xdebug is hoe flexibel het is. Ongeacht het framework of de ontwikkelomgeving van je voorkeur, zul je een versie van Xdebug kunnen vinden die in je werkproces past. Vanaf daar duurt het niet lang voordat je de tool onder de knie hebt.

Deze handleiding gaat dieper in op Xdebug, inclusief het installatieproces, de integratie met je setup en het algemene gebruik.

Laten we eerst wat meer context geven over wat Xdebug is en wat het doet.

Introductie van Xdebug

Xdebug is een van de populairste extensies om je PHP code te debuggen. Je installeert het vanuit je gekozen omgeving, en het werkt als een “step debugger”.

Kortom, hiermee kun je regel voor regel aan je code werken, zodat je er doorheen kunt stappen en kunt kijken hoe de code handelt en interacteert binnen je programma, en ook de uitvoer ervan kunt onderzoeken. Van daaruit kun je naar eigen inzicht wijzigingen aanbrengen.

Xdebug kan echter veel meer:

• Je kunt de prestaties van je code analyseren met behulp van een reeks statistieken en visualisaties.
• Wanneer je PHP unittests uitvoert, kun je zien welke suites van code je draait en uitvoert.
• Xdebug bevat “tracing” mogelijkheden, die elke functie-call naar schijf schrijft. Dit zijn argumenten, variable assignments en return values.
• Xdebug brengt ook verbeteringen aan in de standaard PHP foutmelding. Hierover later meer.

Gezien de mogelijkheden zijn er tal van manieren om Xdebug (en elke soortgelijke debugger) te gebruiken in je werkproces. Die behandelen we in de volgende paragraaf.

Waarom je Xdebug zou willen gebruiken

Veel ontwikkelaars zullen geen speciale debugworkflow hebben die gebruik maakt van externe tools en extensies. Dat komt omdat PHP zijn eigen basic foutlogging bevat. Je gebruikt commando’s als error_log, var_dump, en print om de resultaten van variabelen en functie-calls te zien.

Er zijn bijvoorbeeld veel snippets die je kunt hergebruiken voor WordPress ontwikkeling – Stack Overflow staat er vol mee:

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 );
      }
  }
}

Er zijn echter enkele belangrijke nadelen aan deze aanpak:

• Je moet er eerst voor zorgen dat je foutmeldingen inschakelt voor het platform waarmee je werkt. In dit geval wil je WP_DEBUG inschakelen (waarover straks meer).
• Dit voorbeeld van “dump” debuggen biedt minder mogelijkheden voor onderzoek dan “step” debuggen. Hier kun je immers alleen uitvoeren wat je definieert.

Het laatste punt vereist veel handmatige inspanning, vooral als je baan niet die van systeembeheerder is. Als je bijvoorbeeld een codeblok wilt debuggen, kun je je snippet toevoegen op basis van een variabele die je definieert. Maar misschien is het niet de bron van het probleem of geeft het zelfs niet aan wat er gebeurt.

In plaats daarvan kan een tool als Xdebug zijn werk doen om een groter bereik te krijgen:

• Je kunt je code op verschillende punten tijdens de uitvoering “breken” om te zien wat er in real-time gebeurt.
• Er zijn talloze statistieken, visualisaties, takken en meer om je te helpen vaststellen wat je code doet en hoe hij reageert.
• Soms kun je tijdens het debuggen zelfs gaandeweg waarden veranderen. Dit biedt immense waarde, zelfs voor reeksen code die goed werken. Je kunt in wezen op elk moment handmatige unittesten uitvoeren.
• Omdat je breakpoints gebruikt om te debuggen, hoef je niet te werken met snippets binnen je code. Dit houdt je code schoner en vermindert het aantal toekomstige problemen.

In het algemeen is het gebruik van een tool als Xdebug een proactieve beslissing in plaats van een reactieve. Je kunt step debugging gebruiken als onderdeel van het kernontwikkelingsproces, net als het implementeren van unittests als onderdeel van testgestuurde ontwikkeling (TDD).

Zo zet je PHP foutenregistratie aan

Hoewel je je code zou kunnen debuggen zonder een specifieke foutmelding, is het vaak goed om te weten of er een probleem optreedt zonder Xdebug open te hebben staan. Dit geeft je een startpunt voor onderzoek. Het is niet strikt noodzakelijk, maar kan een nuttig onderdeel zijn van je keten.

Om elke optredende fout te melden, moet je een regel toevoegen aan de bovenkant van het betreffende PHP bestand:

error_reporting(E_ALL);

Dit is een catch-all commando, en je kunt hetzelfde bereiken met de ini_set functie:

ini_set('error_reporting', E_ALL);

Hiermee kun je instellingen binnen je php.ini bestand per project wijzigen. Hoewel je in dit bestand een handmatige wijziging zou kunnen aanbrengen, is het vaak een beter idee om te werken met ini_set om de specifieke parameter te wijzigen:

ini_set('display_errors', '1');

Als je eenmaal de actieve foutmelding naar wens hebt ingesteld, kun je met Xdebug aan de slag.

Zo gebruik je Xdebug

In de volgende paragrafen laten we je zien hoe je Xdebug kunt gebruiken, inclusief de stappen die je nodig hebt om dingen in te stellen. Hoewel we niet elk aspect van de tool kunnen behandelen, zal deze quick-start handleiding je snel op weg helpen.

Eerst moet je echter Xdebug installeren. Laten we eens kijken hoe je dat doet.

1. Installeer Xdebug voor je besturingssysteem (OS)

Omdat Xdebug geschikt is voor een willekeurig aantal opstellingen, zal het precieze proces voor elke opstelling iets anders zijn. Op OS niveau zijn er een paar verschillen:

• Windows: Dit is een wat ingewikkeld installatieproces waarbij je een bestaand PHP bestand en een installatiewizard gebruikt, en vervolgens de juiste versie voor je systeem downloadt.
• Linux: De methode hier is aantoonbaar de meest eenvoudige: Je kunt een pakketbeheerder gebruiken om Xdebug te installeren, of de PHP Extension Community Library (PECL).
• Mac: Deze methode is ook eenvoudig: Zodra je PECL hebt geïnstalleerd, kun je pecl install xdebug draaien vanuit een Terminal instantie. Je moet ook XCode commandoregeltools en PHP op je systeem geïnstalleerd hebben.

De meeste gebruikers zullen echter niet willen vasthouden aan een instantie van Xdebug op systeemniveau. In plaats daarvan zul je het willen integreren in je eigen ontwikkelomgeving.

2. Integreer Xdebug in je ontwikkelomgeving

Zodra je Xdebug voor je OS hebt geïnstalleerd, moet je het verbinden met je omgeving.

Er zijn zoveel ondersteunde systemen en tools dat we ze niet allemaal kunnen bespreken. Later zullen we je instructies geven voor zowel DevKinsta als PhpStorm. Toch zijn er nog veel andere populaire omgevingen om uit te kiezen. Hieronder staan enkele van onze topaanbevelingen.

Varying Vagrant Vagrants (VVV)

VVV is een van de genoemde omgevingen op de Make WordPress website:

Het goede nieuws is dat VVV al een versie van Xdebug bevat, maar die moet je wel activeren. Dit kun je doen met Secure Shell (SSH) binnen een Terminal venster:

vagrant ssh -c "switch_php_debugmod xdebug"

Er is wel een beetje een aanslag op je performance, en je zult deze optie weer aan moeten zetten als je je sites in gebruik zet.

Laravel Valet

Voor sommige gebruikers is Laravel’s Valet een bijna perfecte webontwikkelomgeving. Sterker nog, je kunt Xdebug ermee integreren.

Hiervoor moet je een configuratiebestand maken voor de debugger. Je kunt je eigen pad vinden met php --ini op de commandoregel, die een paar verschillende bestandspaden oplevert:

Maak vervolgens een nieuw xdebug.ini bestand aan op het pad voor extra .ini bestanden. In ons voorbeeld is dat in /opt/homebrew/etc/php/7.4/conf.d.

Zodra je dit nieuwe bestand hebt geopend, open je ook het pad naar het geladen configuratiebestand (je hoofdbestand php.ini). Met beide geopend, voeg je onderaan het volgende toe:

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

Zodra je je wijzigingen hebt opgeslagen, voer je valet restart uit vanuit de Terminal en voeg je phpinfo(); exit; toe aan een van de bestanden van je site. Je zult willen controleren of dit werkt door een snelle paginalading in de browser.

Let op dat je PHP misschien opnieuw moet opstarten met sudo brew services restart php en dat je moet controleren of je systeeminstallatie van Xdebug correct is met php --info | grep xdebug. Je ziet de Xdebug-specifieke regels in de uitvoer:

Vanaf hier kun je kijken hoe je Xdebug kunt integreren in jouw favoriete code-editor.

XAMPP

Net als bij Valet zijn er een paar onderdelen aan het proces voor XAMPP. De Windows en macOS versies hebben echter twee verschillende processen.

Begin met het installeren van XAMPP en controleer dan snel of het bestand php_xdebug.dll (Windows) of xdebug.so (macOS) op je systeem bestaat:

Als het bestand bestaat, kun je verder met de configuratie. Anders moet je eerst de juiste binary voor Windows downloaden – een 64-bit bestand voor je favoriete PHP versie – of nog een paar dependencies installeren als je op een Mac zit.

Voor Windows hernoem je het DLL bestand php_xdebug.dll en verplaats je het naar het \xampp\php\ext bestandspad. Open vervolgens het \xampp\php\php.ini bestand in je favoriete code-editor en voeg het volgende toe:

output_buffering = Off

Voeg bij de sectie [XDebug] de volgende drie regels toe:

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

Zodra je je wijzigingen hebt opgeslagen, herstart je Apache en test je op Xdebug.

Voor Mac moet je ervoor zorgen dat je de Xcode commandoregeltools installeert met xcode-select --install in een Terminalinstantie. Daarna zijn er drie pakketten die je wilt installeren met Homebrew:

brew install autoconf automake libtool

In sommige gevallen moet je ook XAMPP opnieuw installeren om zowel het kernprogramma als de “Developer Files” te krijgen Je zou alleen deze bestanden opnieuw moeten kunnen installeren, maar je zult eerst een backup van je bestaande installatie moeten maken.

Navigeer vervolgens naar de download voor de Xdebug bronmap op je systeem en pak het TGZ bestand uit. Navigeer in een Terminal venster naar die map en voer het volgende uit:

phpize
pecl install xdebug

Merk op dat je hier mogelijk ook sudo moet gebruiken. Vanaf hier kun je het XAMPP php.ini bestand bewerken. Voor de meeste macOS installaties vind je het in /Applications/XAMPP/xamppfiles/etc/php.ini. In deze map vind je ook het pad naar je xdebug.so bestand – noteer dit en gebruik het in plaats van de bestandsnaam voor dit fragment:

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

Om te testen of dit werkt, maak je een nieuw xdebug_info.php bestand aan in de hoofddirectory htdocs XAMPP. Voeg daarin het volgende toe:

<?php
xdebug_info();

…ververs dan Apache en test Xdebug in de browser.

PhpStorm gebruiken met Xdebug

Zodra je Xdebug hebt geïnstalleerd via het OS en je ontwikkelomgeving, moet je ook de debugger zelf bekijken. Dit doe je via je gekozen code-editor of integrated development environment (IDE). Net als bij je omgeving zijn er zoveel om uit te kiezen, en elke omgeving kan een andere aanpak hebben.

Toch kiezen veel ontwikkelaars voor PhpStorm van JetBrains. Feitelijk biedt PhpStorm “op WordPress afgestemde hulp” – en het is ook om vele andere redenen een populaire keuze.

De JetBrains website bevat volledige instructies voor het aansluiten van Xdebug en PhpStorm, maar we zullen ze ook hier bespreken.

Navigeer eerst naar de Languages & Frameworks > PHP pagina in het Preferences paneel. Open hier het menu More Items naast het CLI Interpreter dropdownveld:

Dit toont wat verdere details over je PHP versie en interpreter. Als je klikt op de ellips More items naast de optie Configuration file, zie je de volledige paden voor je php.ini bestand:

Je zult hierna met dit PHP bestand gaan werken om het instellingsproces voort te zetten.

Werken binnen het php.ini bestand

De eerste taak hier is om alle regels aan te passen die invloed hebben op hoe Xdebug zal werken met PhpStorm.

Zoek in het php.ini bestand naar de volgende regels en verwijder ze of geef ze commentaar:

zend_extension=<path_to_zend_debugger>
zend_extension=<path_to_zend_optimizer>

Deze regels zullen niet in alle gevallen aanwezig zijn, dus schrik niet als je ze niet ziet.

Voeg vervolgens het volgende toe aan het bestand:

[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>"

Er zijn een paar dingen op te merken over dit pakket code:

• Mogelijk heb je al een [xdebug] sectie, in dat geval kun je de eerste aanduiding weglaten.
• Bij de vermelding zend_extension moet je misschien het volledige pad van xdebug.so toevoegen om verbinding te maken.
• Hoewel het er misschien uitziet als een placeholder, is de xdebug.client_port parameter hoe je hem binnen je code zult instellen.

Zodra je deze hebt toegevoegd, sla het bestand op en sluit het, en test dan de PHP versie vanaf de opdrachtregel (met php --version):

Als je een werkende versie van Xdebug hebt, zal deze worden getoond als een van de PHP extensies. Je kunt ook phpinfo(); toevoegen aan een nieuw bestand en dit testen in de browser.

Dit is zo ongeveer alles wat je moet doen om Xdebug te laten werken als je standaard debugger met PhpStorm. De laatste stap voor gebruik is het installeren van een browser helperextensie.

Een browser helperextensie installeren

De laatste belangrijke verbinding die je moet maken is tussen je browser en PhpStorm, door het activeren van step debugging op de server. Hoewel je dit zou kunnen doen vanaf de commandoregel met speciale GET of POST waarden, is het eenvoudiger om een extensie te gebruiken.

We raden aan de speciale Xdebug Helper extensie te gebruiken. Die kun je installeren in de browser van je keuze:

• Xdebug Helper voor Chrome/Chromium/Brave
• Xdebug Helper voor Firefox

Als je andere extensies wilt verkennen, biedt de JetBrains website een paar extra opties voor de meest populaire browsers.

Als je je gekozen browserextensie hebt geïnstalleerd, hoef je verder geen configuratie instellingen aan te passen. Vanaf hier kun je beginnen met het gebruik van Xdebug met PhpStorm.

Xdebug gebruiken

Hoewel we hier PhpStorm gebruiken, zul je een vergelijkbare lay-out en interface zien tussen de verschillende IDE’s – hoewel er ook enkele duidelijke verschillen zijn.

Er zijn een paar concepten die samen de hele debugervaring vormen:

• Breakpoints: Dit zijn de punten waar Xdebug stopt om je de uitvoer te laten inspecteren. Je kunt er zoveel instellen als je wilt.
• Listening for connections: Je kunt dit aan- en uitzetten, hoewel de meeste ontwikkelaars het altijd aan zullen laten staan.
• Het debugscherm: De meeste tijd zul je doorbrengen in de debug-interface – hier werk je met de verschillende regels code, variabelen en parameters.

De eerste stap is het activeren van listening – zonder dat kun je niets debuggen. Klik hiervoor op de optie Run > Start Listening for PHP Debug Connections in de werkbalk:

Als alternatief kun je klikken op het “telefoon” pictogram binnen de werkbalk van PhpStorm:

Elk van deze opties start het listeningproces naar verbindingen.

Vanaf hier kun je beginnen met het instellen van breakpoints binnen de gutters van de code-editor. Een rode stip geeft een breakpoint aan, waarop je kunt klikken om het te activeren:

Wanneer je je code wilt debuggen, is de meest eenvoudige manier om te beginnen met listening, breakpoints in te stellen, en dan naar de specifieke pagina in je browser te gaan. Zoek het pictogram voor je extensie binnen de browser, klik erop en selecteer de optie “Debug”:

Dit opent de debugger in PhpStorm en levert het goede of het slechte nieuws:

Als je rechts klikt op de verschillende waarden, attributen, parameters en variabelen, krijg je toegang tot een verder contextmenu. Dit geeft je veel extra mogelijkheden om je code te testen en te debuggen:

Je zou bijvoorbeeld verschillende waarden kunnen instellen voor variabelen langs het pad. Dit kan een bewuste poging zijn om je code te breken en te zien wat er gebeurt, of het kan een manier zijn om code te testen die al een fix nodig heeft. Hoe dan ook, dit geeft je een fantastische methode om je code te debuggen zonder deze eerst te hoeven veranderen.

Hoe Kinsta je helpt bij het debuggen van je WordPress website

WordPress heeft zijn eigen set debugopties via WP_DEBUG en andere tools, zoals Query Monitor. Deze maken een modus mogelijk waarin je eerder verborgen foutmeldingen overal op je site en dashboard gaat zien. Van daaruit kun je beginnen uit te zoeken wat het probleem is.

Je kunt die foutmeldingen ook opslaan met WP_DEBUG_LOG, waarmee je de problemen met je site kunt documenteren. We behandelen hoe je dit instelt in een ander artikel op de blog. Dit is in een handomdraai in te stellen via je MyKinsta dashboard (en het Sites > Tools scherm):

Als je dit koppelt aan de gratis DevKinsta lokale omgevingstool, heb je ook een manier om met één klik WP_DEBUG in en uit te schakelen voor elke site die je draait:

Dit betekent dat je fouten op je site kunt opvangen tijdens de ontwikkeling, en ervoor kunt zorgen dat ze niet doordringen tot je live site. Deze modi zijn ook gemakkelijk uit te schakelen – essentieel voor de veiligheid van zowel de site als de gebruiker.

Alle Kinsta abonnementen worden verder geleverd met de ingebouwde Kinsta APM tool, onze speciaal ontworpen prestatiemonitoringstool voor WordPress sites.

Cheatsheet commando’s

Voordat we dit artikel afronden, moeten we het hebben over sneltoetsen.

Net als veel andere software zijn er verschillende manieren om door Xdebug (en PhpStorm) te navigeren met alleen het toetsenbord. Je kunt zelfs de commandoregel gebruiken om PHP scripts te debuggen.

Als Xdebug eenmaal draait, kun je de volgende commando’s gebruiken:

Hoewel je specifieke code-editor zijn eigen sneltoetsen heeft, ligt de nadruk hier op PhpStorm. Bekijk deze tabel met sneltoetsen voor het gebruik van Xdebug met PhpStorm:

Gelukkig hoef je hier niet veel te onthouden. Je moet de debugger openen, breakpoints per regel instellen, listening naar verbindingen beginnen, en je scripts uitvoeren.

Als je echter een snelkoppeling nodig hebt voor een bepaalde taak, kun je het PhpStorm Find Action commando gebruiken:

Zodra je in deze ruimte begint te typen, krijg je een dynamische lijst van commando’s en bijbehorende sneltoetsen te zien. Je kunt ook een PDF versie van alle sneltoetsen vinden via het menu Help > Keyboard Shortcuts PDF.

Als je meer een real-time overzicht van sneltoetsen wilt terwijl je met de muis werkt, biedt JetBrains de Key Promoter X plugin:

Deze handige tool toont meldingen van je laatst uitgevoerde actie, samen met de bijbehorende sneltoets. Zodra je de sneltoetsen hebt geleerd en gebruikt, kun je deze plugin uitfaseren en die waardevolle ruimte op je scherm teruggeven.

Samenvatting

Het debuggingsproces heeft een lange weg afgelegd sinds het nederige begin en dekt nu een veel breder gebied dan zijn voorlopers zich ooit hadden kunnen voorstellen. Om je PHP code grondig te repareren moet je een competent tool gebruiken. Er zijn veel uitstekende extensies en tools om uit te kiezen, maar Xdebug is een koploper.

Zoals we gezien hebben, kan Xdebug zich aanpassen aan de meeste code-editors, en is vooral geweldig in combinatie met PhpStorm. Maar ongeacht je setup zal er vaak een versie van Xdebug zijn die aan je behoeften voldoet. Over het geheel genomen is het een krachtig, flexibel en intuïtief te gebruiken tool.

Vind jij dat Xdebug al deze credits verdient, of is er een ander debugtool die je liever gebruikt? Laat het ons weten in de commentssectie hieronder!