Formation PUB020 : WordPress, 2023 Travailler avec VS Code

50.10 Déboguer un programme PHP avec VS code


Si vous êtes sérieuses ou sérieux dans votre programmation, vous devez absolument vous servir d'un débogueur pour vous aider à cibler les problèmes pendant que vous programmez.

Installation

Pour installer le débogueur PHP dans VS Code avec AMPPS :

  • Assurez-vous que dans le fichier php.ini, l'extension Xdebug soit correctement activée et que xdebug.mode soit à debug. (voir la fiche Activer Xdebug sous AMPPS ou Installer Xdebug sur macOS Big Sur).
  • Dans VS Code, installez l'extension PHP Debug (menu Affichage / Extensions).

    PHP Debug

  • Redémarrez VS Code.
  • Rendez-vous dans le menu Exécuter / Ajouter une configuration. Ceci créera le fichier www/monprojet/.vscode/launch.json avec les configurations requises.

    Si vous travaillez avec Xdebug version 3, vous n'avez aucune modification à y apporter.

    PHP

    {
        // Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
        // Pointez pour afficher la description des attributs existants.
        // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [

           {
                "name": "Listen for Xdebug",
                "type": "php",
                "request": "launch",
                "port": 9003
            },
            {
                "name": "Launch currently open script",
                "type": "php",
                "request": "launch",
                "program": "${file}",
                "cwd": "${fileDirname}",
                "port": 0,
                "runtimeArgs": [
                    "-dxdebug.start_with_request=yes"
                ],
                "env": {
                    "XDEBUG_MODE": "debug,develop",
                    "XDEBUG_CONFIG": "client_port=${port}"
                }
           },
           {
                "name": "Launch Built-in web server",
                "type": "php",
                "request": "launch",
                "runtimeArgs": [
                    "-dxdebug.mode=debug",
                    "-dxdebug.start_with_request=yes",
                    "-S",
                    "localhost:0"
                ],
                "program": "",
                "cwd": "${workspaceRoot}",
                "port": 9003,
                "serverReadyAction": {
                    "pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",
                    "uriFormat": "http://localhost:%s",
                    "action": "openExternally"
                }
            }
        ]
    }

Utilisation

Dans VS Code, cliquez sur l'icône Exécuter et déboguer dans la zone de gauche. Ceci fera apparaître de nouvelles zones à l'écran.Exécuter et déboguer

Dans le haut de l'écran, cliquez sur la flèche verte puis sélectionnez Listen for Xdebug.

Listen for Xdebug

Dans votre code, mettez un point d'arrêt sur une ligne exécutable. Le point d'arrêt peut être ajouté en cliquant à gauche du numéro de ligne ou encore en cliquant sur une ligne puis en appuyant sur F9.

Un point rouge apparaîtra dans la marge.

Point d'arrêt

Rendez-vous dans le menu Exécuter / Démarrer le débogage ou appuyez sur F5 pour lancer le débogage.

Ouvrez un navigateur et entrez-y l'URL de la page Web que vous désirez déboguer afin de débuter l'exécution du code.

Lorsqu'une ligne qui contient un point d'arrêt sera atteinte, l'exécution s'arrêtera et la ligne apparaîtra en jaune dans VS Code.

Il est possible à ce moment de tirer profit du débogueur :

  • Exécuter les lignes une à une sans entrer dans le détail des fonctions appelées en cliquant sur l'icône avec une flèche courbée bleue ou en appuyant sur F10.

    Icônes en mode débogage

  • Exécuter les lignes une à une en entrant dans les fonctions appelées en cliquant sur l'icône avec une flèche bleue vers le bas ou en appuyant sur F11.
  • Exécuter sans arrêt toutes les lignes de la fonction jusqu'au retour au programme appelant en cliquant sur l'icône avec une flèche bleue vers le haut ou en appuyant sur Maj+F11.
  • Poursuivre l'exécution jusqu'au prochain point d'arrêt en cliquant sur l'icône avec un triangle bleu ou en appuyant sur F5.
  • Questionner une variable en pointant la souris sur son nom ou en consultant la zone VARIABLES.

    Variable dans débogueur

  • Évaluer une expression en l'inscrivant dans la zone ESPION.

    Espion

  • etc.

▼Publicité

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !
Soumettre