« The Stompers! »

    21:17 31 08 2009

J’étais en train de jouer avec mon fils et son super Quad spider-man à piles qui avance tout seul, quand tout à coup, un mot venu de mon enfance a surgit dans mon esprit, « stompers ».
Un coup de recherche Google et tout revient. Les courses avec mon frère, les combats en face à face, les versions étanches pour jouer dans la piscine…

Les stompers étaient des jouets à la mode aux US au début des années 80. Il s’agissait de mini 4×4 (10-15 cm) à grosse roues qui avançaient tout seuls grâce à des piles. Certains disposaient même de plusieurs vitesses!

Vraiment de bons souvenirs. Je me demande si cela a existé en Europe.

Quelqu’un qui s’en souvient?



Débugger avec WampServer, Xdebug et PDT

    17:30 28 08 2009

Pour la plupart des projets, l’utilisation de echo et de var_dump() suffit pde our debugger vos scripts. Le mode web est en « page à page », il est donc rare d’avoir des scripts de plusieurs milliers de lignes comme on pourrait en avoir avec les langages compilés. Il peut toutefois parfois être intéressant de faire du debuggage pas à pas et de pouvoir jouer avec les valeurs de vos variables. Je me propose donc de vous montrer comment configurer cela avec WampServer, l’extension XDebug et l’IDE PDT (Php Developpment Tool).
 
 
INSTALLATION DE XDEBUG AVEC WAMPSERVER

Commençons par installer l’extension XDebug. XDebug permet de faire trois choses :

- améliorer la gestion des erreurs de PHP (afficher plus d’informations lors d’erreurs PHP, optimisation de la présentation de var_dump());

- faire du profiling (à utiliser avec kcachegrind ou wincachegrind);

- debugger vos scripts.

Téléchargez l’extension sur le site de XDebug : http://www.xdebug.org

ATTENTION : pensez bien à télécharger la version qui correspond à la branche de PHP que vous utilisez (PHP 5.2 ou PHP5.3) et à prendre la version thread-safe.

A l’heure où j’écris ces lignes,
pour PHP 5.2 : http://www.xdebug.org/files/php_xdebug-2.0.5-5.2.dll
pour PHP 5.3 : http://www.xdebug.org/files/php_xdebug-2.0.5-5.3-vc6.dll

XDebug n’est pas un extension standard de PHP, nous n’allons donc pas la mettre dans le répertoire /ext/ de PHP afin d’éviter d’éventuels conflits avec le menu de WampServer. Je vous propose donc de la déposer dans le même répertoire que l’exécutable de PHP (php.exe), typiquement :

c:\wamp\bin\php\phpx.x.x\

Renommez l’extension en php_xdebug.dll, elle sera plus facile à manipuler.

Nous allons maintenant l’activer. Pour cela nous allons devoir ajouter des commandes dans le fichier php.ini. Dans WampServer, le fichier php.ini utilisé se trouve dans le même répertoire que le binaire d’Apache (apache.exe). Le plus simple pour l’ouvrir est de passer par le menu de WampServer.

WampServer

Allez à la fin du fichier et ajoutez les lignes suivantes :

zend_extension_ts="c:/wamp/bin/php/phpx.x.x/php_xdebug.dll"
xdebug.remote_enable=1
xdebug.remote_host="127.0.0.1"
xdebug.remote_port=9000
xdebug.remote_handler="dbgp"
xdebug.remote_mode=req

où x.x.x est votre version de PHP.

En complément, vous pouvez également ajouter

xdebug.profiler_enable = 1
xdebug.profiler_output_dir = "c:/wamp/tmp/"

afin d’activer les fonctions de profiling, ou encore

xdebug.collect_params = On
xdebug.show_local_vars = On

afin d ‘améliorer les informations fournies lors de l’affichage des messages d’erreur.

Une fois ces lignes ajoutées, refermez le fichier php.ini et redémarrez votre service Apache, XDebug devrait maintenant être chargé.

Pour le vérifier, affichez votre phpinfo(). Vous devriez voir apparaître l’information ci-dessous :

phpinfo

Si ce n’est pas le cas, vous avez certainement fait une erreur dans le chemin d’accès au fichier php_xdebug.dll

A ce stade, vous pouvez dors et déjà profiter des fonctions d’amélioration des messages d’erreur de XDebug. Pour cela, essayez d’afficher un message d’erreur et un var_dump().
 
 
CONFIGURATION DE PDT AVEC XDEBUG

Nous allons maintenant configurer PDT pour qu’il utilise les fonctionnalités de debuggeur de XDebug.

Si ce n’est pas déjà fait, commencez par télécharger et installer PDT : http://www.eclipse.org/pdt/

Lors du lancement de PDT, choisissez « c:\wamp\www » comme WorkSpace.

Dans le menu du haut, choisissez window -> preferences.

preferences eclipse

Rentrez maintenant dans le menu « PHP » et cliquez sur « debug ».

debug eclipse

Il existe deux façons de debugger du PHP avec PDT. La première (server) passe par votre serveur web en faisant un appel à localhost. La deuxième (PHP executable) fait un appel direct à l’exécutable de PHP.
Nous allons travailler avec la première solution qui nous offre plus de fonctionnalités et permet, notamment, d’utiliser les méthodes GET et POST.

Par défaut, PDT est livré avec des configurations type pour fonctionner avec XDebug et Zend Debugger. Comme le montre la capture d’écran ci-dessus, choisissez XDebug.

Si votre serveur n’est pas local (localhost), il faudra également modifier la configuration de votre serveur identifié sous PDT par « Default PHP Web Server« .

Voilà, la configuration de base de PDT est terminée, nous allons maintenant pouvoir utiliser PDT pour debugger en mode pas à pas et avec des points d’arrêt.
 
 
UTILISATION DE PDT COMME DEBUGGEUR

