slam4:debogage

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
slam4:debogage [2013/11/25 01:17] – [XDebug] jcheronslam4:debogage [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 ====== Techniques de débogage ====== ====== Techniques de débogage ======
-===== Débogage avec PHP/Eclipse =====+===== -- 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 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 ====
  
 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. 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** : Vérifier son activation en lançant **phpinfo** :
Ligne 37: Ligne 40:
  
   * Vérifier la présence de la dll sous Windows et son emplacement   * Vérifier la présence de la dll sous Windows et son emplacement
-  * Noter la valeur de **xdebug.idekey** qui servira dans la communication avec Eclipse+  * Noter la valeur de **xdebug.idekey** qui servira dans la communication avec Eclipse et Chrome
   * Vérifier l'adresse (remote_host) et le port de communication (9000 par défaut)   * Vérifier l'adresse (remote_host) et le port de communication (9000 par défaut)
-===== Débogage côté client =====+ 
 +=== -- Configuration d'Eclipse === 
 +L’extension pdt doit être installée. 
 + 
 +  * Aller dans le menu **Window/preferences**, puis frapper **debug** dans la zone de recherche. 
 +  * Activer l'élément **PHP/debug** 
 + 
 +{{:slam4:debogage:xdebugeclipse1.png?800|}} 
 + 
 +Choisir ensuite Configurer XDebug : 
 + 
 +{{:slam4:debogage:xdebugconfigeclipse.png?|}} 
 + 
 +Vérifier au passage les paramètres **php servers** et **php executables**. 
 + 
 +=== -- Installation du Helper de Chrome === 
 + 
 +Installer l'extension XDebug Helper de chrome : [[https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc|XDebug helper]] 
 + 
 +=== -- Débogage === 
 +  * Démarrer Eclipse 
 +  * Dans chrome, aller à l'adresse de la page à déboguer et activer le débogage sur la droite de la barre d'adresse : 
 + 
 +{{:slam4:debogage:startxdebugchrome.png?|}} 
 + 
 +Rafraîchir la page pour provoquer une nouvelle exécution du script, puis retourner à Eclipse : 
 + 
 +Eclipse propose de passer en perspective Debug : 
 + 
 +{{:slam4:debogage:debugperspective.png?|}} 
 + 
 +<html><div class='note'>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.</div></html> 
 + 
 +L'exécution s'est arrêtée sur la première ligne. 
 + 
 +{{:slam4:debogage:debugscreen.png?|}} 
 + 
 + 
 +Il est alors possible de reprendre l'exécution : 
 + 
 +|{{:slam4:debogage:stepover.png?|}} |en pas à pas, d'instruction en instruction sans parcourir les fonctions appelées (**step over**) | 
 +|{{:slam4:debogage:stepinto.png?|}} |en pas à pas, d'instruction en instruction en parcourant les fonctions appelées (**step into**) | 
 +|{{:slam4:debogage:resume.png?|}} |de reprendre normalement l'exécution du script (jusqu'à sa fin ou jusqu'au prochain point d'arrêt (**resume**) | 
 +|{{:slam4:debogage:stop.png?|}} |d'arrêter la session de débogage (**stop**) | 
 + 
 +=== Inspection de variables === 
 +Il est alors possible : 
 +  * d'inspecter ponctuellement la valeur prise par une expression (Bouton droit de la souris sur l'expression à évaluer puis **Inspect** dans le menu) : 
 + 
 +{{:slam4:debogage:inspectvar.png?|}} 
 + 
 +De maintenir la valeur de l'expression affichée (Bouton droit de la souris sur l'expression à évaluer puis **Watch** dans le menu : 
 + 
 +{{:slam4:debogage:watchvar.png?|}} 
 + 
 +=== 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 : 
 + 
 +{{:slam4:debogage:breakpointphp.png?|}} 
 + 
 +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 : 
 + 
 +{{:slam4:debogage:breakpointconditionphp.png?|}} 
 + 
 +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. 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 ====+==== -- Chrome ====
  
-=== Débogage des scripts ===+=== -- 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** 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**
Ligne 70: Ligne 142:
 {{:slam4:addwatch.png?|}} {{:slam4:addwatch.png?|}}
  
-=== Inspection des requêtes ===+=== -- Inspection des requêtes ===
  
 Afficher le volet réseau (**network**), cliquer sur la requête ajax à inspecter : Afficher le volet réseau (**network**), cliquer sur la requête ajax à inspecter :
Ligne 84: Ligne 156:
 {{:slam4:debogage:networkresponse.png?|}} {{:slam4:debogage:networkresponse.png?|}}
  
-=== Inspection DOM ===+=== -- Inspection DOM ===
  
 L'outil d'inspection DOM permet d'obtenir des informations sur l'arborescence DOM de la page : L'outil d'inspection DOM permet d'obtenir des informations sur l'arborescence DOM de la page :
  • slam4/debogage.1385338629.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)