Installation de XDebug sur VS Code – partie 2

Avant de commencer, assurez vous d’avoir bien suivi la partie 1!

C’est fait? Alors c’est parti! 🙂

On va devoir configurer notre IDE et notre navigateur Web pour qu’ils communiquent ensemble.

I. Configuration du navigateur

Il va simplement falloir installer une extension sur votre navigateur préféré. Je vous donne 2 extensions que j’ai testé mais il en existe une multitude.

Pour Firefox:

https://addons.mozilla.org/en-US/firefox/addon/xdebug-ext-quantum/?src=search

Pour Google Chrome:

https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc

Et c’est tout bon, votre navigateur est prêt!

II. Configuration de VS Code

Voilà la dernière étape de configuration, on va installer l’extension « PHP Debug » et la configurer pour pouvoir communiquer avec notre navigateur.

Installation de PHP Debug :

Allez dans le menu ‘Extensions de VS Code’ et installez PHP Debug

Rendez-vous ensuite dans l’onglet de debug puis cliquez sur « create a launch.json file »

Sélectionnez ensuite « PHP »:

Le fichier « launch.json » va être créé dans le dossier .vscode à la racine de votre projet. C’est lui qui contient la configuration nécessaire au débuggage.

III. Lancement du mode « debug »

Lancez votre serveur et accédez à celui-ci via votre navigateur.

Activez l’écoute pour XDebug via l’extension que vous avez installé précédemment:

Placez un point d’arrêt en cliquant juste à gauche du numéro de ligne puis lancez le mode de débug en cliquant sur « Listen for XDebug ».

Maintenant, vous n’avez plus qu’à faire en sorte de rentrer dans votre point d’arrêt et vous pourrez « débugger » votre code 🙂

Conclusion

Vous voilà enfin prêt à débugger votre code comme un pro, vous ne perdrez plus de temps à essayer de comprendre ce qui se passe à coup de var_dump() !