Vous êtes ici

Accueil » Programmer » Mise en place d'un environnement de travail
28 Dec 2013

Débugger Drupal dans Eclipse avec XDebug

Vous avez 30 secondes ?
Répondez à notre sondage : Quelle priorité pour les tutoriaux Drupal-Addict ?
S'abonner au flux d'actualités
Rubrique: 
Technique
Difficultée: 
Facile
Précédement, nous avons installé Eclipse PDT ainsi que EGit dans Eclipse puis récupéré les sources de Drupal dans notre IDEinfo-icon. Maintenant, nous allons voir comment configurer XDebug (un débuggueur fournit avec WAMP) pour permettre le debug pas à pas de Drupal et de nos modules via Eclipse. L'avantage de cette technique est de se passer du classique module Devel pour nos développements en local. Pas besoin d'ajouter du code artificiel de debug dans nos modules (ni dsm, dpm et autres, ni print ou echo superflu dans le code). De plus "en temps réel", ligne par ligne, XDebug nous permettra d'inspecter le contenu de nos variables, d'exécuter nos modules jusqu'à un point d'arrêt et de bénéficier de tous les autres avantages d'un débuggueur moderne.

Ajouter un hébergeur virtuel dans WAMP pour nos projets

Parce que vous avez très certainement envie de pouvoir mettre vos sources où vous le souhaitez sur votre ordinateur et de ne pas mélanger votre workspace de travail au dossier www de WAMP, nous allons voir comment créer un second serveur virtuel (autre que localhost) via WAMP. Concrètement, nous allons ajouter une URL : debug.local qui pointera vers le dossier de votre choix - votre fameux workspace.
Pour ma part, je concentre toutes mes installations "spéciales dev" de Drupal dans mon workspace GIT : D:/Projets/Drupal/Git/workspace.
J'y ai là des dossiers nommés :
  • Drupal-6.x-DevPlatform,
  • Drupal-7.x-DevPlatform
  • Drupal-8.x-DevPlatform.
Lorsque je crée un module pour Drupal 8, j'en place les fichiers dans D:/Projets/Drupal/Git/workspace/Drupal-8.x-DevPlatform/modules et je l'ajoute en tant que nouveau projet PHP dans Eclipse. De ce fait, je peux travailler sur ces seuls fichiers, sans être encombré des fichiers de Drupal Core, et tout en pouvant continuer à développer mon module, le débugger et l'utiliser en même temps.
 
Pour créer notre nouveau serveur local virtuel, nous allons devoir éditer le fichier hosts de notre système d'exploitation :
  • Ouvrez le fichier hosts via un éditeur de texte simple : le bloc-note ou notepad++ par exemple.
    Ce fichier se situe à l'emplacement C:\Windows\system32\drivers\etc\hosts.
  • Ajoutez la ligne suivante à la fin du fichier :

127.0.0.1       debug.local

Cette ligne va indiquer à Windows -tout comme pour l'URL localhost- que l'URL debug.local est locale et pointe donc sur votre propre IP locale.
  • Editez le fichier httpd.conf.
    • Ouvrez votre bloc-note en mode administrateur : clic-droit -> "Executer en tant qu'administrateur".
    • Ouvrez le fichier http.conf dans le bloc-note.

      Il se situe à l'emplacement C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf (la version d'Apache est sûrement différente pour vous).

  • Recherchez la ligne suivante et décommentez-la en enlevant le symbole # en début de ligne.

#Include conf/extra/httpd-vhosts.conf

  • Editez de même le fichier httpd-vhosts.conf.
    Il se situe à l'emplacement C:\wamp\bin\apache\Apache2.4.4\conf\extra\httpd-vhosts.conf.
  • Ajoutez les lignes suivantes à la fin du fichier :
<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot "c:/wamp/www"
    ServerName localhost
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" common
</VirtualHost>
<VirtualHost *:80>
    DocumentRoot "D:/Projets/Drupal/Git"
    ServerName debug.local
    ServerAlias debug.local
    <directory "D:/Projets/Drupal/Git">
        Options Indexes FollowSymLinks
        AllowOverride all
        Order Allow,Deny
        Allow from all
    </directory>
