Quelque soit l'environnement de développement et la technologie employée, la recherche et la correction de bugs dans du code peut être longue et fastidieuse lorsque les bons outils ne sont pas installés sur le poste de travail.
Le CMS "Drupal 7" n'échappe pas à la règle et cet article va vous présenter des solutions, une spécifique à "Drupal 7"et deux plus globales au code PHP.
Information sur les blocks affichés dans la page
Lorsque l'on veut avoir des informations sur un block dans la page, soit on demande au navigateur d'afficher le code HTML de la page et on retrouve le code de la zone qui nous intéresse, soit on utilise un module qui affiche directement sur la page, dans une fenêtre modale, toutes les informations et plus encore.
Les modules à récupérer sont :
- devel_themer
URL : https://www.drupal.org/project/devel_themer - simplehtmldom
URL : https://www.drupal.org/project/simplehtmldom - Devel
URL : https://www.drupal.org/project/devel
Suite à l'activation de ces trois modules, une nouvelle case à cocher est présente en bas à gauche de toutes les pages, administration et contenu :
Lorsque la case est cochée, au survol de la souris sur les différents blocks de la page, une délimitation de couleur orange se dessine. Si l'on clique sur une zone, une fenêtre modale s’affiche :
Dans la copie d’écran ci-dessus, c’est le block "Navigation" qui a été sélectionné.
Dans la fenêtre modale affichée les informations intéressantes sont :
- Template called
Le template utilisé, ici "modules/block/block.tpl.php", mais suivant le block ou la zone sélectionnée on peut avoir non pas un template mais une fonction appelée. - Candidate template files
Le nom du fichier PHP qui serait appelé dans le cas de la personnalisation du block "Navigation".
Dans le cas d'une fonction, c'est le nom personnalisé qui sera affiché. - ... (Array, 25 elements)
En cliquant sur cette ligne, la fenêtre modale va s’agrandir pour afficher les objets de la page avec les valeurs de ses propriétés.
Dans le libellé "...(Array, xx elements)", "xx" est fonction du block sélectionné.
Avec ces modules il est possible d’avoir des informations permettant :
- La personnalisation d’un block / d'une fonction.
Pour cela il suffit de dupliquer le fichier du template utilisé et de le nommer comme attendu par "Drupal 7" et ensuite modifier le contenu de ce fichier. Dans le cas d’une fonction, c’est le nom de la nouvelle fonction personnalisée. - Connaître les objets utilisés dans le block.
Avec cette information il est possible de modifier ou d’utiliser dans le code PHP une propriété d’un objet.
Débugger le code PHP
Pour la recherche d’un bug, soit l’affichage de traces dans le navigateur suffit, soit il faut aller plus loin en ayant la possibilité d’exécuter le code "pas-à-pas".
Affichage de traces dans le navigateur Mozilla Firefox
Une solution assez simple pour la recherche d’un problème est de mettre des traces dans le code PHP pour affichage dans le navigateur.
Pour cela il faut intervenir dans les deux environnements, "Drupal 7" et le navigateur Mozilla Firefox, pour l’ajout de modules.
Module pour Mozilla Firefox
Dans le gestionnaire de modules de Mozilla Firefox, cherchez et installez les modules :
- Firebug
- DrupalForFirebug
Suite à cette installation, une nouvelle icône est affichée dans la barre d’outils de Mozilla Firefox :
En cliquant sur cette icône, une page à onglets s’affiche en bas de l’écran :
Il est possible de redimensionner la zone verticalement grâce à un splitter.
Dans cette partie de l’écran, sont affichées toutes les informations concernant la page, classées dans les onglets :
- Console
Les messages d’erreur / d’informations transmis par le serveur - HTML
Le code HTML de la page.
Lorsque l’on parcourt le code avec la souris, la zone correspondante est affichée en bleu dans la partie d’affichage de la page. - CSS
La définition des styles utilisés.
Il est possible de choisir le fichier CSS à afficher et de modifier la définition d‘un style. Les changements de définition sont visibles directement sur la page, par contre ils ne sont pas définitifs, un rafraîchissement de la page annule les modifications. - Script
Le code Javascript / JQuery utilisé dans la page.
Comme pour les feuilles de style, il est possible de choisir le fichier source à afficher.
Il est possible aussi de mettre des points d’arrêt pour le debuggage du code et de connaître la valeur des variables utilisées. - Drupal
Affiche les informations spécifiques aux sites générés par "Drupal".
Soit on visualise l’affichage des traces ajoutées dans le code PHP dans l’onglet "General", soit on utilise les autres onglets pour afficher les données prédéfinies
Nota : il est possible d’afficher la fenêtre de Firebug avec un clic-droit sur la partie de la page qui nous intéresse :
Dans la copie d’écran ci-dessus, le clic-droit a été fait sur le lien hypertexte.
Le code HTML affiché et sélectionné correspond à celui du lien hypertexte :
Module pour Drupal 7
Dans le gestionnaire de module de "Drupal 7", installez le module :
- drupalforfirebug
URL : https://www.drupal.org/project/drupalforfirebug
Une fois installé, il est possible de mettre les traces dans le code PHP.
Dans l’exemple ci-dessous, la trace a été ajoutée au fichier du template de block "modules/block/block.tpl.php".
Avec cette instruction dans le navigateur, Mozilla Firefox va afficher la valeur du troisième élément du tableau "$classes_array"
Comme le code est appelé plusieurs fois, la trace apparait plusieurs fois.
Exécution du code "pas-à-pas"
L’exécution du code "pas-à-pas" nécessite d’avoir un environnement de développement plus conséquent qu’un simple éditeur de texte, comme utilisé dans l’exemple d’ajout de trace dans le code PHP.
La suite de la présentation se fera avec l’outil Eclipse, disponible gratuitement dans sa version "PHP Development Tools (PDT)".
La configuration pour la debuggage se fait à différents endroits :
- Le serveur PHP
- Le navigateur Mozilla Firefox
- Eclipse
Configuration du serveur PHP
D’abord s’assurer que le module XDebug est activé.
L’affichage de la page "phpinfo.php" donne cette information :
Une fois validée l’activation du module XDebug, ouvrir le fichier php.ini et rechercher la chaîne de caractères "Xdebug".
L’éditeur de texte doit se positionner sur la définition de la section "[Xdebug]".
Mettre les valeurs ci-dessous, sauf pour :
- xdebug.remote_host : l’adresse devant correspond à votre environnement
- xdebug.profiler_output_dir : le chemin devant correspond à votre répertoire de logs
Configuration de Mozilla Firefox
Dans le gestionnaire de modules de Mozilla Firefox, cherchez et installez le module "The easiest Xdebug".
Suite à cette installation, une nouvelle icône est affichée dans la barre d’outils de Mozilla Firefox :
Configuration d’Eclipse pour Xdebug
Dans me menu Menu "Window" / "Preferences" :
- Sélectionnez l’item "PHP" / "Debug" / "Debuggers"
Assurez-vous qu’il y a une ligne XDebug dans le tableau de droite et que la configuration de XDebug correspond à la copie d'écran ci-dessous :
- Sélectionnez l’item "PHP" / "Debug"
Dans le champ "PHP server" sélectionnez le serveur par défaut.
Dans le champ PHP exécutable, sélectionnez celui qui correspond au serveur Apache utilisé (vous pouvez en avoir plusieurs et différents, mais un seul actif).
Utilisation du debugger
1. Mettre les points d’arrêt dans le code.
Via le menu contextuel du clic-droit ou le double-clic dans la marge gauche de la ligne souhaitée.
2. Lancer le mode "Debug"
Dans Mozilla Firefox cliquez sur la nouvelle icône :
Celle-ci change de couleur et semble se déplacer :
Pour que le debuggeur se mette en marche côté serveur, il faut accéder à une nouvelle page ou rafraîchir la page actuelle.
3. Mode "Debug" dans Eclipse
Lorsque la demande est prise en compte coté serveur, Eclipse passe en mode "Debug"
Et affiche une configuration particulière
Dans celle-ci il y a plusieurs panneaux :
- Celui affichant le code dans le fichier en cours d'utilisation
- Celui affichant la pile d’appel
- Celui affichant les variables du code en cours et leur valeur
Dans la barre d’outils, les actions de debug sont disponibles :
Tant que le premier bouton de cette barre est actif, le debug est en cours. Lorsqu’il devient grisé, le debuggage est terminé :
Et voilà !