Introductie van Xdebug<\/h2>\n
Xdebug<\/a> 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”.<\/p>\n 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.<\/p>\n Xdebug kan echter veel meer:<\/p>\n 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.<\/p>\n\n 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 Er zijn bijvoorbeeld veel snippets die je kunt hergebruiken voor WordPress ontwikkeling – Stack Overflow staat er vol mee<\/a>:<\/p>\n Er zijn echter enkele belangrijke nadelen aan deze aanpak:<\/p>\n Het laatste punt vereist veel handmatige inspanning, vooral als je baan niet die van systeembeheerder<\/a> 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.<\/p>\n In plaats daarvan kan een tool als Xdebug zijn werk doen om een groter bereik te krijgen:<\/p>\n 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).<\/p>\n 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<\/a>. Het is niet strikt noodzakelijk, maar kan een nuttig onderdeel zijn van je keten.<\/p>\n Om elke optredende fout te melden, moet je een regel toevoegen aan de bovenkant van het betreffende PHP bestand:<\/p>\n Dit is een catch-all commando, en je kunt hetzelfde bereiken met de Hiermee kun je instellingen binnen je php.ini<\/strong> 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 Als je eenmaal de actieve foutmelding naar wens hebt ingesteld, kun je met Xdebug aan de slag.<\/p>\n 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\u00a0handleiding je snel op weg helpen.<\/p>\n Eerst moet je echter Xdebug installeren. Laten we eens kijken hoe je dat doet.<\/p>\n Omdat Xdebug geschikt is voor een willekeurig aantal opstellingen, zal het precieze proces<\/a> voor elke opstelling iets anders zijn. Op OS niveau zijn er een paar verschillen:<\/p>\n 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.<\/p>\n Zodra je Xdebug voor je OS hebt ge\u00efnstalleerd, moet je het verbinden met je omgeving.<\/p>\n Er zijn zoveel ondersteunde systemen en tools dat we ze niet allemaal kunnen bespreken. Later zullen we je instructies geven voor zowel DevKinsta<\/a> als PhpStorm<\/a>. Toch zijn er nog veel andere populaire omgevingen om uit te kiezen. Hieronder staan enkele van onze topaanbevelingen.<\/p>\n VVV<\/a> is een van de genoemde omgevingen op de Make WordPress website<\/a>:<\/p>\n Het goede nieuws is dat VVV al een versie van Xdebug<\/a> bevat, maar die moet je wel activeren. Dit kun je doen met Secure Shell (SSH) binnen een Terminal venster:<\/p>\n 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.<\/p>\n Voor sommige gebruikers is Laravel’s Valet<\/a> een bijna perfecte webontwikkelomgeving. Sterker nog, je kunt Xdebug ermee integreren.<\/p>\n Hiervoor moet je een configuratiebestand maken voor de debugger. Je kunt je eigen pad vinden met Maak vervolgens een nieuw xdebug.ini<\/strong> bestand aan op het pad voor extra .ini<\/strong> bestanden. In ons voorbeeld is dat in \/opt\/homebrew\/etc\/php\/7.4\/conf.d<\/strong>.<\/p>\n Zodra je dit nieuwe bestand hebt geopend, open je ook het pad naar het geladen configuratiebestand (je hoofdbestand php.ini<\/strong>). Met beide geopend, voeg je onderaan het volgende toe:<\/p>\n Zodra je je wijzigingen hebt opgeslagen, voer je Let op dat je PHP misschien opnieuw moet opstarten met Vanaf hier kun je kijken hoe je Xdebug kunt integreren in jouw favoriete code-editor.<\/p>\n Net als bij Valet zijn er een paar onderdelen aan het proces voor XAMPP<\/a>. De Windows en macOS versies hebben echter twee verschillende processen.<\/p>\n Begin met het installeren van XAMPP en controleer dan snel of het bestand php_xdebug.dll<\/strong> (Windows) of xdebug.so<\/strong> (macOS) op je systeem bestaat:<\/p>\n Als het bestand bestaat, kun je verder met de configuratie. Anders moet je eerst de juiste binary voor Windows downloaden<\/a> – een 64-bit bestand voor je favoriete PHP versie – of nog een paar dependencies installeren als je op een Mac zit.<\/p>\n Voor Windows hernoem je het DLL bestand php_xdebug.dll<\/strong> en verplaats je het naar het \\xampp\\php\\ext<\/strong> bestandspad. Open vervolgens het \\<\/strong>xampp\\php\\php.ini<\/strong> bestand in je favoriete code-editor<\/a> en voeg het volgende toe:<\/p>\n Voeg bij de sectie Zodra je je wijzigingen hebt opgeslagen, herstart je Apache en test je op Xdebug.<\/p>\n Voor Mac<\/a> moet je ervoor zorgen dat je de Xcode<\/a> commandoregeltools installeert met 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.<\/p>\n 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:<\/p>\n Merk op dat je hier mogelijk ook Om te testen of dit werkt, maak je een nieuw xdebug_info.php<\/strong> bestand aan in de hoofddirectory htdocs<\/strong> XAMPP. Voeg daarin het volgende toe:<\/p>\n …ververs dan Apache en test Xdebug in de browser.<\/p>\n Zodra je Xdebug hebt ge\u00efnstalleerd 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)<\/a>. Net als bij je omgeving zijn er zoveel om uit te kiezen, en elke omgeving kan een andere aanpak hebben.<\/p>\n Toch kiezen veel ontwikkelaars voor PhpStorm van JetBrains<\/a>. Feitelijk biedt PhpStorm “op WordPress afgestemde hulp”<\/a> – en het is ook om vele andere redenen een populaire keuze.<\/p>\n De JetBrains website<\/a> bevat volledige instructies voor het aansluiten van Xdebug en PhpStorm, maar we zullen ze ook hier bespreken.<\/p>\n Navigeer eerst naar de Languages & Frameworks > PHP<\/strong> pagina in het Preferences<\/strong> paneel. Open hier het menu More Items<\/strong> naast het CLI Interpreter<\/strong> dropdownveld:<\/p>\n Dit toont wat verdere details over je PHP versie en interpreter. Als je klikt op de ellips More items<\/strong> naast de optie Configuration file<\/strong>, zie je de volledige paden voor je php.ini<\/strong> bestand:<\/p>\n Je zult hierna met dit PHP bestand gaan werken om het instellingsproces voort te zetten.<\/p>\n De eerste taak hier is om alle regels aan te passen die invloed hebben op hoe Xdebug zal werken met PhpStorm.<\/p>\n Zoek in het php.ini<\/strong> bestand naar de volgende regels en verwijder ze of geef ze commentaar:<\/p>\n Deze regels zullen niet in alle gevallen aanwezig zijn, dus schrik niet als je ze niet ziet.<\/p>\n Voeg vervolgens het volgende toe aan het bestand:<\/p>\n Er zijn een paar dingen op te merken over dit pakket code:<\/p>\n Zodra je deze hebt toegevoegd, sla het bestand op en sluit het, en test dan de PHP versie vanaf de opdrachtregel (met Als je een werkende versie van Xdebug hebt, zal deze worden getoond als een van de PHP extensies. Je kunt ook 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.<\/p>\n 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<\/a> met speciale We raden aan de speciale Xdebug Helper extensie te gebruiken. Die kun je installeren in de browser van je keuze:<\/p>\n Als je andere extensies wilt verkennen, biedt de JetBrains website<\/a> een paar extra opties voor de meest populaire browsers.<\/p>\n Als je je gekozen browserextensie hebt ge\u00efnstalleerd, hoef je verder geen configuratie instellingen aan te passen. Vanaf hier kun je beginnen met het gebruik van Xdebug met PhpStorm.<\/p>\n 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.<\/p>\n Er zijn een paar concepten die samen de hele debugervaring vormen:<\/p>\n 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<\/strong>\u00a0in de werkbalk:<\/p>\n Als alternatief kun je klikken op het “telefoon” pictogram binnen de werkbalk van PhpStorm:<\/p>\n Elk van deze opties start het listeningproces naar verbindingen.<\/p>\n 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:<\/p>\n 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”:<\/p>\n Dit opent de debugger in PhpStorm en levert het goede of het slechte nieuws:<\/p>\n 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:<\/p>\n 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.<\/p>\n WordPress heeft zijn eigen set debugopties<\/a> via Je kunt die foutmeldingen ook opslaan met Als je dit koppelt aan de gratis DevKinsta lokale omgevingstool<\/a>, heb je ook een manier om met \u00e9\u00e9n klik 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<\/a>.<\/p>\n Alle Kinsta abonnementen worden verder geleverd met de ingebouwde Kinsta APM tool<\/a>, onze speciaal ontworpen prestatiemonitoringstool voor WordPress sites.<\/p>\n Voordat we dit artikel afronden, moeten we het hebben over sneltoetsen.<\/p>\n 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.<\/p>\n Als Xdebug eenmaal draait, kun je de volgende commando’s gebruiken:<\/p>\n Hoewel je specifieke code-editor zijn eigen sneltoetsen heeft, ligt de nadruk hier op PhpStorm. Bekijk deze tabel met sneltoetsen<\/a> voor het gebruik van Xdebug met PhpStorm:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/xdebug.png\")
\n
Waarom je Xdebug zou willen gebruiken<\/h2>\n
error_log<\/code>, var_dump<\/code>, en print om de resultaten van variabelen en functie-calls te zien.<\/p>\nfunction log_me($message) {\n if ( WP_DEBUG === true ) {\n if ( is_array($message) || is_object($message) ) {\n error_log( print_r($message, true) );\n } else {\n error_log( $message );\n }\n }\n}<\/code><\/pre>\n\n
WP_DEBUG<\/code> inschakelen (waarover straks meer).<\/li>\n\n
Zo zet je PHP foutenregistratie aan<\/h2>\n
error_reporting(E_ALL);<\/code><\/pre>\nini_set<\/a><\/code> functie:<\/p>\nini_set('error_reporting', E_ALL);<\/code><\/pre>\nini_set<\/code> om de specifieke parameter te wijzigen:<\/p>\nini_set('display_errors', '1');<\/code><\/pre>\nZo gebruik je Xdebug<\/h2>\n
1. Installeer Xdebug voor je besturingssysteem (OS)<\/h3>\n
\n
pecl install xdebug<\/code> draaien vanuit een Terminal instantie. Je moet ook XCode commandoregeltools en PHP op je systeem ge\u00efnstalleerd hebben.<\/li>\n<\/ul>\n2. Integreer Xdebug in je ontwikkelomgeving<\/h3>\n
Varying Vagrant Vagrants (VVV)<\/h4>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/vvv-logo.png\"){kind=logo}
vagrant ssh -c \"switch_php_debugmod xdebug\"<\/code><\/pre>\nLaravel Valet<\/h4>\n
php --ini<\/code> op de commandoregel, die een paar verschillende bestandspaden oplevert:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/terminal-php-ini.png\")
\n
zend_extension=\"xdebug.so\"<\/code><\/li>\nxdebug.mode=debug<\/code><\/li>\n<\/ul>\nvalet restart<\/code> uit vanuit de Terminal en voeg je phpinfo(); exit;<\/code> toe aan een van de bestanden van je site. Je zult willen controleren of dit werkt door een snelle paginalading in de browser.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/php-info-page.png\")
sudo brew services restart php<\/code> en dat je moet controleren of je systeeminstallatie van Xdebug correct is met php --info | grep xdebug<\/code>. Je ziet de Xdebug-specifieke regels in de uitvoer:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/grep-xdebug-mode.png\")
<\/p>\nXAMPP<\/h4>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/test-xampp-file-terminal.png\")
output_buffering = Off<\/code><\/pre>\n[XDebug]<\/code> de volgende drie regels toe:<\/p>\nzend_extension=xdebug\nxdebug.mode=debug\nxdebug.start_with_request=trigger<\/code><\/pre>\nxcode-select --install<\/code> in een Terminalinstantie. Daarna zijn er drie pakketten die je wilt installeren met Homebrew:<\/p>\nbrew install autoconf automake libtool<\/code><\/pre>\nphpize\npecl install xdebug<\/code><\/pre>\nsudo<\/code> 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<\/strong>. In deze map vind je ook het pad naar je xdebug.so<\/strong> bestand – noteer dit en gebruik het in plaats van de bestandsnaam voor dit fragment:<\/p>\n[xdebug]\nzend_extension=\/path\/to\/xdebug.so\nxdebug.mode=develop,degug\nxdebug.start_with_request=yes<\/code><\/pre>\n<?php\nxdebug_info();<\/code><\/pre>\nPhpStorm gebruiken met Xdebug<\/h2>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/php-storm.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/cli-interpreter.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/configuration-file.png\")
Werken binnen het php.ini bestand<\/h4>\n
zend_extension=<path_to_zend_debugger>\nzend_extension=<path_to_zend_optimizer><\/code><\/pre>\n[xdebug]\nzend_extension=\"xdebug.so\"\nxdebug.mode=debug\nxdebug.client_host=127.0.0.1\nxdebug.client_port=\"<the port (9003 by default) to which Xdebug connects>\"<\/code><\/pre>\n\n
[xdebug]<\/code> sectie, in dat geval kun je de eerste aanduiding weglaten.<\/li>\nzend_extension<\/code> moet je misschien het volledige pad van xdebug.so<\/strong> toevoegen om verbinding te maken.<\/li>\nxdebug.client_port<\/code> parameter hoe je hem binnen je code zult instellen.<\/li>\n<\/ul>\nphp --version<\/code>):<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/terminal-xdebug-php-version.png\")
phpinfo();<\/code> toevoegen aan een nieuw bestand en dit testen in de browser.<\/p>\nEen browser helperextensie installeren<\/h4>\n
GET<\/code> of POST<\/code> waarden, is het eenvoudiger om een extensie te gebruiken.<\/p>\n\n
Xdebug gebruiken<\/h3>\n
\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/phpstorm-run-menu.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/phpstorm-bug-toolbar.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/add-breakpoints.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/select-debug-browser.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/debugger-output.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/context-menu-debugger.png\")
Hoe Kinsta je helpt bij het debuggen van je WordPress website<\/h2>\n
WP_DEBUG<\/code> en andere tools, zoals Query Monitor<\/a>. 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.<\/p>\nWP_DEBUG_LOG<\/code>, waarmee je de problemen met je site kunt documenteren. We behandelen hoe je dit instelt in een ander artikel op de blog<\/a>. Dit is in een handomdraai in te stellen via je MyKinsta dashboard<\/a> (en het Sites > Tools<\/strong> scherm):<\/p>\n![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/kinsta-dashboard-debug.png\")
WP_DEBUG<\/code> in en uit te schakelen<\/a> voor elke site die je draait:<\/p>\n![\"WP_DEBUG](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/devkinsta-debug.png\")
Cheatsheet commando’s<\/h2>\n
\n\n
\n \nCommando<\/th>\n Snelkoppeling<\/th>\n<\/tr>\n<\/thead>\n \n Specificeert de poort voor listening (zoals [9003]<\/code>)<\/td>\n-p [value]<\/code><\/td>\n<\/tr>\n\n Zet een breakpoint\u00a0op de opgegeven regel voor het opgegeven bestandspad.<\/td>\n breakpoint_set -t line file:\/\/\/<path> -n <line><\/code><\/td>\n<\/tr>\n\n Voert je script uit tot het einde, of tot het volgende breakpoint<\/td>\n run<\/code><\/td>\n<\/tr>\n\n Stapt in de volgende uitvoerbare regel<\/td>\n step_into<\/code><\/td>\n<\/tr>\n\n Toont variabelen en waarden in het huidige bereik<\/td>\n context_get<\/code><\/td>\n<\/tr>\n\n Toont de waarde van de opgegeven eigenschap<\/td>\n property_get -n <property><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n