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…


Actions

Informations

22 réponses à “Débugger avec WampServer, Xdebug et PDT”

1 09 2009
vivanno.com::aggregator » Archive » Wampserver et Xdebug et Eclipse PDT (08:10:30) :

[...]  Débugger avec WampServer, Xdebug et PDT () [...]

1 09 2009
Wampserver et Xdebug et Eclipse PDT | traffic-internet.net (08:40:26) :

[...]  Débugger avec WampServer, Xdebug et PDT (0 visite) [...]

1 09 2009
Guile (16:13:56) :

Super ce tuto! Moi qui ai cherché en vain (pdt 5 mn) à mettre en place cette config, je suis super intéressé et testerai dès ce soir (si je trouve le temps). J’étais avec zend_debbuger sur PDT (une distribution toute faite), et souhaitais faire du profiling… xDebug est donc la bonne solution.
Par contre, il y a un point que je ne comprends pas : la partie sur les variables GET et POST. C’est quoi le problème?
Il est clair que si je dois faire une manip’ pour chaque debug ça va vite me fatiguer, et vu que le zend_debugger fonctionne plutôt bien sur ces variables…

Merci de m’éclaircir sur ce point et surtout pour ce tuto bien foutu!

3 09 2009
Guile (23:17:34) :

Installation faite.

Ca fonctionne. Parfois Apache plante dans des circonstances assez complexes…
Pour ce qui est du php.ini, bien faire attention à la doc de xDebug.

Donc correction pour PHP5.3+, ne pas utiliser :
zend_extension_ts= »c:/wamp/bin/php/phpx.x.x/php_xdebug.dll »

Mais écrire :
zend_extension= »c:/wamp/bin/php/phpx.x.x/php_xdebug.dll »

(sans le _ts)

Pour la section sur _GET et _POST, je ne comprends pas trop le soucis…

4 09 2009
Romain (11:13:32) :

En fait, il n’y a pas réellement de souci, simplement il n’y a rien de spécifique pour traiter le GET et le POST. il faut les faire passer par un second appel à la page dans la session de debuggage ce qui est peut parfois être fastidieux.

7 09 2009
fredquie (23:40:56) :

Salut Romain, =Astuce $_GET=

Si tu cliques dans ‘Debug Configurations’, sous l’image du ‘bug’, tu as dans l’onglet Server, la zone input ‘File’ qui doit prendre par défaut l’url à lancer en débug.

Si elle s’appelle : http://localhost/test_debug/test.php, il suffit de rajouter après ?username=fred, et tes paramètres se retrouveront automatiquement dans ton $_GET dès que tu lanceras ton script…ensuite à toi d’en changer la valeur quand tu le souhaite !!!!

BLEEKOM.ORG…On a parfois besoin d’un consultant !!!

24 09 2009
Seb (06:45:39) :

Attention : à partir de la version 5.3 de PHP, il faut utiliser « zend_extension » sans le « _ts » dans le fichier php.ini :
zend_extension="c:/wamp/bin/php/phpx.x.x/php_xdebug.dll"

29 09 2009
laury (14:38:55) :

j’ai fait mon site mais le php me fait un grand defaut

25 10 2009
NerOcrO (19:37:54) :

Salut,
J’ai mis à la fin de mon fichier php.ini ceci :

zend_extension = « c:/wamp/bin/php/php5.3.0/php_xdebug-2.0.5-5.3-vc6.dll »
xdebug.remote_enable=1
xdebug.remote_host= »127.0.0.1″
xdebug.remote_port=9000
xdebug.remote_handler= »dbgp »
xdebug.remote_mode=req

Et pourtant, l’extension n’est pas chargé, pourriez vous m’indiquer pourquoi ???
Je suis sous windows 7 et le dernier wamp.
Merci

29 11 2009
Joseph Melnick (18:28:07) :

problem installing xdebug with wampserver 2 php 5.3
using the following:

php_xdebug-2.0.5-5.3-vc9.dll renamed to php_xdebug.dll

stored into php5.3.0 directory and added the following to end of php.ini:

zend_extension_ts= »c:/wamp/bin/php/php5.3.0/php_xdebug.dll »

