Installation de Xdebug, partie 2 : l’IDE

Maintenant que Xdebug est installé avec votre installation locale de PHP, il est temps de le connecter à l’IDE. Cela nous offre tous les avantages que Xdebug a à offrir.

C’est-à-dire qu’il nous permet de :

• définir des points d’arrêt,
• parcourir notre code,
• et surveiller les variables

Pendant tout ce temps, le programme s’exécute. Cela signifie que pendant le rendu d’une page, nous pouvons définir des points dans notre base de code où nous pouvons voir ce que le serveur fait avec notre code.

Donc, bien sûr, même si cela s’appelle le débogage pour supprimer les bogues, cela peut également donner un aperçu de la façon dont une application, un thème ou un plugin basé sur WordPress s’exécute et peut nous aider à mieux comprendre le cœur de WordPress.

Installation de Xdebug dans Visual Studio Code

À ce stade, l’environnement suivant doit être configuré sur votre ordinateur local :

• Valet (qui inclut Nginx et MySQL et les outils associés )
• WordPress
• Code Visual Studio
• XdebugName

Les tâches restantes pour tout ce qui précède impliquent de lier Xdebug à Visual Studio Code afin d’obtenir une représentation littérale de la performance de WordPress (et donc de notre travail), de ce qu’il fait, etc., chaque fois qu’il s’exécute dans le navigateur.

Cela dit, commençons.

1 Installation des extensions nécessaires

Tout d’abord, assurons-nous que l’extension de débogage PHP est installée dans Visual Studio Code. Dans le menu Extensions de la barre latérale de l’EDI, recherchez PHP Debug et vous devriez voir un écran comme celui-ci.

Si l’extension n’est pas déjà installée, continuez et installez-la. Vous devrez peut-être redémarrer Visual Studio Code pour que la nouvelle extension prenne effet.

À partir de là, il y a quelques paramètres de configuration supplémentaires que nous devons vérifier avant de tenter de déboguer un code.

2 Configurer Xdebug (encore plus !)

Rappel du post précédent, nous avions besoin d’inclure Xdebug dans notre fichier php.ini. Plus précisément, nous avons dû ajouter la ligne de code suivante pour activer Xdebug :

zend_extension="/usr/local/lib/php/pecl/20160303/xdebug.so"

Maintenant, nous devons faire un peu plus de travail.

1. il va falloir ajouter une ligne de configuration au fichier php.ini référencé dans le dernier post ,
2. nous devrons configurer un script de démonstration pour nous assurer qu’il existe une section Xdebug appropriée,
3. nous devrons configurer Visual Studio Code

Heureusement, tout ce qui précède sont des tâches relativement rapides. Tout d’abord, la ligne de configuration que vous souhaiterez ajouter à votre fichier est la suivante :

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Ensuite, configurez un script de démonstration et connectez-le avec Valet. Vous pouvez le faire facilement en créant un répertoire sur votre bureau, en créant quelque chose comme test.php, puis en ajoutant phpinfo(); au dossier.

Après cela, liez le répertoire et redémarrez Valet. Il m’est arrivé de nommer mon exemple de répertoire et de déposer un fichier test.php dans le répertoire.

Si tout est configuré correctement, vous devriez pouvoir charger le fichier dans votre navigateur et voir quelque chose comme ceci :

Et maintenant, nous devons configurer Xdebug. Donc, en supposant que tout ce qui précède s’est bien passé et que les extensions sont correctement installées et en cours d’exécution, travailler avec Visual Studio Code devrait être facile.

Naturellement, nous aurons besoin d’un script de démonstration que nous pourrons tester. J’ai donc rédigé quelque chose de trivial, mais qui vous donnera une idée de ce à quoi vous attendre lors de la définition de points d’arrêt et de ce qui ne l’est pas.

<?php

// First, set a sample name.
$exampleName = 'alice';
echo $exampleName;

// Next, change the name and display it.
if ('alice' === $exampleName) {
    $exampleName = 'bob';
}
echo $exampleName;

