PHP-projecten debuggen met XDebug

XDebug is een krachtig hulpmiddel voor debugging, prestatieanalyse en code coverage binnen PHP-ontwikkeling. Door XDebug te integreren en te gebruiken binnen de lokale ServBay-ontwikkelomgeving, kun je de efficiëntie van het ontwikkelproces én de kwaliteit van PHP-projecten aanzienlijk verhogen. Met XDebug kunnen ontwikkelaars breakpoints plaatsen, variabelen inspecteren, de call stack van functies volgen, prestatieknelpunten analyseren en zo sneller en doelgerichter problemen oplossen.

Wat is XDebug?

XDebug is een extensie voor PHP die uitgebreide debugging- en analysemogelijkheden biedt. Het ondersteunt remote debugging (meestal via het DBGp-protocol), het plaatsen van breakpoints, stepping, variabeleninspectie, call stack-tracing, performance profiling en het genereren van coverage-rapporten. XDebug geeft je diepgaand inzicht in de uitvoering en status van je code, wat helpt bij het snel en effectief opsporen van problemen.

XDebug kent diverse werkmodi, waarvan de debug modus het meest gebruikt wordt voor interactieve breakpoint-debugging.

XDebug inschakelen en configureren in ServBay

ServBay levert standaard de XDebug-extensie mee voor iedere ondersteunde PHP-versie. Handmatig downloaden of compileren is niet nodig.

1. Activeer de XDebug-module: Open de ServBay-app. Navigeer naar Taal-PHP en selecteer de PHP-versie waarvoor je XDebug wilt gebruiken. Zoek in Extensies naar het xdebug-module en zorg dat deze op “Ingeschakeld” staat. Is dat niet het geval, klik dan op inschakelen. Soms moet PHP-FPM herstart worden (ServBay doet dit vaak automatisch).

2. Configureer je IDE: Stel in je gebruikte IDE, zoals PHPStorm of VS Code, een XDebug-verbinding in. Dit houdt meestal in dat je het te luisteren poortnummer configureert (gelijk aan het XDebug-instellingsscherm in ServBay) en indien nodig remote path mapping gebruikt (binnen ServBay is dat normaal gesproken niet vereist).

   Meer over IDE-configuratie

   Voor gedetailleerde stappen om XDebug in te stellen in specifieke IDE’s als PHPStorm of VS Code, raadpleeg de documentatie van je IDE of bekijk het artikel Hoe het meegeleverde Xdebug-module van ServBay te activeren.

Praktijkvoorbeeld: PHP-project debuggen in ServBay

We laten met een eenvoudig voorbeeldproject zien hoe je XDebug binnen ServBay gebruikt voor debugging.

1. Een website instellen in ServBay

Om te starten maak je in ServBay een nieuwe site aan voor het voorbeeldproject:

1. Maak een nieuwe map aan in ServBay’s webroot (/Applications/ServBay/www/), bijvoorbeeld servbay-xdebug-app.
2. Open ServBay en ga naar het gedeelte “Websites”.
3. Klik op “Nieuwe website toevoegen” en wijs de webroot toe aan /Applications/ServBay/www/servbay-xdebug-app.
4. Stel een lokale domeinnaam in, bijvoorbeeld servbay-xdebug-app.servbay.demo.
5. Kies de gewenste PHP-versie en controleer of XDebug volgens bovenstaande stappen actief en geconfigureerd is.
6. Sla de wijzigingen op. ServBay configureert vervolgens automatisch Caddy/Nginx en werkt het hosts-bestand bij (of gebruikt de interne DNS-service).

2. Projectstructuur en voorbeeldcode

Maak in de directory /Applications/ServBay/www/servbay-xdebug-app/ de volgende bestanden en mappen aan:

servbay-xdebug-app/
├── src/
│   └── Calculator.php
└── index.php

De inhoud van src/Calculator.php:

<?php
namespace App;

class Calculator
{
    public function add($a, $b)
    {
        // Plaats hier een breakpoint
        return $a + $b;
    }

    public function subtract($a, $b)
    {
        return $a - $b;
    }
}

De inhoud van index.php:

<?php
// Stel dat je Composer gebruikt, dan laad je hier de autoloader
// Gebruik je geen Composer, pas deze regel dan aan volgens je eigen situatie
require __DIR__ . '/vendor/autoload.php';

use App\Calculator;

echo "Debugging Example:\n";

$calculator = new Calculator();
$num1 = 5;
$num2 = 3;

$sum = $calculator->add($num1, $num2);
$difference = $calculator->subtract($num1, $num2);

echo "Sum: " . $sum . "\n";
echo "Difference: " . $difference . "\n";

echo "Done.\n";
?>

Let op: Bovengenoemde require __DIR__ . '/vendor/autoload.php'; gaat ervan uit dat je Composer gebruikt. Voor eenvoudige tests kun je deze regel weghalen en use App\Calculator; vervangen door require __DIR__ . '/src/Calculator.php';.

3. Breakpoint plaatsen

Open in je IDE (bijvoorbeeld PHPStorm) het bestand /Applications/ServBay/www/servbay-xdebug-app/src/Calculator.php. Klik naast de regel return $a + $b; in de add-methode om daar een breakpoint te plaatsen.

4. Debugsessie starten

1. Start in je IDE het luisteren naar XDebug-verbindingen. In PHPStorm doe je dit meestal door bovenin op de knop “Start Listening for PHP Debug Connections” te klikken (een telefoontje- of kever-icoon).
2. Bezoek in je browser de index.php van de nieuwe ServBay-site: https://servbay-xdebug-app.servbay.demo/index.php.
3. Als xdebug.start_with_request op trigger staat, zorg dan dat je een XDebug-trigger hebt toegevoegd, bijvoorbeeld door de url https://servbay-xdebug-app.servbay.demo/index.php?XDEBUG_TRIGGER=1 te openen of een browserextensie te gebruiken.

5. Debugproces

1. Zodra de browser index.php aanroept en de XDebug-sessie triggert, maakt XDebug automatisch verbinding met je IDE en pauzeert op het ingestelde breakpoint.
2. Je IDE schakelt over naar de debugweergave waarbij de uitvoering op het breakpoint in de add-methode van Calculator.php stilstaat.

6. Variabelen inspecteren

1. In het debugvenster van de IDE zie je de huidige code-regel, de call stack, variabelen, enzovoorts.
2. In het tabblad “Variables” controleer je de actuele waarden van variabelen. Bijvoorbeeld, $a zal de waarde 5 tonen en $b de waarde 3.

7. Stapsgewijs uitvoeren

1. Gebruik de step-functionaliteit van je IDE (Step Over (F8), Step Into (F7), Step Out (Shift+F8), enz.).
   • Step Over: Voert de huidige regel uit. Als de regel een functie-aanroep bevat, wordt niet in de functie gestapt, maar wel uitgevoerd.
   • Step Into: Voert de huidige regel uit en gaat de functie binnen als deze aangeroepen wordt.
   • Step Out: Maakt de huidige functie af en keert terug naar de plek waar deze werd aangeroepen.
2. Met deze knoppen kun je de uitvoering en waarde van variabelen stap voor stap volgen.

8. Verder uitvoeren

1. Klik op de knop “Resume Program” in je IDE (meestal een groen play-icoon of F9). Het programma draait verder tot het volgende breakpoint of einde van de uitvoering.

9. Uitvoer bekijken

1. Na afronding kun je de uitvoerresultaten in je browser bekijken (of in de terminal als je CLI-debugging doet). Je zou het volgende moeten zien:

   Debugging Example:
   Sum: 8
   Difference: 2
   Done.

Belangrijke aandachtspunten

• Firewall: Controleer of je besturingssysteem de poort waarop je IDE luistert (standaard 9003) niet blokkeert.
• Poortconflict: Zorg ervoor dat de ingestelde XDebug-poort niet in gebruik is door een ander programma.
• Performance-impact: Met xdebug.mode=debug en xdebug.start_with_request=yes zal iedere PHP-aanroep debugging starten, wat de websiteperformance merkbaar kan verminderen. Zet XDebug uit of stel xdebug.start_with_request in op trigger als je niet aan het debuggen bent.
• CLI-debugging: Je kunt XDebug ook gebruiken voor het debuggen van PHP-scripts via de opdrachtregel. Hier zijn mogelijk extra omgevingsvariabelen of parameters voor nodig, zie de XDebug-documentatie.
• IDE-versie en -instellingen: Instellingen en schermen kunnen enigszins verschillen tussen IDE’s en versies. Raadpleeg de documentatie van jouw IDE voor precieze instructies.

Veelgestelde vragen (FAQ)

Q: Mijn IDE maakt geen verbinding met XDebug, wat nu?

A: Controleer het volgende:

1. Is de XDebug-module voor de juiste PHP-versie in ServBay ingeschakeld?
2. Kloppen de instellingen xdebug.mode, xdebug.client_host, en xdebug.client_port in php.ini met die van je IDE?
3. Bij gebruik van xdebug.start_with_request = trigger: Heb je een geldige trigger geplaatst (GET/POST-parameter, cookie of header)?
4. Staat de firewall van je systeem verbindingen via de XDebug-poort toe?
5. Luistert je IDE daadwerkelijk op de juiste poort?

Q: Waarom wordt mijn website traag na het inschakelen van XDebug?

A: Grote kans dat xdebug.start_with_request op yes staat. Dan start bij elk verzoek automatisch debugging, wat veel overhead veroorzaakt. Stel dit in op trigger om debugging alleen bij wens te activeren.

Q: Kan ik XDebug gebruiken om AJAX-verzoeken te debuggen?

A: Jazeker! Dit werkt hetzelfde als bij gewone HTTP-verzoeken, mits het AJAX-verzoek ook een debug-trigger bevat (meestal als cookie of header).

Q: Kan ik naast PHPStorm ook met VS Code of andere IDE’s XDebug in ServBay gebruiken?

A: Absoluut. De XDebug-extensie in ServBay is standaard PHP en werkt met iedere IDE of editor die DBGp ondersteunt, zoals VS Code (met PHP Debug-extensie), NetBeans, Eclipse, enzovoorts. Configuratie is vrijwel gelijk, stel de luisterpoort in je IDE correct in.

Conclusie

Dankzij de integratie van XDebug in ServBay kunnen ontwikkelaars efficiënt lokaal PHP-projecten debuggen. Met vaardigheden in breakpoint-plaatsing, variabeleninspectie en stapsgewijze executie lokaliseer en verhelp je sneller problemen, met betere code als resultaat. De gebruiksvriendelijke omgeving van ServBay in combinatie met de kracht van XDebug maakt het debuggen tot een essentieel en krachtig onderdeel van je PHP-werkflow. Zet XDebug vandaag nog in via ServBay en ervaar het verschil in soepele, efficiënte PHP-ontwikkeling!