Comment Xdebug peut vous aider à devenir un meilleur développeur WordPress

Comme tout développeur peut en témoigner, le code n'est jamais prêt pour la production après le premier brouillon. Un élément clé 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 d'éradiquer et de détruire tous les bogues de votre code.

L'un des grands aspects de Xdebug est sa flexibilité. Quel que soit votre framework ou votre environnement de développement préféré, vous pourrez trouver une version de Xdebug qui s'intègre dans votre flux de travail. À partir de là, maîtriser l'outil ne prendra pas longtemps.

Ce didacticiel examinera Xdebug en profondeur, y compris le processus d'installation, son intégration dans votre configuration et son utilisation générale.

Tout d'abord, donnons 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 de votre choix, et il agit comme un "débogueur d'étape".

En bref, cela vous permet de travailler sur votre code ligne par ligne afin que vous puissiez parcourir et regarder comment le code agit et interagit dans votre programme, ainsi que d'étudier sa sortie. À partir de là, vous pouvez apporter des modifications comme bon vous semble.

Xdebug peut cependant faire bien plus :

• Vous pouvez analyser les performances de votre code à l'aide d'un ensemble de métriques et de visualisations.
• Lorsque vous exécutez des tests unitaires PHP, vous pouvez voir quelles suites de code vous exécutez et exécutez.
• Xdebug inclut des capacités de "traçage", qui écriront chaque appel de fonction sur le disque. Cela inclura les arguments, les affectations de variables et les valeurs de retour.
• Xdebug apporte également des améliorations au rapport d'erreur PHP standard. Nous en parlerons plus tard.

Compte tenu de l'ensemble de fonctionnalités, il existe de nombreuses façons d'utiliser Xdebug (et tout débogueur similaire) dans votre flux de travail. Nous les couvrirons dans la section suivante.

Pourquoi voudriez-vous utiliser Xdebug

De nombreux développeurs n'auront pas de flux de travail de débogage dédié qui utilise des outils et des extensions tiers. En effet, PHP inclut sa propre journalisation des erreurs rudimentaire. Vous utiliserez des commandes telles que error_log , var_dump et print pour voir les résultats des appels de variables et de fonctions.

Par exemple, il existe de nombreux extraits que vous pouvez réutiliser pour le développement 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, il y a quelques inconvénients importants à cette approche :

• Vous devez d'abord vous assurer d'activer les journaux d'erreurs pour la plate-forme avec laquelle vous travaillez. Dans ce cas, vous voudrez activer WP_DEBUG (plus d'informations à ce sujet sous peu).
• 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 définissez.

Ce dernier point nécessite beaucoup d'efforts manuels, surtout si votre travail quotidien n'est pas en tant qu'administrateur système. Par exemple, si vous souhaitez déboguer un bloc de code, vous pouvez ajouter votre extrait en fonction d'une variable que vous définissez. Cependant, cela pourrait ne pas être la source du problème ou même indiquer ce qui se passe.

Au lieu de cela, un outil tel que Xdebug peut opérer sa magie pour offrir 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 et bien plus encore pour vous aider à déterminer ce que fait votre code et comment il réagit.
• Parfois, vous pouvez même modifier les valeurs à la volée pendant le processus de débogage. Cela offre une valeur immense, même pour les suites de code qui fonctionnent bien. Vous pouvez essentiellement effectuer des tests unitaires manuels à tout moment.
• Étant donné que vous utilisez des points d'arrêt pour marquer les zones à déboguer, vous n'avez pas besoin de travailler avec des extraits de code dans votre code. Cela permet de garder votre code plus propre et de réduire le nombre de problèmes futurs.

Dans l'ensemble, 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 dans le cadre 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 erreur spécifique, il est souvent bon de savoir si un problème survient sans que Xdebug soit ouvert. Cela vous donne un point de départ pour l'exploration. Ce n'est pas strictement nécessaire, mais cela peut être un élément utile de votre chaîne.

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 obtenir la même chose en utilisant la fonction ini_set :

 ini_set('error_reporting', E_ALL);

