Configurer Xdebug avec Visual Studio Code

Pour ceux qui ne veulent pas dépenser 250 euros pour avoir une license de PHPStorm, il reste Visual Studio Code, qui est gratuite. Cet IDE s’est imposé comme un IDE à tout faire, ce qui en fait un outil très intéressant pour toucher à tout type de langages (même Solidity). Nous allons voir comment configurer XDebug pour fonctionner avec VSCode.

Qu’est que Xdebug?

Xdebug est une extension bas niveau qui permet de débugger pas à pas votre code PHP.

Pour savoir débugger est important?

Quand vous avez un grand projet, inutile de faire des var_dump, echo ou print, il faut absolument passer pas un debugger, vous deviendrez un meilleur codeur. Typiquement un projet Symfony avec des milliers de fichier potentiellement, on ne s’en sort pas avec des echo !

Comment le debug est déclenché?

Le serveur web reçoit l’instruction de débugger via un cookie spécial envoyé par le navigateur, via une extension Chrome (donc pas dispo avec Firefox par exemple quoique l’on peut trouver si l’on veut un équivalent). Le setup risque d’être un peu long mais cela en vaut vraiment le coup !

Quelle version de Xdebug faut il installer?

En fait il faut aller voir le tableau de correspondance pour trouver la paire de logiciel PHP/Xdebug qui fonctionne. Le site officiel possède un tableau de compatibilité version de PHP et version de XDebug, soyez à jour ! J’ai fait plusieurs tutos sur Xdebug sur ce site, et je fais un nouveau tuto pour remettre à jour les versions qui marchent, et aussi les façons de configurer ont changé, donc il était temps de remettre à jours les connaissances avec les dernières version des tous les logiciels PHP 8.x et Xdebug 3.x

Allez sur le site officiel pour télécharger le zip, attention, il y a différentes versions pour une même version de Xdebug. Pour windows il faut choisir la thread sae, 64 bits.

Où configurer le Xdebug?

Il faut aller dans le fichier php.ini, attention, il y a deux version de php.ini, une pour la version CLI (en ligne de commande) et une pour la version web, à deux endroits différent, utiliser phpinfo(); CTRL+F de php.ini et vous aurez le chemin du fichier. Collez ce texte en fin de fichier.

[xdebug]
zend_extension="C:\laragonwamp\bin\php\php-8.1.10-Win32-vs16-x64\ext\php_xdebug-3.1.5-8.1-vs16-x86_64.dll"
xdebug.mode=debug
xdebug.client_host=127.0.0.1
xdebug.client_port=9003
xdebug.start_with_request=yes
xdebug.idekey=XDEBUG_ECLIPSE

N’oubliez pas de recharger Apache !

Installer l’extension Chrome Xdebug

Comme nous avons vu plus tôt, c’est le navigateur qui envoit un en-tête spécial pour déclencher XDebug. Regardez la section COOKIE lorsque le script suivant est exécuté:

<?php
phpinfo();

Et coté navigateur en regardant les en-têtes envoyés :

Regardez la section COOKIE, on a bien la même chose envoyée par le navigateur. Ceci est possible grâce à l’extension Xdebug pour Chrome (faites une recherche sur Google) qui envoit automatiquement ce cookie. Installons le. Vérifiez ensuite que le petit insecte est au vert (actif), sinon cliquez dessus.

Fichier de configuration dans VScode et plugin Xdebug pour PHP

Attention ce n’est pas fini ! mais bientôt ! Puisque nous débuggons sous VSCode, nous allons ajouter un plugin dédié et un fichier de configuration pour VSCode. Tout d’abord, le plugin, installez le plugin, entre PHP DEBUG dans la barre de recherche des plugins. Installez celui avec la mention « Debug support for PHP with XDebug »

Le fichier de configuration

Cliquez sur l’icône de débug sous VSCode, puis Add Configuration, un ficheir JSON va s’ouvrir, collez le code ci-dessous

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        }
    ]
}

Testez votre script

Maintenant créez un fichier PHP dans un virtualhost, mettez un point d’arrêt sur une ligne, cliquez sur Listen to Xdebug, et chargez la page dans votre navigateur !

Mode pas à pas

Installe Xdebug sur MacOs

Pour les MacOs, le fichier Xdebug est à installer avec PECL

>pecl install xdebug
Build process completed successfully
Installing '/usr/local/Cellar/php/8.2.1/pecl/20220829/xdebug.so'
install ok: channel://pecl.php.net/xdebug-3.2.0
Extension xdebug enabled in php.ini

Localisez l’endroit où se trouve Xdebug de suite après l’installation, le chemin est normalement affiché, recopiez le pour le mettre dans le fichier php.ini,

Installer Xdebug pour Linux

La procédure est à peu près la même que pour MacOs, utilisez PECL pour installer Xdebug, recopiez le chemin

Retour en haut