Retour au blog

Comment configurer Xdebug avec DDEV dans VSCode en 4 étapes

2023-08-142 min de lecture

Comment configurer Xdebug avec DDEV dans VSCode : En seulement quatre étapes faciles, améliorez votre expérience de codage et de débogage dans cet éditeur populaire, comme détaillé dans cet article.

Xdebug est un outil de débogage et de profilage pour PHP. Il offre des traces de pile, l'inspection de variables et des points d'arrêt, ainsi que la couverture de code et le profilage de performance pour optimiser les applications PHP.

Le débogage est le processus d'identification, de diagnostic et de correction des erreurs ou des bogues dans un logiciel. Ces erreurs peuvent prendre la forme de code incorrect, d'erreurs logiques ou de comportements indésirables qui empêchent le logiciel de fonctionner comme prévu.

1. Installer les prérequis :

Assurez-vous d'avoir les outils suivants installés :

2. Configurer DDEV pour Xdebug :

DDEV est livré avec Xdebug préconfiguré dès la sortie de la boîte. Il vous suffit de l'activer :

  1. Accédez au répertoire de votre projet DDEV.
  2. Exécutez la commande :
ddev xdebug on

Pour vérifier que Xdebug est activé :

ddev describe

Recherchez la section Xdebug ; elle devrait indiquer que Xdebug est activé.

3. Configurer VSCode :

  1. Dans VSCode, cliquez sur « Exécuter » dans la barre d'outils en haut.
  2. Cliquez sur « Ouvrir la configuration » (ou une formulation similaire, selon votre version de VSCode).
  3. Ajoutez la configuration suivante :
{
    "name": "Listen for Xdebug",
    "type": "php",
    "request": "launch",
    "hostname": "0.0.0.0",
    "port": 9003,
    "pathMappings": {
        "/var/www/html": "${workspaceFolder}"
    }
}

Assurez-vous que cette configuration est enregistrée dans le fichier launch.json dans le dossier .vscode de votre projet.

Configuration xdebug dans vscode
Configuration vscode

4. Démarrer le débogage :

  1. Définissez des points d'arrêt dans votre code PHP.
  2. Dans VSCode, cliquez sur « Exécuter » dans la barre d'outils en haut, puis cliquez sur Démarrer le débogage.
  3. Initiez l'action dans votre application web qui déclenche le point d'arrêt.
Démarrer le débogage vscode et xdebug

VSCode devrait maintenant capturer le point d'arrêt, vous permettant d'inspecter les variables, de parcourir le code, etc.

Débogage avec vs code et xdebug
Source : https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug

5. Désactiver Xdebug dans DDEV (Facultatif) :

Lorsque vous avez terminé le débogage, vous voudrez peut-être désactiver Xdebug dans DDEV pour améliorer les performances :

ddev xdebug off

Bon débogage !

Catégories: