Comme tout développeur peut en attester, le code n’est jamais prêt pour la production après la première ébauche. Une partie essentielle du processus de développement est le débogage – supprimer ou modifier toutes les parties de votre code qui ne fonctionnent pas.
L’extension Xdebug pour PHP est un moyen populaire pour découvrir et détruire tous les bogues de votre code.
L’un des aspects les plus intéressants de Xdebug est sa flexibilité. Quel que soit votre framework ou votre environnement de développement préféré, vous trouverez une version de Xdebug qui s’intègre à votre flux de travail. À partir de là, la prise en main de l’outil ne sera pas longue.
Ce tutoriel examine Xdebug en profondeur, y compris le processus d’installation, son intégration dans votre configuration et son utilisation générale.
Tout d’abord, nous allons vous donner plus de contexte sur ce qu’est Xdebug et ce qu’il fait.
Présentation de Xdebug
Xdebug est l’une des extensions les plus populaires pour déboguer votre code PHP. Vous l’installerez à partir de l’environnement que vous avez choisi, et il agit comme un « débogueur par étapes ».
En bref, cela vous permet de travailler sur votre code ligne par ligne afin de pouvoir examiner comment le code agit et interagit dans votre programme, ainsi que d’étudier sa sortie. À partir de là, vous pouvez apporter les modifications que vous jugez nécessaires.
Xdebug peut cependant faire beaucoup plus :
- Vous pouvez analyser les performances de votre code à l’aide d’un ensemble de mesures et de visualisations.
- Lorsque vous exécutez des tests unitaires PHP, vous pouvez voir quelles suites de code vous exécutez.
- Xdebug inclut des capacités de « traçage », qui écriront chaque appel de fonction sur le disque. Cela comprendra les arguments, les affectations de variables et les valeurs de retour.
- Xdebug apporte également des améliorations au rapport d’erreur standard de PHP. Nous en parlerons plus tard.
Compte tenu de l’ensemble des fonctionnalités, il existe de nombreuses façons d’utiliser Xdebug (et tout débogueur similaire) dans votre flux de travail. Nous les aborderons dans la section suivante.
Pourquoi vous voudriez utiliser Xdebug
De nombreux développeurs n’auront pas un flux de travail de débogage dédié qui utilise des outils tiers et des extensions. Ceci est dû au fait que PHP inclut sa propre journalisation rudimentaire des erreurs. Vous utiliserez des commandes telles que error_log, var_dump, et print pour voir les résultats des variables et des appels de fonction.
Par exemple, il existe de nombreux extraits de code que vous pouvez réutiliser pour le développement de WordPress – Stack Overflow en regorge :
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 );
}
}
}Cependant, cette approche présente quelques inconvénients importants :
- Vous devez d’abord vous assurer que vous activez les journaux d’erreurs pour la plate-forme avec laquelle vous travaillez. Dans ce cas, vous voudrez activer
WP_DEBUG(nous y reviendrons bientôt). - Cet exemple de débogage « dump » offre moins de possibilités d’investigation que le débogage par étapes. Ici, vous ne pouvez sortir que ce que vous avez défini.
Le dernier point nécessite beaucoup d’efforts manuels, surtout si votre travail quotidien n’est pas celui d’un administrateur système. Par exemple, si vous voulez déboguer un bloc de code, vous pouvez ajouter votre extrait de code en fonction d’une variable que vous définissez. Cependant, il se peut qu’elle ne soit pas la source du problème ou même qu’elle n’indique pas ce qui se passe.
Au lieu de cela, un outil tel que Xdebug peut opérer sa magie pour fournir une plus grande portée :
- Vous pouvez « casser » votre code à différents moments de l’exécution pour voir ce qui se passe en temps réel.
- Il existe une myriade de mesures, de visualisations, de branches, etc. pour vous aider à vérifier ce que fait votre code et comment il réagit.
- Parfois, vous pouvez même modifier des valeurs à la volée pendant le processus de débogage. Cela offre une immense valeur, même pour les suites de code qui fonctionnent bien. Vous pouvez essentiellement effectuer des tests unitaires manuels à tout moment.
- Comme vous utilisez des points de terminaison pour marquer les zones à déboguer, vous n’avez pas besoin de travailler avec des bribes dans votre code. Cela permet de garder votre code plus propre et de réduire le nombre de problèmes futurs.
Globalement, l’utilisation d’un outil tel que Xdebug est une décision proactive plutôt que réactive. Vous pouvez utiliser le débogage par étapes comme partie intégrante du processus de développement de base, tout comme la mise en œuvre de tests unitaires dans le cadre du développement piloté par les tests (TDD).
Comment activer la journalisation des erreurs PHP
Bien que vous puissiez déboguer votre code sans une erreur spécifique, il est souvent bon de savoir si un problème se produit sans avoir Xdebug ouvert. Cela vous donne un point de départ pour l’exploration. Ce n’est pas strictement nécessaire, mais cela peut être une partie utile de votre chaine.
Pour signaler chaque erreur qui survient, vous devrez ajouter une ligne en haut du fichier PHP concerné :
error_reporting(E_ALL);Il s’agit d’une commande fourre-tout, et vous pouvez réaliser la même chose en utilisant la fonction ini_set fonction :
ini_set('error_reporting', E_ALL);Ceci vous permet de modifier les réglages dans votre fichier php.ini sur une base de projet par projet. Bien que vous puissiez aller dans ce fichier et effectuer une modification manuelle, il est souvent préférable de travailler avec ini_set pour modifier le paramètre spécifique :
ini_set('display_errors', '1');Une fois que le rapport d’erreur actif est réglé à votre convenance, vous pouvez commencer à travailler avec Xdebug.
Comment utiliser Xdebug
Au cours des prochaines sections, nous vous montrerons comment utiliser Xdebug, y compris les étapes à suivre pour configurer les choses. Bien que nous ne puissions pas couvrir tous les aspects de l’outil, ce guide de démarrage rapide vous permettra de vous lancer rapidement.
Mais tout d’abord, vous devez installer Xdebug. Découvrons comment le faire.
1. Installez Xdebug pour votre système d’exploitation
Comme Xdebug s’adapte à un grand nombre de configurations, le processus exact pour chacune d’elles sera légèrement différent. Au niveau du système d’exploitation, il y a quelques différences :
- Windows : Il s’agit d’un processus d’installation quelque peu compliqué qui implique l’utilisation d’un fichier PHP existant et d’un assistant d’installation, puis le téléchargement de la bonne version pour votre système.
- Linux : La méthode ici est sans doute la plus simple : Vous pouvez utiliser un gestionnaire de paquets pour installer Xdebug, ou la bibliothèque communautaire d’extension PHP (PECL).
- Mac : Cette méthode est également simple : Une fois que vous avez installé PECL, vous pouvez exécuter
pecl install xdebugà partir d’une instance de Terminal. Vous devrez également avoir les outils de ligne de commande XCode et PHP installés sur votre système.
Cependant, la plupart des utilisateurs ne voudront pas s’en tenir à une instance de Xdebug au niveau du système. Au lieu de cela, vous voudrez l’intégrer dans votre propre environnement de développement.
2. Intégrer Xdebug dans votre environnement de développement
Une fois que vous avez installé Xdebug pour votre système d’exploitation, vous devez le connecter à votre environnement.
Il existe tellement de systèmes et d’outils pris en charge que nous ne pouvons pas tous les détailler. Plus tard, nous vous proposerons des instructions pour DevKinsta et PhpStorm. Malgré tout, il existe de nombreux autres environnements populaires parmi lesquels vous pouvez choisir. Vous trouverez ci-dessous quelques-unes de nos meilleures recommandations.
Varying Vagrants Variants (VVV)
VVV est l’un des environnements nommés sur le site Make WordPress:
La bonne nouvelle est que VVV inclut déjà une version de Xdebug, mais vous devez l’activer. Vous pouvez le faire en utilisant Secure Shell (SSH) dans une fenêtre de terminal :
vagrant ssh -c "switch_php_debugmod xdebug"Il y a cependant un petit impact sur les performances, et vous devrez réactiver cette option si vous provisionnez vos sites.
Valet Laravel
Pour certains utilisateurs, Laravel’s Valet représente un environnement de développement web presque parfait. Mieux encore, vous pouvez y intégrer Xdebug.
Pour cela, vous devrez créer un fichier de configuration pour le débogueur. Vous pouvez trouver votre propre chemin en utilisant php --ini à la ligne de commande, qui renverra plusieurs chemins de fichiers différents :
Ensuite, créez un nouveau fichier xdebug.ini à l’emplacement des fichiers .ini supplémentaires. Dans notre exemple, il se trouve dans /opt/homebrew/etc/php/7.4/conf.d.
Une fois que vous avez ouvert ce nouveau fichier, ouvrez également le chemin du fichier de configuration chargé (votre fichier php.ini principal). Avec les deux ouverts, ajoutez ce qui suit au bas du fichier :
- php.ini :
zend_extension="xdebug.so" - xdebug.ini :
xdebug.mode=debug
Une fois que vous avez enregistré vos modifications, exécutez valet restart depuis le terminal, puis ajoutez phpinfo(); exit; à l’un des fichiers de votre site. Vous voudrez vérifier si cela fonctionne par un chargement rapide de la page dans le navigateur.
Notez que vous devrez peut-être redémarrer PHP en utilisant sudo brew services restart php et vérifier que votre installation système de Xdebug est correcte en utilisant php --info | grep xdebug. Vous remarquerez les lignes spécifiques à Xdebug dans la sortie :
À partir de là, vous pouvez chercher à incorporer Xdebug dans l’éditeur de code de votre choix.
XAMPP
Tout comme Valet, le processus pour XAMPP comporte plusieurs parties. Cependant, les versions Windows et macOS ont deux processus différents.
Commencez par installer XAMPP, puis effectuez une vérification rapide pour voir si le fichier php_xdebug.dll (Windows) ou xdebug.so (macOS) existe sur votre système :
Si le fichier existe, vous pouvez passer à la configuration. Sinon, vous devrez d’abord télécharger le bon fichier binaire pour Windows – un fichier 64 bits pour votre version PHP préférée – ou installer quelques dépendances supplémentaires si vous êtes sur un Mac.
Pour Windows, renommez le fichier DLL php_xdebug.dll, puis déplacez-le dans le chemin du fichier \xampp\php\ext. Ensuite, ouvrez le fichier \xampp\php\php.ini dans votre éditeur de code préféré et ajoutez ce qui suit :
output_buffering = OffDans la section [XDebug], ajoutez les trois lignes suivantes :
zend_extension=xdebug
xdebug.mode=debug
xdebug.start_with_request=triggerUne fois que vous avez enregistré vos modifications, redémarrez Apache et testez Xdebug.
Pour Mac, vous voudrez vous assurer que vous installez les outils de ligne de commande Xcode en utilisant xcode-select --install à une instance de terminal. Après cela, il y a trois paquets que vous voudrez installer en utilisant Homebrew :
brew install autoconf automake libtoolDans certains cas, vous devrez également réinstaller XAMPP pour obtenir à la fois le programme de base et les « Developer Files ». Vous devriez pouvoir réinstaller uniquement ces fichiers, mais vous voudrez d’abord effectuer une sauvegarde de votre installation existante.
Ensuite, naviguez vers le téléchargement du dossier source de Xdebug sur votre système et décompressez le fichier TGZ. Dans une fenêtre de terminal, naviguez vers ce répertoire et exécutez ce qui suit :
phpize
pecl install xdebugNotez que vous devrez peut-être utiliser sudo ici aussi. À partir de là, vous pouvez modifier le fichier php.ini de XAMPP. Pour la plupart des installations macOS, vous le trouverez dans /Applications/XAMPP/xamppfiles/etc/php.ini. Dans ce répertoire, vous trouverez également le chemin d’accès à votre fichier xdebug.so – notez-le et utilisez-le à la place du chemin d’accès au fichier pour cet extrait :
[xdebug]
zend_extension=/path/to/xdebug.so
xdebug.mode=develop,degug
xdebug.start_with_request=yesPour tester si cela fonctionne, créez un nouveau fichier xdebug_info.php dans le répertoire principal htdocs de XAMPP. A l’intérieur, ajoutez ce qui suit :
<?php
xdebug_info();…puis rafraîchissez Apache et testez Xdebug dans le navigateur.
Utiliser PhpStorm avec Xdebug
Une fois que vous avez installé Xdebug par le biais du système d’exploitation et de votre environnement de développement, vous devrez également afficher le débogueur lui-même. Pour ce faire, vous utiliserez l’éditeur de code ou l’environnement de développement intégré (IDE) de votre choix. Comme pour votre environnement, il y en a tant à choisir, et chacun peut avoir une approche différente.
Cela dit, de nombreux développeurs choisissent d’utiliser PhpStorm de JetBrains. En fait, PhpStorm offre une assistance adaptée à WordPress – et c’est un choix populaire pour de nombreuses autres raisons, également.
Le site web de JetBrains comprend des instructions complètes sur la connexion de Xdebug et PhpStorm, mais nous allons les passer en revue ici.
Tout d’abord, naviguez vers la page Langages & Frameworks > PHP dans le volet Préférences. Ici, ouvrez le menu kebab Plus d’éléments à côté du champ déroulant Interpréteur CLI :
Ceci montrera quelques détails supplémentaires sur votre version de PHP et votre interpréteur. Si vous cliquez sur l’ellipse Plus d’éléments à côté de l’option Fichier de configuration, vous verrez les chemins complets de votre fichier php.ini :
Vous allez ensuite travailler avec ce fichier PHP pour poursuivre le processus de configuration.
Travailler dans le fichier php.ini
La première tâche ici est de modifier toutes les lignes qui ont un impact sur la façon dont Xdebug fonctionnera avec PhpStorm.
Dans le fichier php.ini, recherchez les lignes suivantes et supprimez-les ou commentez-les :
zend_extension=<path_to_zend_debugger>
zend_extension=<path_to_zend_optimizer>Ces lignes ne seront pas présentes dans tous les cas, donc ne vous inquiétez pas si vous ne les voyez pas.
Ensuite, ajoutez ce qui suit au fichier :
[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>"Il y a quelques choses à noter à propos de cette suite de code :
- Vous avez peut-être déjà une section
[xdebug], auquel cas vous pouvez omettre la première désignation. - L’entrée
zend_extensionpeut vous obliger à ajouter le chemin complet de xdebug.so pour vous connecter. - Bien qu’il puisse ressembler à un espace réservé, le paramètre
xdebug.client_portest celui que vous définirez dans votre code.
Une fois que vous les avez ajoutés, enregistrez et fermez le fichier, puis testez la version PHP en ligne de commande (en utilisant php --version) :
Si vous avez une version fonctionnelle de Xdebug, elle apparaitra comme l’une des extensions PHP. Vous pouvez également ajouter phpinfo(); à un nouveau fichier et le tester dans le navigateur.
C’est à peu près tout ce que vous devez faire pour que Xdebug fonctionne comme votre débogueur par défaut avec PhpStorm. La dernière étape avant de l’utiliser est d’installer une extension d’aide au navigateur.
Installation d’une extension d’aide au navigateur
La dernière connexion clé que vous devrez établir se situe entre votre navigateur et PhpStorm, en activant le débogage par étapes sur le serveur. Bien que vous puissiez le faire depuis la ligne de commande en utilisant les valeurs spéciales GET ou POST, il est plus simple d’utiliser une extension.
Nous recommandons l’utilisation de l’extension dédiée Xdebug Helper. Vous pouvez l’installer sur le navigateur de votre choix :
Si vous souhaitez explorer d’autres extensions, le site web de JetBrains propose quelques options supplémentaires pour les navigateurs les plus populaires.
Une fois que vous avez installé l’extension de navigateur de votre choix, vous ne devriez pas avoir à régler d’autres paramètres de configuration. À partir de là, vous pouvez commencer à utiliser Xdebug avec PhpStorm.
Utilisation de Xdebug
Bien que nous utilisions PhpStorm ici, vous verrez une mise en page et une interface similaires entre les différents IDE – bien qu’il y ait aussi quelques différences évidentes.
Il existe quelques concepts qui se combinent pour former l’ensemble de l’expérience de débogage :
- Points de terminaisons : Ce sont les points où Xdebug s’arrêtera pour vous permettre d’inspecter la sortie. Vous pouvez en définir autant que vous le souhaitez.
- Écoute des connexions : Vous pouvez activer ou désactiver cette fonction, mais la plupart des développeurs la laissent toujours activée.
- L’écran de débogage : Vous passerez la majeure partie de votre temps dans l’interface de débogage – c’est là que vous travaillerez avec les différentes lignes de code, variables et paramètres.
La première étape consiste à activer l’écoute – vous ne pourrez rien déboguer sans elle. Pour ce faire, cliquez sur l’option Exécuter > Démarrer l’écoute des connexions de débogage PHP dans la barre d’outils :
Comme alternative, vous pouvez cliquer sur l’icône « téléphone » dans la barre d’outils de PhpStorm :
L’une ou l’autre de ces options lancera l’écoute des connexions.
À partir de là, vous pouvez commencer à définir des points de terminaisons dans les gouttières de l’éditeur de code. Un point rouge indique un point de terminaison, sur lequel vous pouvez cliquer pour l’activer :
Lorsque vous voulez déboguer votre code, la manière la plus directe est de commencer à écouter, de définir des points d’arrêt, puis de vous rendre sur la page en question dans votre navigateur. Localisez l’icône de votre extension dans le navigateur, puis cliquez dessus et sélectionnez l’option « Deboguer » :
Cela ouvrira le débogueur dans PhpStorm et vous livrera la bonne ou la mauvaise nouvelle :
Si vous faites un clic droit sur les différentes valeurs, attributs, paramètres et variables, vous pourrez accéder à un autre menu contextuel. Cela vous donne beaucoup de possibilités supplémentaires pour tester et déboguer votre code :
Par exemple, vous pourriez définir des valeurs différentes pour les variables le long du chemin. Il peut s’agir d’une tentative délibérée de casser votre code et de voir ce qui se passe, ou d’un moyen de tester un code qui a déjà besoin d’être corrigé. Dans tous les cas, cela vous donne une méthode fantastique pour déboguer votre code sans avoir à le modifier au préalable.
Comment Kinsta vous aide à déboguer votre site WordPress
WordPress est livré avec son propre ensemble d’options de débogage via WP_DEBUG et d’autres outils, tels que Query Monitor. Ces outils permettent d’activer un mode dans lequel vous commencerez à voir des messages d’erreur auparavant cachés sur l’ensemble de votre site et de votre tableau de bord. À partir de là, vous pouvez commencer à comprendre quel est le problème.
Vous pouvez également enregistrer ces messages d’erreur à l’aide de WP_DEBUG_LOG, ce qui vous permet de documenter les problèmes de votre site. Nous expliquons comment configurer ce système dans un autre article du blog. C’est un jeu d’enfant à configurer via votre tableau de bord MyKinsta (et l’écran Sites > Outils):
Si vous associez cette option à l’outil gratuit d’environnement local DevKinsta, vous disposerez également d’un moyen en un clic d’activer et de désactiver WP_DEBUG pour chaque site que vous créez :
Cela signifie que vous pouvez attraper les erreurs sur votre site pendant le développement, et vous assurer qu’elles ne se répercutent pas sur votre site en direct. Ces modes sont également faciles à désactiver – ce qui est vital pour la sécurité du site et des utilisateurs.
Tous les plans Kinsta sont également livrés avec l’outill intégré Kinsta APM, qui est notre outil de surveillance des performances conçu sur mesure pour les sites WordPress.
Aide-mémoire des commandes
Avant de conclure cet article, nous devons mentionner les raccourcis.
Comme beaucoup d’autres logiciels, il existe plusieurs façons de naviguer dans Xdebug (et PhpStorm) en utilisant uniquement le clavier. En fait, vous pouvez même utiliser la ligne de commande pour déboguer des scripts PHP.
Une fois que Xdebug est opérationnel, vous pouvez utiliser les commandes suivantes pour vous déplacer :
| Commande | Raccourci |
|---|---|
Spécifie le port à écouter (tel que [9003]) |
-p [value] |
| Définit un point d’arrêt sur la ligne spécifiée pour le chemin de fichier donné. | breakpoint_set -t line file:///<path> -n <line> |
| Exécute votre script jusqu’à la fin, ou jusqu’au prochain point d’arrêt | run |
| Passe à la ligne exécutable suivante | step_into |
| Liste les variables et les valeurs dans la portée actuelle | context_get |
| Affiche la valeur de la propriété spécifiée | property_get -n <property> |
Alors que votre éditeur de code spécifique aura ses propres raccourcis dédiés, l’accent est mis ici sur PhpStorm. Jetez un coup d’oeil à ce tableau des raccourcis clavier pour utiliser Xdebug avec PhpStorm :
| Commande | Windows | macOS |
|---|---|---|
| Action de recherche | Ctrl + Shift + A | Shift + Cmd + A |
| Ouvrir le débogueur | Shift + F9 | Ctrl + D |
| Basculer le point d’arrêt | Contrôle + F8 | Cmd + F8 |
| Entrer dans une étape | F7 | F7 |
| Passer au-dessus | F8 | F8 |
| Voir les points d’arrêt | Ctrl + Shift + F8 | Shift + Cmd + F8 |
| Reprendre le programme | F9 | F9 |
| Évaluer l’expression courante | Alt + F8 | Option + F8 |
Heureusement, il n’y a pas grand-chose à mémoriser ici. Vous devez ouvrir le débogueur, définir des points d’arrêt par ligne, écouter les connexions et exécuter vos scripts.
Toutefois, si vous avez besoin d’un raccourci pour une tâche particulière, vous pouvez utiliser la commande PhpStorm Find Action :
Dès que vous commencez à taper dans cet espace, une liste dynamique de commandes et de raccourcis associés s’affiche. Vous pouvez également trouver une version PDF de tous les raccourcis clavier via le menu Aide > Raccourcis clavier PDF.
Si vous souhaitez voir les raccourcis en temps réel lorsque vous travaillez avec la souris, JetBrains propose l’extension Key Promoter X:
Cet outil pratique affiche les notifications de votre dernière action effectuée, ainsi que le raccourci clavier correspondant. Une fois que vous aurez appris et utilisé les raccourcis, vous pourrez supprimer progressivement cette extension et restituer ce précieux espace à votre écran.
Résumé
La pratique du débogage a parcouru un long chemin depuis ses humbles débuts ; elle englobe aujourd’hui un champ d’application bien plus vaste que ce que ses géniteurs auraient pu imaginer. Pour effectuer un travail minutieux lorsqu’il s’agit de réparer votre code PHP, vous devez utiliser un outil compétent. Il existe de nombreuses extensions et outils superbes parmi lesquels vous pouvez choisir, mais Xdebug est un gagnant incontestable.
Comme nous l’avons vu, Xdebug peut s’adapter aux gouts les plus éclectiques en matière d’éditeurs de code, et il est particulièrement efficace lorsqu’il est associé à PhpStorm. Cependant, quelle que soit votre configuration, il y aura souvent une version de Xdebug qui répondra à vos besoins. Dans l’ensemble, c’est un outil puissant, flexible et intuitif à utiliser.
Pensez-vous que Xdebug mérite ses louanges, ou y a-t-il un autre outil de débogage que vous préférez ? Faites-le nous savoir dans la section des commentaires ci-dessous !
Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.
Laisser un commentaire