Rubrique:
Technique
Difficultée:
Facile
Sommaire
Précédement, nous avons installé Eclipse PDT ainsi que EGit dans Eclipse puis récupéré les sources de Drupal dans notre IDE
. 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>
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.
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.
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.
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...
- 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.
- Passez à l'onglet Debugger de cette configuration.
- Vérifiez que le Server Debugger XDebug est bien sélectionné.
- Cliquez sur Apply.
- Cliquez sur Close.
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.
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.
- Connectez-vous ou inscrivez-vous pour publier un commentaire
Commentaires
Re: Débugger Drupal dans Eclipse avec XDebug
Forbidden
You don't have permission to access /app_dev.php/fr/ on this server.
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>
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>
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
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>
You don't have permission to access /app_dev.php/fr on this server.
Re: Débugger Drupal dans Eclipse avec XDebug
# 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
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
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>
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug
Re: Débugger Drupal dans Eclipse avec XDebug