</VirtualHost>
Le premier bloc va préserver votre localhost de sorte à ce que vous puissiez toujours accéder à votre DashBoard WAMP et à vos projets locaux dans WAMP.
Le second bloc va indiquer à Apache "où regarder" lorsque vous demanderez d'accéder à l'URL debug.local. Vous l'aurez compris, vous pouvez changer l'adresse du directory avec l'emplacement de votre propre espace de travail ! Enfin la fin du second bloc permet d'utiliser des fichiers .htaccess (et Drupal les aime !) sur ce domaine.
  • Redémarrez Apache en cliquant sur votre icône WAMP puis Restart All Services.
  • Ouvrez votre navigateur et rendez vous à l'adresse debug.local. Vous devriez désormais voir une page commençant par Index of / et listant les répertoires de votre dossier de travail.

Créer une configuration XDebug dans Eclipse

Ajouter un navigateur pour la visualisation de notre site

Lorsque nous commençerons l'exécution en debug de Drupal, nous aurons besoin d'un navigateur pour voir nos pages. Bien entendu, Eclipse dispose d'un navigateur intégré mais qui est... limité. Nous allons donc commencer par demander à Eclipse d'utiliser notre navigateur préféré, celui sur lequel nous avons déjà toutes nos habitudes et nos extensions.
  • Ouvrez la fenêtre de propriétés Eclipse : Windows -> Preferences.
  • Ouvrez l'onglet General -> Web Browser.
  • Cliquez sur l'option use external web browser.
  • Si votre navigateur préféré n'apparaît pas dans la liste, cliquez sur le bouton New.
  • Dans la fenêtre qui s'est ouverte, indiquez :
    • Name : le nom du navigateur choisi.
    • Location : l'emplacement de l'executable du navigateur.
  • Enfin, cliquez sur OK pour ajouter ce navigateur à la liste.
  • Validez en cliquant sur Apply.
Choisir son navigateur préféré.

Utiliser l'exécuteur PHP de WAMP comme lanceur

Nous allons désormais indiquer à Eclipse que nous disposons déjà d'un lanceur PHP pour exécuter nos fichiers PHP. Nous avons déjà installé WAMP lors de l'usage de Drupal en local et vous vous souvenez que son P signifie PHP ! Utilisons donc ce programme pour exécuter nos fichiers.
  • Dans la fenêtre des propriétés d'Eclipse : ouvrez l'onglet PHP -> PHP Executables.
  • Cliquez sur Add pour ajouter une nouvelle configuration.
    • Name : WAMP
    • Executable path : C:\wamp\bin\php\php5.4.12\php.exe, le chemin vers l'executable PHP de WAMP.
    • PHP ini file : C:\wamp\bin\php\php5.4.12\php.ini, le chemin vers le fichier de configuration PHP de WAMP.
    • SAPI Type : CLI.
    • PHP debugger : XDebug.
  • Cliquez sur Finish pour ajouter cette configuration.
  • Cliquez sur Apply.
?
Utiliser l'exécuteur PHP de WAMP comme lanceur

Configurer PHP debug pour XDebug

Maintenant que nous avons indiqué à Eclipse quel lanceur PHP utiliser pour lancer Drupal, nous allons créer une configuration permettant le debug avec XDebug. Le but est non seulement de pouvoir utiliser Drupal en local dans notre navigateur, comme habituellement, mais -en plus- de pouvoir placer un "point d'arrêt" à n'importe quel moment dans le code. Lorsque nous arriverons, via la navigation, à cette portion de code, l'exécution s'arrêtera et vous permettra d'observer la valeur de chaque variable à ce moment là du code. Vous pourrez alors continuer l'exécution ligne par ligne, observant le comportement de votre code et de vos variables à chaques étapes de l'exécution.
  • Dans la fenêtre des préférences, rendez vous dans PHP -> Debug.
  • Remplissez les "Default Settings" ainsi :
    • PHP Debugger : XDebug. C'est le nom du débuggeur à utiliser.
    • Server : Default PHP Web Server.
    • PHP Executable : WAMP ou le nom que vous avez choisi à l'étape précédente pour votre lanceur PHP.
  • N'oubliez pas de décocher l'option Break at First Line. Celà vous permettra d'utiliser votre site normalement jusqu'au premier point d'arrêt que vous aurez défini.
  • Cliquez sur OK.
