Table des matières

Techniques de débogage

-- Débogage avec PHP/Eclipse

Il est préférable d'utiliser un véritable débogueur, plutôt que de se satisfaire des echo et var_dump insérés dans le code pour évaluer une variable

-- XDebug

XDebug est l'un des outils de débogage existant pour PHP. Il est généralement livré par défaut avec les solutions Wampp, Xampp ou easyPhp.

-- Vérifications

Vérifier son activation en lançant phpinfo :

Dans certains cas, il faut l'activer en éditant php.ini :

[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug.dll"
xdebug.profiler_append = 0
xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "C:\xampp\tmp"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "127.0.0.1"
xdebug.remote_port = "9000"
xdebug.trace_output_dir = "C:\xampp\tmp"
xdebug.idekey = "ECLIPSE_DBGP"

xdebug.auto_trace=0       ;to always profile, set to 1 & comment out xdebug.trace_enable_trigger
xdebug.trace_enable_trigger=1
xdebug.collect_params=4   ;displays full parameter variable names and values
xdebug.collect_return=1   ;display function return values
xdebug.trace_format=2

-- Configuration d'Eclipse

L’extension pdt doit être installée.

Choisir ensuite Configurer XDebug :

Vérifier au passage les paramètres php servers et php executables.

-- Installation du Helper de Chrome

Installer l'extension XDebug Helper de chrome : XDebug helper

-- Débogage

Rafraîchir la page pour provoquer une nouvelle exécution du script, puis retourner à Eclipse :

Eclipse propose de passer en perspective Debug :

En cas de non fonctionnement (pas d'arrêt dans Eclipse lors de l'exécution), changez le port xdebug dans php.ini (passez le à 9101 par exemple); et modifiez le également dans Eclipse.

L'exécution s'est arrêtée sur la première ligne.

Il est alors possible de reprendre l'exécution :

en pas à pas, d'instruction en instruction sans parcourir les fonctions appelées (step over)
en pas à pas, d'instruction en instruction en parcourant les fonctions appelées (step into)
de reprendre normalement l'exécution du script (jusqu'à sa fin ou jusqu'au prochain point d'arrêt (resume)
d'arrêter la session de débogage (stop)

Inspection de variables

Il est alors possible :

De maintenir la valeur de l'expression affichée (Bouton droit de la souris sur l'expression à évaluer puis Watch dans le menu :

Poser un point d'arrêt

Double cliquer dans la barre verticale des numéros de ligne, au niveau de la ligne sur laquelle l'exécution doit s'interrompre :

Relancer ensuite l'exécution (F5 dans le navigateur par exemple).

Il est également possible de poser un point d'arrêt conditionnel. L'exécution ne sera interrompue dans ce cas que si la condition est vraie :

Poser le point d'arrêt normalement (double-clic), puis aller dans breakpoint properties en utilisant le menu contextuel.

-- Débogage côté client

Difficile parfois de trouver les erreurs dans les scripts côté client et les requêtes ajax, il convient donc d'utiliser les outils de développement fournis avec les navigateurs, ou d'en installer en supplément.

-- Chrome

-- Débogage des scripts

Chrome (Version 31.0.1650.57 m) est fourni avec des outils de développement efficaces, accessibles par le menu : Outils/Outils de développement

La console d'erreur affichée par défaut montre les erreurs, warnings et/ou informations de log.

Il est ensuite possible d'ouvrir le fichier concerné (dans le cas présent forms.js), puis de poser un point d'arrêt sur une ligne en cliquant sur la barre de numérotation des lignes.

La nouvelle exécution du script permettra de s'arrêter au point d'arrêt, puis de reprendre l'exécution :

en pas à pas d'instruction en instruction sans parcourir les fonctions appelées
en pas à pas en parcourant les fonctions appelées

Le point d'arrêt peut être conditionnel (à poser avec le bouton droit de la souris) :

Il est également possible d'inspecter des variables, soit en les survolant à la souris, soit en les ajoutant aux addWatch :

-- Inspection des requêtes

Afficher le volet réseau (network), cliquer sur la requête ajax à inspecter :

Chrome affiche le contenu de la réponse :

Il est possible d'inspecter également les en-têtes et paramètres de la requête.

-- Inspection DOM

L'outil d'inspection DOM permet d'obtenir des informations sur l'arborescence DOM de la page :

Il suffit de cliquer ensuite sur l'élément DOM à inspecter

Pour obtenir la structure à laquelle il appartient, ou les informations de style :