Any help would be appreciated.

Joseph Melnick

29 11 2009
Romain (19:37:15) :

Use zend_extension instead of zend_extension_ts with PHP5.3

30 11 2009
Joseph Melnick (00:23:02) :

Found the following error in apache error log.

Cannot load Xdebug – it was built with configuration API220090626,TS,VC9, whereas running engine is API220090626,TS,VC6

So php_xdebug-2.0.5-5.3-vc9.dll was the wrong DLL to use.

1) Solution was to download VC6 version of dll
(php_xdebug-2.0.5-5.3-vc6.dll),

2) Delete php_xdebug.dll from c:/wamp/bin/php/php5.3.0 and copy the version just downloaded (VC6) from http://www.xdebug.org/download.php and rename to php_xdebug.dll.

Merci beaucoup Rom.

21 01 2010
Espinasse (19:33:28) :

salut,
pour php5.3.0 il ne faut pas mettre zend_extension_ts mais zend_extension puis le chemin pointant sur la dll, merci pour ton tuto…

25 01 2010
Eclipse 3.2 comme environnement de développement PHP | kctus|NET (18:41:18) :

[...] Roms Blog – Débugger avec WampServer, Xdebug et PDT [...]

2 02 2010
Eclipse 3.2 comme environnement de développement PHP « kctus|NET (03:31:42) :

[...] Roms Blog – Débugger avec WampServer, Xdebug et PDT [...]

8 02 2010
Roger (15:19:05) :

Merci pour toutes ces info. Impossible de trouver une version Xdebug Helper pour la nouvelle version firefox. C’est vraiment dommage. Il en va de même pour le language pack fr que l’on ne trouve pas pour cette version.

13 03 2010
Dominique (19:57:27) :

Lors de l’install de PDT j’ai eu un message comme quoi le port 80 était occupé. J’ai donc mis 81.
Je me demande si le problème suivant ne vient pas de là :
Quand je lance Debug as Php Web Page Firefox me dit « Erreur de chargement »
Dans ce cas où remettre le port à 80 ?

Merci pour ton tuto super clair.

13 03 2010
Dominique (20:35:10) :

Bon je suis nul je n’avais pas lancé wamp…
J’ai maintenant ces messages dans des blocs oranges :
Warning: Unknown: failed to open stream: No such file or directory in Unknown on line 0
et
Fatal error: Unknown: Failed opening required ‘C:/wamp/www/Congés_CG81/conge.php’ (include_path=’.;C:\php5\pear’) in Unknown on line 0

L’URL de la page :
http://127.0.0.1/Cong%C3%A9s_CG81/conge.php?XDEBUG_SESSION_START=ECLIPSE_DBGP&KEY=12685050665735

28 05 2011
carlos (19:49:13) :

donde puedo encontrar la lista de errores de WampServer.
estoy tratando de importar una DataBase desde SQL a MySql, usando phpMyAdmin. desde ya las gracias.

16 01 2012
Herman (11:14:34) :

Bonjour,
quand je configure Xdebug avec PDT j’ai l’érreur suivante:

Debugger Error

incompatible debugger version
The remote debugger versionmight not match the expected protoco version
2006040705

De quoi s’agit – il SVP

3 06 2012
Parente (01:43:49) :

Bonjour,

Je cherche depuis un moment à debuger un fichier php qui contient de l’html, celui-ci je le debogue en PHP web page, cette page charge un ficher JS et ce fichier JS fait appelle par Jquery-Ajax à des fonction d’un fichier qui lui ne contient que du code PHP.

Voici l’appelle depuis le fichier js:

function startChatSession(){
$.ajax({
url: « maPage.php?action=param »,
………

comment faire pour prendre en compte les breakpoint dans la page maPage.php?

Si je débug PHP script bien sur je n’ai pas les paramètres provenant de l’url.

Je vous remercie d’avance.

16 05 2013
el rey margo (17:40:08) :

mon serveur wamp m’envoir un message d’erreur kan g lance phpmyadmin, apache et php fonctionne tres bien,mais phpmyadmin ne fonctione pas ,ke faire???????????????