Voyons maintenant comment utiliser tout cela. La première chose à faire est de créer un nouveau projet PHP au sein de PDT. Pour cela cliquez sur file -> new -> PHP Project.

Donnez un nom à votre projet (dans la suite de cet article, notre projet s’appellera « test_debug »).
Un répertoire du même nom va être automatiquement créé dans votre répertoire « www ». Vous allez placer ou créer vos scripts PHP dans ce répertoire. Si nécessaire, appuyez sur F5 dans PDT pour que vos scripts apparaissent.

projet eclipse

Ouvrez votre script PHP en double cliquant dessus. Votre code source devrait apparaître dans la fenêtre centrale de PDT.

Nous allons maintenant passer en mode debuggage. Cliquez sur l’icône en forme d’insecte sur la barre d’outil et choisissez Debug As -> PHP Web Page.

eclipse debug as

Cela devrait ouvrir une fenêtre de votre navigateur par défaut (Firefox par exemple) et vous faire basculer sur une perspective de debuggage dans PDT (vous pouvez retrouver les perspectives en haut à droite de PDT).

eclipse perspective debug

Cette perspective est découpée en 5 fenêtres :

- en haut à gauche, une fenêtre de « debug » qui vous donne des informations sur le debuggage en cours et dispose de la barre d’outils de debuggage.

- à droite de cette fenêtre, une autre qui vous donne accès aux variables de votre script et aux points d’arrêt définis.

- en dessous, une fenêtre qui présente votre code, vous montre la ligne courante et permet de définir/annuler des points d’arrêt

- encore en dessous, la fenêtre de console.

- et enfin, à droite, la fenêtre d’Output.

Pour debugger, utilisez la barre d’outils de la fenêtre « debug ».

barre outil debug

Vous pouvez également ajouter des points d’arrêt dans votre code. Pour cela double-cliquez sur la barre grise se trouvant à gauche de votre code (idem pour retirer les points d’arrêt). Des petites boules vont apparaitre pour signaler ces points d’arrêt.

point arret

Au fur et à mesure que vous allez avancer dans le debuggage de votre page, vous pourrez voir le résultat s’afficher directement dans votre navigateur.
 
 
MODIFIER LES VARIABLES EN COURS DE DEBUGGAGE

Il va souvent être utile de modifier le contenu de vos variables en cours de debuggage. Pour cela sélectionnez la variable souhaitée dans la fenêtre d’affichage des variables et modifiez simplement sa valeur.
 
 
TRAVAILLER AVEC GET ET POST

En utilisant PDT avec XDebug, j’ai rapidement eu besoin de jouer avec les tableaux $_GET et $_POST. Malheureusement, je n’ai rien trouvé à ce sujet dans la doc ou dans Google. J’ai toutefois persisté et ai trouvé une astuce pour pouvoir m’en servir.

Commençons par $_GET. Pour le remplir, faites tourner le débuggeur sur votre script et allez jusqu’au bout de votre script. Allez ensuite dans la fenêtre de navigateur ouverte par le debuggeur. Vous devriez vous retrouver avec une barre d’URL de ce type :

url debug

Ajouter les variables que vous souhaitez dans cette url et relancez la page. Retournez maintenant dans PDT, et, magique…la session de debuggage est relancée et les variables sont maintenant disponibles sous $_GET.

Pour $_POST, lancez un debuggage sur le formulaire permettant de faire votre POST et allez au bout du script. Allez dans la fenêtre de navigateur, votre formulaire sera affiché. Remplissez le et validez le. Retournez dans PDT, vous devriez maintenant avoir une session de debuggage sur le script de réception du formulaire.

Il existe certainement d’autres méthodes plus simples pour utiliser nativement $_GET et $_POST avec PDT et XDebug, si vous les connaissez, n’hésitez pas à ajouter votre commentaire à cet article.

De mon côté, j’ai trouvé une autre solution plus efficace et plus pratique pour gérer mes sessions de debuggage, l’utilisation de l’extension XDebug Helper pour Firefox.
 
 
UTILISATION DE L’EXTENSION XDEBUG HELPER POUR FIREFOX

L’extension XDebug Helper pour Firefox va vous permettre de lancer vos sessions de debuggage directement depuis Firefox.

Commencez par installer l’extension que vous pourrez trouver ici :

https://addons.mozilla.org/fr/firefox/addon/3960

Cela va ajouter deux icônes en bas à droite de Firefox.

boutons xdebug

Le premier bouton va vous permettre de lancer des sessions de debuggage. Pour cela, il va falloir configurer PDT pour qu’il accepte le lancement externe de sessions de debuggage. Retourner donc dans la configuration de PDT :

Window -> preferences
puis PHP -> debug -> Installed Debuggers

installed debuggers

Sélectionnez « XDebug » et cliquez sur « configure« .
Dans le menu déroulant « Accept remote session (JIT) » sélectionnez « localhost » (ou « any » si votre serveur est distant).
Vous allez maintenant pouvoir lancer vos sessions directement depuis Firefox.

Pour cela, cliquez sur le bouton de XDebug Helper qui ressemble à une croix dans Firefox (en bas à droite). Celui-ci devrait devenir vert et jaune.

debug actif

Tapez l’URL du script que vous souhaitez debugger(ex : http://localhost/….) et lancez son execution. Retournez dans PDT, votre session de debugage devrait être lancée.
 
 
CONCLUSION

J’espère que ce petit tutoriel vous permettra de développer plus efficacement. A mon avis, tout développeur devrait avoir XDebug installé par défaut. J’ai bien pensé à le fournir directement avec WampServer, mais pour le moment, la structure de WampSever et son mode de fonctionnement « multi-PHP » ne me le permettent pas. Peut être dans une version future…