Cela vous permet de modifier les paramètres de votre fichier php.ini projet par projet. Bien que vous puissiez accéder à 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 vous avez configuré le rapport d'erreurs actif à 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 dont vous aurez besoin 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 démarrer rapidement.

Cependant, vous devez d'abord installer Xdebug. Découvrons comment faire.

1. Installez Xdebug pour votre système d'exploitation (OS)

Parce que Xdebug est adaptable à n'importe quel nombre de configurations, le processus exact pour chacune sera légèrement différent. Au niveau du système d'exploitation, il existe 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 packages 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 aurez également besoin d'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 niveau système de Xdebug. Au lieu de cela, vous voudrez l'intégrer dans votre propre environnement de développement.

2. Intégrez 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 y a tellement de systèmes et d'outils pris en charge ici que nous ne pouvons pas tous les aborder. Plus tard, nous vous proposerons des instructions pour DevKinsta et PhpStorm. Même ainsi, il existe de nombreux autres environnements populaires parmi lesquels choisir. Vous trouverez ci-dessous certaines de nos principales recommandations.

Vagrants vagabonds variables (VVV)

VVV est l'un des environnements nommés sur le site Web 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 Terminal :

 vagrant ssh -c "switch_php_debugmod xdebug"

Cependant, les performances sont légèrement affectées et vous devrez réactiver cette option si vous provisionnez vos sites.

Voiturier 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 ce faire, vous devrez créer un fichier de configuration pour le débogueur. Vous pouvez trouver votre propre chemin en utilisant php --ini sur la ligne de commande, qui renverra quelques chemins de fichiers différents :

Ensuite, créez un nouveau fichier xdebug.ini dans le chemin des fichiers .ini supplémentaires. Dans notre exemple, c'est dans /opt/homebrew/etc/php/7.4/conf.d .

Une fois que vous avez ouvert ce nouveau fichier, ouvrez également le chemin vers le fichier de configuration chargé (votre fichier php.ini principal). Avec les deux ouverts, ajoutez ce qui suit en bas :

• php.ini : zend_extension="xdebug.so"
• xdebug.ini : xdebug.mode=debug

Une fois que vous avez enregistré vos modifications, exécutez le valet restart depuis le terminal, puis ajoutez phpinfo(); exit; phpinfo(); exit; à l'un des fichiers de votre site. Vous voudrez vérifier si cela fonctionne grâce à un chargement rapide de la page dans le navigateur.

Notez que vous devrez peut-être redémarrer PHP à l'aide de sudo brew services restart php et vérifier que votre installation système de Xdebug est correcte à l'aide php --info | grep xdebug 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 codage de votre choix.

XAMPP

Tout comme Valet, il y a quelques parties dans le processus pour XAMPP. Cependant, les versions Windows et macOS ont deux processus différents.

Commencez par installer XAMPP, puis exécutez une vérification rapide pour voir si le fichier php_xdebug.dll (Windows) ou le fichier 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 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 vers 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 = Off

Dans la section [XDebug] , ajoutez les trois lignes suivantes :

 zend_extension=xdebug xdebug.mode=debug xdebug.start_with_request=trigger

Une fois vos modifications enregistrées, redémarrez Apache et testez Xdebug.

Pour Mac, vous devez vous assurer d'installer les outils de ligne de commande Xcode à l'aide xcode-select --install sur une instance Terminal. Après cela, il y a trois packages que vous voudrez installer en utilisant Homebrew :

 brew install autoconf automake libtool

Dans certains cas, vous devrez également réinstaller XAMPP pour obtenir à la fois le programme principal et les « fichiers de développement ». Vous devriez pouvoir réinstaller uniquement ces fichiers, mais vous devrez d'abord effectuer une sauvegarde de votre configuration existante.

Ensuite, accédez au téléchargement du dossier source Xdebug sur votre système et décompressez le fichier TGZ. Dans une fenêtre de terminal, accédez à ce répertoire et exécutez la commande suivante :

 phpize pecl install xdebug

