Le blog

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
  

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à !