Skip to content

HowTo xdebug

Jump to bottom
Ben edited this page Feb 27, 2017 · 73 revisions

L'installation de l'environnement de développement complet

Disclaimer : ❗ Cette configuration ne doit pas être exposée sur internet ❗
Elle pose des problèmes de sécurité évidents. On installe ici cette architecture dans une VM qui n'est accessible QUE depuis le système hôte

On va installer tout le nécessaire pour créer un projet PHP qui sera hébergé plus tard sur le nom de domaine http://www.example.com. Prenons ce nom de domaine "éducatif" pour illustrer notre HowTo :

  • c'est un domaine réservé à des démonstrations, qui ne peut pas être acheté
  • ce nom de domaine pointe vers un hébergement réel quelque part dans le monde
  • lorsque les crawlers visiteront ce howto, ils ne tomberont pas sur un domaine qui appartient à quelqu'un au hasard ; on ne participera pas au pagerank d'inconnus...

Sur notre machine locale, on va simuler le contrôle du domaine example.com , qui du point de vue de notre machine locale pointera vers notre VM. Pour tous les autres gens sur la planète, le domaine example.com pointera toujours vers l'hébergement réel du domaine.

Il est évident qu'il faut avoir suivi les HowTos dédiés pour construire la VM sur laquelle on va travailler : HowTo VirtualBox et HowTo LAMP.

Installation du paquet php5-xdebug dans la VM

Note : Les manipulations suivantes doivent être faites dans la VM

  • On installe simplement le module xdebug avec apt : 
    sudo aptitude install php5-xdebug

Quelques liens pour en savoir plus sur xdebug sont donnés dans ce paragraphe.

On a besoin de configurer le module pour permettre du débug à distance ; en effet, les sources php testées se trouvent physiquement dans la VM. Le serveur web apache de la VM va devoir communiquer avec notre éditeur de texte local pour permettre le pas à pas. Le principe est expliqué grossièrement dans ce paragraphe.

  • Il faut ajouter des lignes au fichier /etc/php5/apache2/conf.d/20-xdebug.ini , pour qu'il ressemble à ça :

    zend_extension=xdebug.so
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_connect_back=1    # Not safe for production servers
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=true    # Not safe for production servers
xdebug.idekey=xdebug.atom

  • Puis on redémarre apache pour qu'il charge php avec notre module xdebug configuré :

    sudo service apache2 restart

On pourrait examiner un phpinfo() pour retrouver les détails de la configuration de notre module xdebug Capture phpinfo avec xdebug

A ce stade on aboutit au stack logiciel suivant dans la VM : Stack logiciel LAMP xdebug

Le module xdebug envoie ses messages durant l'éxécution des scripts php, mais aucun service n'écoute à l'adresse définie. Le service sera "branché" dans le paragraphe "tout brancher ensemble, plus bas

Installation des outils locaux

On a choisi l'éditeur de texte Atom, qui est configurable et open source. Il n'est pas disponible dans les dépôts d'ubuntu, il faut le charger depuis le site de l'éditeur : https://atom.io/

Sur la machine locale, on va augmenter l'éditeur de texte, pour qu'il fournisse les fonctionnalités de base d'un IDE. Voir la définition d'un IDE sur wikipedia
Pour l'installation des plugins Atom, on va utiliser l'outil disponible dans Atom lui-même, accessible via le menu 'Edit' -> 'Préférences' , puis l'onglet 'Install' à gauche de la fenêtre 'Settings' qui s'est ouverte.

Nouveau dossier de projet

On va créer, sur la machine locale, le dossier qui accueillera nos sources php qui seront versionnées par git :

mkdir ~/project_example.com

Et on va "donner" ce dossier à Atom, en tant que dossier de projet ; dans Atom menu 'file' -> 'add project folder', puis choisissez le dossier project_example.com créé ci-dessus dans votre home

Plugin atom remote-sync

Ce plugin va se charger de la synchronisation des sources php entre notre copie locale (versionnée par git), et la copie "testée" qui est servie par le apache de la VM. Le principe est brièvement expliqué dans ce paragraphe

On l'installe via l'outil interne d'Atom, comme dans la capture ci-dessous : Installation plugin remote-sync dans Atom

Configuration

La configuration du module se fait par projet, le détail sera donné dans le paragraphe "tout brancher ensemble" plus bas.

Plugin atom php-debug

Ce plugin fournit l'interface serveur du procéde de remote debug.

On l'installe via l'outil interne d'Atom, comme dans la capture ci-dessous : Installation plugin php-debug dans Atom

Configuration

On configure ce plugin globalement, principalement en lui donnant :

  • le path map : on renseigne le plugin des chemins des sources php de part et d'autre. Autrement dit, on définit la correspondance entre :
    • le chemin des sources php sur la machine locale ; la copie des sources qui sera éditée dans Atom et qui sera versionnée avec git
    • le chemin des mêmes sources dans la VM ; la copie des sources qui sera éxécutée dans l'apache de la VM
  • le port et éventuellement l'adresse du serveur de debug ; le port 9000 est le port par défaut, on laisse comme ça. L'adresse est 127.0.0.1 (localhost) par défaut.

Un exemple de configuration est représenté par la capture ci-dessous : Réglage plugin atom php-debug

Création du VHOST dans le apache de la VM

Pour créer le nouveau VHOST dans le apache de la VM, on peut se reporter au HowTo dédié.

Ici, le nom de domaine sur lequel on va monter notre VHOST est example.com, et on va placer son DocumentRoot sur /var/www/example.com.
On aboutit au fichier /etc/apache2/sites-available/example.com.conf suivant :

<VirtualHost *:80>
        ServerName example.com
        ServerAlias www.example.com

        DocumentRoot /var/www/example.com

        ErrorLog ${APACHE_LOG_DIR}/example.com.error.log
        CustomLog ${APACHE_LOG_DIR}/example.com.access.log combined
</VirtualHost>

Ce fichier étant fourni, procédez à toutes les étapes décrites dans le HowTo dédié

Tout brancher ensemble

Enjoy :)

Home

Clone this wiki locally