Configurer PHP debug pour XDebug.

Créer une configuration de lancement pour le Debug pour notre projet Drupal 8

Tout est désormais bien configuré. Il nous faut maintenant un bouton pour lier tout ce que nous avons préparé : lancer en local depuis Eclipse le site Drupal 8 que nous avions checkouté (récupéré) via GIT pour un usage directement dans notre navigateur en utilisant WAMP et les outils de debug PHP offerts par XDebug !
  • Ouvrez la fenêtre des configurations de lanceurs : cliquez sur Run -> Run Configurations...
?
Ouvrir la fenêtre des configurations de lanceurs
  • Effectuez un clic-droit sur l'option PHP Web Application puis cliquez sur New.
  • Nommez le lanceur avec un nom explicite de votre choix. Par exemple : Drupal8-DevPlatform.
  • Choisissez le serveur PHP à utiliser. Nous garderons ici l'option Default PHP Web Server. Cliquez sur le bouton Configure :
    • Changer l'option Base URL : http://debug.local, nous utiliserons le serveur local virtuel créé précédement.
    • Cliquez sur OK.
  • Indiquez le point d'entrée de votre projet PHP en cliquant sur Browse. Le point d'entrée de Drupal -comme pour tout les sites web classiques- est le fichier index.php.
Créer une configuration de lancement pour le Debug pour notre projet Drupal 8 (étape 1).
  • Passez à l'onglet Debugger de cette configuration.
  • Vérifiez que le Server Debugger XDebug est bien sélectionné.
  • Cliquez sur Apply.
  • Cliquez sur Close.
Choisir le server de débug dans notre configuration.

Lancement de notre projet PHP depuis Eclipse.

Lancement en exécution classique

Pour lancer l'exécution classique de notre projet PHP :
  • Cliquez sur la petite flèche à droite de l'icone verte en forme de "play".
  • Cliquez sur la configuration de lancement de votre choix.
Lancer Drupal en mode d'exécution depuis Eclipse.

Lancement en mode debug

Pour lancer l'exécution en mode debug de notre projet PHP :
  • Cliquez sur la petite flèche à droite de l'icone verte en forme d'insecte.
  • Cliquez sur la configuration de lancement de votre choix.
