🐞 Deboguer facilement son code PHP avec Visual Studio Code et Chrome

Dernière mise à jour : 30 Jun 2024

Comment debuguer facilement son code Javascript et PHP avec Visual Studio Code et Chrome ?

Pour debuguer facilement votre code JavaScript et PHP avec Visual Studio Code et Chrome, vous pouvez suivre les étapes suivantes :

  1. Ouvrez votre projet dans Visual Studio Code et ouvrez le fichier JavaScript ou PHP que vous souhaitez debuguer.

  2. Cliquez sur l’icône “Run and Debug” dans la barre latérale de Visual Studio Code pour ouvrir le panneau de contrôle de débogage.

  3. Dans le panneau de contrôle de débogage, cliquez sur l’icône “Create a launch.json file” pour créer un fichier de configuration de débogage pour votre projet.

  4. Dans le fichier launch.json, ajoutez une configuration pour déboguer votre code JavaScript ou PHP. Par exemple, si vous souhaitez déboguer du code JavaScript avec Chrome, vous pouvez utiliser la configuration suivante :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

  1. Dans le fichier JavaScript ou PHP que vous souhaitez déboguer, ajoutez des points d’arrêt en cliquant à côté des lignes de code sur lesquelles vous souhaitez interrompre l’exécution.

  2. Cliquez sur le bouton “Start Debugging”

Comment debuguer du code PHP avec Visual Studio Code et Xdebug ?

Pour déboguer du code PHP avec Visual Studio Code et Xdebug, vous pouvez suivre ces étapes :

  1. Assurez-vous que PHP est installé sur votre ordinateur et que vous pouvez lancer des scripts PHP à partir de la ligne de commande.
  2. Installez Xdebug sur votre ordinateur en suivant les instructions de la page de téléchargement de Xdebug (https://xdebug.org/download.php).
  3. Dans Visual Studio Code, installez l’extension PHP Debug de Felix Becker en ouvrant la fenêtre “Extensions” (Ctrl + Maj + X), en recherchant “PHP Debug” et en cliquant sur “Installer”.
  4. Ouvrez le fichier PHP que vous souhaitez déboguer dans Visual Studio Code.
  5. Dans la barre latérale, cliquez sur l’icône “Déboguer” (le symbole de la lampe torche) pour ouvrir la fenêtre de débogage.
  6. Cliquez sur l’icône “Créer un point d’arrêt” (le symbole du cercle rouge) dans la colonne de gauche pour placer un point d’arrêt dans le code où vous souhaitez interrompre l’exécution.
  7. Cliquez sur le bouton “Démarrer le débogage” (le symbole du triangle vert) dans la barre d’outils en haut pour lancer le débogage.
  8. Exécutez le script PHP en utilisant la ligne de commande, en spécifiant Xdebug comme interpréteur PHP (par exemple, php -dxdebug.remote_enable=1 mon_script.php).
  9. Lorsque le script atteint un point d’arrêt, l’exécution s’arrête et vous pouvez inspecter les variables et les valeurs de la pile d’appels dans la fenêtre de débogage de Visual Studio Code.

Il est important de noter que la configuration de Xdebug peut être complexe, en particulier si vous utilisez un serveur web local (comme Apache ou Nginx) pour exécuter vos scripts PHP. Vous pouvez en savoir plus sur la configuration de Xdebug dans la documentation officielle de Xdebug (https://xdebug.org/docs/).

Exemple de fichier de configuration pour faire du debug PHP avec Xdebug et Visual Studio Code

Voici un exemple de fichier de configuration pour utiliser Xdebug avec Visual Studio Code :

xdebug.remote_enable=1
xdebug.remote_host=localhost
xdebug.remote_port=9000
xdebug.remote_autostart=1
xdebug.idekey=VSCODE

Ce fichier de configuration doit être ajouté au fichier php.ini de votre installation PHP. Il permet d’activer Xdebug en mode distant, en spécifiant l’hôte (localhost) et le port (9000) sur lesquels Xdebug écoutera les connexions entrantes. Le paramètre xdebug.remote_autostart permet d’activer automatiquement la mise en debug des scripts PHP lorsqu’une connexion est établie avec Xdebug.

Enfin, le paramètre xdebug.idekey permet de définir une clé d’IDE qui doit être utilisée par Visual Studio Code pour identifier les connexions entrantes. Cette clé doit être configurée dans les paramètres de Visual Studio Code pour que le débogage puisse fonctionner correctement.

Il est également recommandé d’ajouter les lignes suivantes à votre fichier de configuration pour activer la journalisation des erreurs et des informations de débogage :

xdebug.remote_log="/chemin/vers/xdebug.log"
xdebug.show_error_trace=1
xdebug.show_exception_trace=1
xdebug.collect_params=4

Cela permet d’avoir plus d’informations dans les fichiers de journalisation en cas d’erreur ou de problème lors du débogage. Vous pouvez ajuster les paramètres en fonction de vos besoins et de vos préférences.

Pour plus d’informations sur l’utilisation de Xdebug avec Visual Studio Code, consultez la documentation de Xdebug et de Visual Studio Code.

Exemple de fichier de configuration Visual Studio Code pour faire du debug PHP avec Xdebug

Voici un exemple de configuration pour utiliser Xdebug avec Visual Studio Code :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}/public"
            }
        }
    ]
}

Ce fichier de configuration doit être enregistré dans votre workspace Visual Studio Code sous le nom .vscode/launch.json. Il permet de configurer une configuration de débogage pour PHP en utilisant Xdebug.

Le paramètre type doit être défini sur php pour indiquer que la configuration concerne le débogage PHP. Le paramètre request doit être défini sur launch pour indiquer que la configuration concerne le lancement d’un débogage.

Le paramètre port doit correspondre au port sur lequel Xdebug écoute les connexions entrantes, tel qu’indiqué dans le fichier de configuration PHP (php.ini). Le paramètre pathMappings permet de configurer la correspondance entre les chemins d’accès utilisés dans le code source et les chemins d’accès réels sur le système de fichiers Cela permet à Visual Studio Code de localiser les fichiers de code source correctement lors du débogage.

Pour plus d’informations sur la configuration de Visual Studio Code pour le débogage PHP avec Xdebug, consultez la documentation de Visual Studio Code.