Notez que vous devrez peut-être utiliser sudo ici aussi. À partir de là, vous pouvez modifier le fichier XAMPP php.ini. 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 de l'espace réservé au chemin du fichier pour cet extrait :

 [xdebug] zend_extension=/path/to/xdebug.so xdebug.mode=develop,degug xdebug.start_with_request=yes

Pour tester si cela fonctionne, créez un nouveau fichier xdebug_info.php dans le répertoire principal htdocs XAMPP. À l'intérieur, ajoutez ce qui suit :

 <?php xdebug_info();

… puis actualisez Apache et testez Xdebug dans le navigateur.

Utilisation de PhpStorm avec Xdebug

Une fois que vous avez installé Xdebug via le système d'exploitation et votre environnement de développement, vous devez également afficher le débogueur lui-même. Vous le ferez via l'éditeur de code ou l'environnement de développement intégré (IDE) de votre choix. Comme pour votre environnement, il y a tellement de choix, 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 compatible avec WordPress" - et c'est aussi un choix populaire pour de nombreuses autres raisons.

Le site Web JetBrains comprend des instructions complètes sur la connexion de Xdebug et PhpStorm, mais nous les passerons en revue ici.

Tout d'abord, accédez à la page Languages ​​& Frameworks > PHP dans le volet Préférences . Ici, ouvrez le menu More Items kebab à côté du champ déroulant CLI Interpreter :

Cela montrera quelques détails supplémentaires sur votre version et votre interpréteur PHP. Si vous cliquez sur les points de suspension Plus d'éléments à côté de l'option Fichier de configuration , vous verrez les chemins complets de votre fichier php.ini :

Vous travaillerez ensuite avec ce fichier PHP pour continuer le processus d'installation.

Travailler dans le fichier php.ini

La première tâche ici consiste à éditer toutes les lignes qui ont un impact sur le fonctionnement de Xdebug avec PhpStorm.

Dans le fichier php.ini , recherchez les lignes suivantes et supprimez-les ou mettez-les en commentaire :

 zend_extension=<path_to_zend_debugger> zend_extension=<path_to_zend_optimizer>

Ces lignes ne seront pas présentes dans tous les cas, alors 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 points à 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_extension peut nécessiter que vous ajoutiez le chemin complet de xdebug.so pour vous connecter.
• Bien qu'il puisse ressembler à un espace réservé, le paramètre xdebug.client_port est la façon dont vous le définirez dans votre code.

Une fois que vous les avez ajoutés, enregistrez et fermez le fichier, puis testez la version PHP à partir de la ligne de commande (en utilisant php --version ):

Si vous avez une version fonctionnelle de Xdebug, elle apparaîtra comme l'une des extensions PHP. Vous pouvez également ajouter phpinfo(); dans un nouveau fichier et testez-le 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 consiste à installer une extension d'aide au navigateur.

Installation d'une extension d'aide au navigateur

La dernière connexion clé que vous devrez établir est entre votre navigateur et PhpStorm, accomplie en activant le débogage par étapes sur le serveur. Bien que vous puissiez le faire à partir de la ligne de commande en utilisant des valeurs GET ou POST spéciales, il est plus simple d'utiliser une extension.

Nous vous recommandons d'utiliser l'extension Xdebug Helper dédiée. Vous pouvez l'installer sur le navigateur de votre choix :

• Assistant Xdebug pour Chrome/Chromium/Brave
• Assistant Xdebug pour Firefox
• Assistant Xdebug pour Safari

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 que vous avez choisie, vous ne devriez plus avoir à régler d'autres paramètres de configuration. À partir de là, vous pouvez commencer à utiliser Xdebug avec PhpStorm.

Utiliser Xdebug

Bien que nous utilisions PhpStorm ici, vous verrez une disposition et une interface similaires entre différents IDE, bien qu'il y ait également des différences évidentes.

Il existe quelques concepts qui se combinent pour former l'ensemble de l'expérience de débogage :