?
Lancer Drupal en mode debug depuis Eclipse.
Lors du premier lancement de votre configuration, celle-ci n'apparaît pas dans la liste du menu de la "petite flèche". Pour ce premier lancement, il vous faudra alors ouvrir la fenêtre des configurations de lanceurs, soit Run Configurations... ou Debug Configurations... dans le menu. Sélectionnez la configuration souhaitée puis cliquez sur Run.
Drupal se lance bien en mode Debug mais ne s'arrête pas aux points d'arrêts. Dans ce cas :
  • Editez le fichier wamp\bin\apache\Apache2.4.4\bin\php.ini (voir procédure dans l'article Configurer WAMP).
  • Trouvez la ligne : xdebug.remote_enable=off
  • Remplacez là par : xdebug.remote_enable=on
 
Notre projet Drupal 8 est désormais utilisable directement depuis Eclipse via notre navigateur préféré, aussi bien en utilisation classique qu'en debug ligne par ligne.
 
Lancez une première fois via Eclipse cette nouvelle plateforme de développement Drupal 8 que nous avons crée et installez ce site Drupal comme nous le faisons classiquement. Il sera ainsi prêt à être utilisé pour développer votre premier module Drupal.
Notation: 
Average: 5 (5 votes)
Vous avez aimé: 
Faites un don !

Commentaires

Encore pire, j'ai une ereeur "403" 
Forbidden

You don't have permission to access /app_dev.php/fr/ on this server.

Comme indiqué dans ce cours, voici ma configuration dans le fichier C:\wamp\bin\apache\apache2.4.9\conf\extra\httpd-vhosts.conf :
 
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:\wamp\www\Symfony\web"
    DirectoryIndex app_dev.php
    ServerName localhost
    ServerAlias localhost
    ErrorLog "logs/dummy-host.example.com-error.log"
    CustomLog "logs/dummy-host.example.com-access.log" common
</VirtualHost>
 
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:\Projets\Symfony2\Sf2Text1\web"
    DirectoryIndex app_dev.php
    ServerName monSite.local
    ServerAlias monSite.local
    ErrorLog "logs/dummy-host.example.com-error.log"
    CustomLog "logs/dummy-host.example.com-access.log" common
</VirtualHost>
This post is useful!
This post is useless!

C'est pareil.
En fait, quand j'essaie d'accéder à cet Url http://monSite.local/app_dev.php/fr correspondante à cette configuration :
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:\Projets\Symfony2\Sf2Text1\web"
    DirectoryIndex app_dev.php
    ServerName monSite.local
    ServerAlias monSite.local
    ErrorLog "logs/dummy-host.example.com-error.log"
    CustomLog "logs/dummy-host.example.com-access.log" common
</VirtualHost>
 
J'ai cette erreur : 
Forbidden

You don't have permission to access /app_dev.php/fr on this server.

 
This post is useful!
This post is useless!
Portrait de Guillaume C

Guillaume C (non vérifié)

Bonjour,
 
j'ai un problème au niveau de l'ajout d'un hebergeur virtuel, 
je travail sous OS X Yosemite donc j'utilise MAMP. 
J'ai bien pu editer le fichier hosts que j'ai trouvé a l'adresse /private/etc/hosts.
Voila ce qu'il contient 
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1    localhost
255.255.255.255    broadcasthost
::1             localhost
127.0.0.1       acquia-drupal-7-32-38-6183.local
127.0.0.1       debug.local
 
 
Ensuite j'ai bien trouvé le fichier httpd.conf et j'ai decommenté la ligne 
# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
 
Donc pour l'instant tout vas bien. 
 
J'ai par la suite edité le fichier httpd-vhosts.conf    
en apportant quelque petite modification pour l'adapter a MAMP et OSX, voila ce que j'ai ajouté a la fin du fichier. 
 
<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot "/Applications/MAMP/htdocs"
    ServerName localhost
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" common
</VirtualHost>
<VirtualHost *:80>
    DocumentRoot "/Users/GuillaumeC/Documents/IDE/EGit"
    ServerName debug.local
    ServerAlias debug.local
    <directory "/Users/GuillaumeC/Documents/IDE/EGit">
        Options Indexes FollowSymLinks
        AllowOverride all
        Order Allow,Deny
        Allow from all
    </directory>
</VirtualHost>
 
Et le resultat apres un restart d'apache a l'addresse http://debug.local c'est une page blanche avec ecrit "It works!" au lieu d'avoir un "Index of/" avec une liste des documents et fichiers present dans le repertoire Users/GuillaumeC/Documents/IDE/EGit.
 
This post is useful!
This post is useless!
Portrait de Guillaume C

Guillaume C (non vérifié)

J'ai quitté MAMP, puis utilisé la commande suivante 
sudo apachectl restart; 
pour redemarrer apache, ensuite j'ai relancé MAMP
 
J'ai aussi vidé le cache de mon navigateur. 
Et redemarrer mon ordi
 
 
This post is useful!
This post is useless!
Portrait de Ralf

Ralf (non vérifié)

Bonjour, J'ai également un souci lorsque je run... J'ai soit un Forbidden 403 sur le port 80 (bindé par Wamp normalement) et une connexion échouée sur un autre port (exemple 8080, 8888, ...). Merci ;)
This post is useful!
This post is useless!

Bonjour,
 
J'ai eu le même problème, voici ma version de la section <Directory> du fichier httpd-vhosts.conf :
    <Directory "D:/Projets/Drupal/Git">
Options Indexes FollowSymLinks
Options All
AllowOverride All
        Require all granted
    </Directory>
 
Je profite de ce commentaire pour te féliciter Dominique pour ton travail. Impressionnant par la qualité et par le détail. Bravo !
1
This post is useful!
This post is useless!
PatOliv

Je vous remercie grandement pour votre don ! Vous contribuez ainsi à la survie de ce site et à m'encourager à continuer d'écrire. N'hésitez pas à vous créer un compte sur ce site.
Je me permet de vous glisser que je peux aussi vous accompagner dans la création de vos sites. Plus d'infos sur http://freelance-drupal.com
Bonne continuation et bonne lecture sur Drupal-Addict !
This post is useful!
This post is useless!