Tournons maintenant notre attention vers l’IDE. Dans Visual Studio Code, cliquez sur l’ icône Debug qui se trouve juste au-dessus de l’ icône Extensions et juste en dessous de l’ icône Source Control.

Dans la barre latérale tout en haut, vous remarquerez qu’il y a un bouton de lecture. À côté de cela se trouve une liste déroulante. Il peut lire "Aucune configuration". Si tel est le cas, et je suppose que c’est le cas, vous devrez suivre certaines étapes très spécifiques pour vous assurer que le débogage fonctionne correctement.

1 Ouvrez le répertoire du script

Vous devrez vous assurer que vous êtes dans le répertoire du script dans Visual Studio Code.

Autrement dit, il ne suffit pas de s’assurer que vous avez juste un fichier ouvert. Visual Studio Code doit savoir à partir de quel répertoire vous travaillez (car il crée un répertoire .vscode caché dans le répertoire parent).

2 Créer la configuration de lancement

La configuration de lancement par défaut devrait fonctionner immédiatement, mais elle est basée sur l’étape précédente.

Une fois que vous avez ouvert un répertoire (dans mon cas, celui qui contient test.php) dans Visual Studio Code, lancez la palette de commandes (vous pouvez le faire via un raccourci qui varie d’un OS à l’autre ou en utilisant le menu Aide et puis choisissez Palette de commandes).

Une fois qu’il apparaît, entrez > launch.json, et il vous donnera la possibilité d’afficher le fichier launch.json. Hors de la boîte, cela devrait ressembler à ceci :

{
    // 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": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

À ce stade, le menu Déboguer devrait avoir quelque chose comme Lancer le script actuellement ouvert à côté de l’icône de lecture. Si ce n’est pas le cas, il vous donnera la possibilité de sélectionner quelque chose comme PHP (puisque l’extension est installée).

Si c’est le cas, sélectionnez cette option.

3 Définissez des points d’arrêt

Il est maintenant temps de voir le débogueur en action. À ce stade, lancez une fenêtre de navigateur avec votre script de test.

Le mien est simple :

Après cela, espérez dans votre IDE, puis cliquez sur le volet de gauche à gauche du numéro de ligne. Cela définira des points d’arrêt.

Voici un exemple :

Cliquez maintenant sur le bouton Lecture du débogueur. Immédiatement, vous devriez remarquer que la barre d’état devient orange et que certaines commandes de débogage (pour Continuer, Pas à pas, Pas à pas, Redémarrer et Arrêter). Ceux-ci ne nous intéressent pas pour le moment, car nous les examinerons plus en détail dans le prochain article.

Notez également que votre volet de gauche contient des informations sur les variables, les montres, etc. Si vous avez défini des points d’arrêt sur vos variables locales, vous remarquerez que $exampleName est mis en surbrillance mais probablement non initialisé.

Cliquez sur le bouton Lecture dans les nouveaux contrôles qui sont apparus, et il devrait s’exécuter jusqu’au prochain point d’arrêt.

La ligne sera maintenant mise en surbrillance et, dans le volet de débogage, le $exampleName recevra une valeur. Dans mon cas, c’est Alice.

Vous pouvez continuer à jouer avec cela autant que vous le souhaitez pour avoir une idée du fonctionnement du débogueur.

La prochaine fois, Screencasts

Le débogage est puissant, mais peut être intimidant à bien des égards. À partir du prochain article, je commencerai à partager quelques captures d’écran expliquant comment :

• fonctions et variables de débogage,
• modifier les valeurs à la volée,
• travailler avec la console de débogage,
• et plus.

Celles-ci prendront un peu plus de temps car ce seront des vidéos expliquant comment procéder, mais les avantages devraient être considérables.

Si vous n’avez pas encore eu l’occasion de découvrir tout le contenu de cette série, je vous le recommande vivement.

📣 Une note pour les avantages des membres

Attention cependant, avant le prochain post autour des screencasts et du prochain opus de cette série, j’ai quelques annonces à faire spécifiquement pour les membres du site qui incluent des remises sur les logiciels basés sur WordPress.

Je couvrirai plus à ce sujet la semaine prochaine.