• Points d'arrêt : 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 option, bien que la plupart des développeurs la laissent toujours activée.
• L'écran de débogage : la majorité de votre temps sera passée dans l'interface de débogage - c'est là que vous travaillerez avec les différentes lignes de code, les variables et les paramètres.

La première étape consiste à activer l'écoute - vous ne pourrez rien déboguer sans elle. Pour cela, cliquez sur l'option Run > Start Listening for PHP Debug Connections 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 d'arrêt dans les gouttières de l'éditeur de code. Un point rouge indique un point d'arrêt, sur lequel vous pouvez cliquer pour l'activer :

Lorsque vous souhaitez déboguer votre code, le moyen le plus simple consiste à commencer à écouter, à définir des points d'arrêt, puis à accéder à la page spécifique de votre navigateur. Localisez l'icône de votre extension dans le navigateur, puis cliquez dessus et sélectionnez l'option "Debug":

Cela ouvrira le débogueur dans PhpStorm et fournira 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 pouvez définir différentes valeurs pour les variables le long du chemin. Cela peut être une tentative délibérée de casser votre code et de voir ce qui se passe, ou cela peut être un moyen de tester du code qui a déjà besoin d'un correctif. 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. Ceux-ci activent un mode dans lequel vous commencerez à voir des messages d'erreur précédemment masqués sur tout votre site et 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 WP_DEBUG_LOG , ce qui vous permet de documenter les problèmes de votre site. Nous expliquons comment le configurer 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 l'associez à l'outil d'environnement local gratuit DevKinsta, vous aurez également 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 détecter les erreurs sur votre site pendant le développement et vous assurer qu'elles ne se retrouvent pas sur votre site en ligne. Ces modes sont également faciles à désactiver, ce qui est vital pour la sécurité du site et de l'utilisateur.

Tous les plans Kinsta sont également livrés avec l'outil Kinsta APM intégré, qui est notre outil de surveillance des performances conçu sur mesure pour les sites WordPress.

Feuille de triche de commande

Avant de conclure cet article, nous devons mentionner les raccourcis.

Comme beaucoup d'autres logiciels, il existe différentes 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 les scripts PHP.

Une fois que Xdebug est opérationnel, vous pouvez utiliser les commandes suivantes pour vous déplacer :

Bien que votre éditeur de code spécifique ait ses propres raccourcis dédiés, l'accent est mis ici sur PhpStorm. Jetez un œil à ce tableau de raccourcis clavier pour utiliser Xdebug avec PhpStorm :

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.

Cependant, si vous avez besoin d'un raccourci pour une tâche particulière, vous pouvez utiliser la commande PhpStorm Find Action :

Une fois 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 voulez un aperçu plus en temps réel des raccourcis lorsque vous travaillez avec la souris, JetBrains fournit le plug-in Key Promoter X :

Cet outil pratique affichera les notifications de votre dernière action effectuée, ainsi que son raccourci clavier associé. Une fois que vous avez appris et utilisé les raccourcis, vous pouvez supprimer progressivement ce plugin et restaurer ce précieux bien immobilier sur votre écran.

Sommaire

La pratique du débogage a parcouru un long chemin depuis ses modestes débuts ; il englobe maintenant une portée beaucoup plus large que ses ancêtres auraient pu l'imaginer. Pour effectuer un travail minutieux en matière de correction de votre code PHP, vous aurez besoin d'utiliser un outil compétent. Il existe de nombreuses extensions et outils superbes parmi lesquels choisir, mais Xdebug est un précurseur incontestable.

Comme nous l'avons vu, Xdebug peut s'adapter même aux goûts les plus éclectiques des éditeurs de code, et il est particulièrement intéressant lorsqu'il est associé à PhpStorm. Cependant, quelle que soit votre configuration, il y aura souvent une version de Xdebug adaptée à vos besoins. Dans l'ensemble, c'est un outil puissant, flexible et intuitif à utiliser.

Pensez-vous que Xdebug mérite ses éloges, ou y a-t-il un autre outil de débogage que vous préférez ? Faites-nous savoir dans la section commentaires ci-dessous!