Outillage/PhpStorm/Xdebug

Présentation

Cette page a pour objet de décrire comment interfacer PhpStorm avec Xdebug.

Documentation officielle

Plus d'informations sur l'interfaçage de PhpStorm avec Xdebug sur :

• https://www.jetbrains.com/help/phpstorm/configuring-xdebug.html

  dans le cas d'une utilisation mono-utilisateur

• https://www.jetbrains.com/help/phpstorm/multiuser-debugging-via-xdebug-proxies.htm

  dans le cas d'une utilisation multi-utilisateur (DBGp Proxy Tool)

Pré-requis

Pour pouvoir connecter PhpStorm, les pré-requis suivants doivent être respectés :

• Une clé d'IDE doit être définie
• Le serveur hébergeant Xdebug doit être joignable
• Le port d'écoute d'Xdebug doit être joignable
• Une extension de débogage doit être installé sur le navigateur de l'utilisateur

Clé d'IDE

La clé d'IDE utilisée doit être la même configurée dans PhpStorm et dans l'extension de débogage du navigateur.

Une convention veut que dans le cas d'un utilisateur unique, on indique PHPSTORM comme valeur de clé, et que dans le cas de plusieurs utilisateurs, chaque utilisateur indique une valeur permettant de l'identifier.

Dans la pratique, il vaut donc mieux, dans n'importe quel cas, d'indiquer une valeur unique correspondant à l'utilisateur.

Serveur hébergeant Xdebug

Si Xdebug est utilisé sans le proxy DBGp Proxy Tool, il faut donc simplement s'assurer que le serveur hébergeant Xdebug soit joignable depuis le poste de l'utilisateur.

Si Xdebug est utilisé avec le proxy DBGp Proxy Tool, il faut alors s'assurer que le serveur hébergeant le proxy DBGp Proxy Tool soit joignable depuis le poste de l'utilisateur.

Port d'écoute

En fonction de l'utilisation ou non du proxy DBGp Proxy Tool, le port d'écoute peut varier. Dans tous les cas, il faudra se rapprocher des personnes ayant mis en place Xdebug, ou DBGp Proxy Tool le cas échéant, pour connaître le port à utiliser.

Une convention veut que Xdebug écoute sur le port 9000, alors que DBGp Proxy Tool écoute sur le port 9001.

Pour vérifier si le port d'écoute est joignable depuis un poste Windows, utiliser telnet pour tenter de le joindre :

telnet myserver 9000

Extension de débogage

La liste des extensions de débogage est disponible sur la documentation de PhpStorm : https://www.jetbrains.com/help/phpstorm/browser-debugging-extensions.html

Il faut s'assurer que la clé d'IDE utilisée correspond bien à celle renseignée dans la configuration de l'IDE.

Mise en œuvre

PhpStorm

Aller dans File puis dans Settings... :

PhpStorm - Settings

Une fois la fenêtre des paramètres ouverts, aller dans la section Languages & Frameworks | PHP :

PhpStorm - Settings - PHP

S'assurer qu'un CLI Interpreter soit défini et et sélectionné, puis cliquer sur les ... à droite de la liste de ce champ :

PhpStorm - Settings - CLI

Il est alors possible de vérifier que Xdebug est bien présent, ainsi que son numéro de version :

PhpStorm - Settings - Xdebug version

Fermer alors la fenêtre, retourner dans la section Languages & Frameworks | PHP et aller dans la sous-section Debug :

PhpStorm - Settings - Xdebug

Le champ le plus important est le Debug port. Il faut s'assurer que ce correspond bien à celui défini par la directive xdebug.remote_port dans le fichier php.ini, soit 9000 pour la valeur par défaut

Le reste des champs est paramétrable à souhait, s'aider de la documentation de PhpStorm le cas échéant.

Fermer la fenêtre des paramètres, aller dans Tools, puis dans DBGp Proxy et enfin dans Register IDE :

PhpStorm - Tools

Cela aura pour effet d'ouvrir la fenêtre de paramétrage de DBGp Proxy :

PhpStorm - DBGp Proxy

Renseigner ainsi les paramètres :

• IDE key

  cela correspond à la clé d'IDE évoquée plus haut

• Host

  cela correspond au serveur hébergeant Xdebug, ou DBGp Proxy le cas échéant, comme indiqué plus haut

• Port

  cela correspond au port d'écoute évoqué plus haut

En cliquant sur OK, PhpStorm établira la connexion à Xdebug. Cela se traduira sur PhpStorm par un message au travers d'une pop-up :

PhpStorm - Pop-up

Ainsi qu'un message dans la fenêtre d'événements :

PhpStorm - Logs

Du côté du serveur, on verra passer ce genre de message :

nov. 04 11:21:02 myserver.local dbgpproxy[4049]: 10:21:02.460 [info] [server] Start new client connection from 192.168.0.33:58879
nov. 04 11:21:02 myserver.local dbgpproxy[4049]: 10:21:02.460 [info] [proxyinit] [jordan] Added connection for IDE Key 'jordan': 192.168.0.33:9000
nov. 04 11:21:02 myserver.local dbgpproxy[4049]: 10:21:02.460 [info] [server] Closing client connection from 192.168.0.33:58879

Navigateur

Choisir l'extension de débogage appropriée sur https://www.jetbrains.com/help/phpstorm/browser-debugging-extensions.html et l'installer.

Dans le cadre de la rédaction de cette page, le navigateur Chrome sera utilisé à titre d'exemple.

Pour Xdebug pour Chrome, se rendre sur l'extension Xdebug helper et l'ajouter à Chrome en cliquant sur Ajouter à Chrome :

Chrome - Ajout extension

Une fois l'extension installée, faire un clic droit sur l'icône de l'extension et cliquer sur Options :

Xdebug helper - Menu

Une fois sur la page d'options de l'extension, repérer la section IDE key :

Xdebug helper - Options

Dans le menu déroulant, sélectionner Other, renseigner la clé d'IDE dans le champ texte désormais modifiable et cliquer sur Save pour appliquer la configuration :

Xdebug helper - IDE key

La configuration de Xdebug est terminée.

Utilisation

Côté navigateur

Se rendre sur la page web à déboguer et activer l'extension Xdebug helper en cliquant sur son icône .

Cela fait apparaître le menu suivant :

Xdebug helper - Menu

Cliquer sur Debug pour activer le mode Debug. L'icône devient alors verte : .

Côté IDE

Pour lancer l'écoute des requêtes envoyées à Xdebug au travers de la page à déboguer, aller dans Run puis cliquer sur Start Listening for PHP Debug Connections :

Ou bien cliquer simplement sur l'icône .

L'IDE recevra recevra désormais les requêtes de Xdebug et ce dernier bloquera le chargement de la page à chaque "breakpoint" rencontré.