Dans la suite de l’article sur « Ligne de commande pour recharger une page Chrome« , j’ai eu l’objectif d’utiliser Visual Code pour lancer xdebug avec le langage de programmation PHP et avoir l’auto refresh de Chrome lié avec la sauvegarde d’un fichier dans Visual Code.
Etape 1 : xdebug
Xdebug doit être configuré et installer dans Wamp et l’édition du fichier php.ini d’Apache de l’outil Wamp devrait contenir ce genre d’informations
[xdebug]
zend_extension="c:/Developpement/wamp64-3.2.3/bin/php/php7.4.9/zend_ext/php_xdebug-2.9.6-7.4-vc15-x86_64.dll"
;PJE xdebug.remote_enable = off
xdebug.remote_enable=1
Correction pour la nouvelle version de xdebug le réglage s’appelle xdebug.mode a mettre donc en valeur debug au lieu de develop et il faut ajouter le réglage xdebug.start_with_request
[xdebug]
zend_extension="c:/Developpement/wamp64/bin/php/php7.4.26/zend_ext/php_xdebug-3.1.1-7.4-vc15-x86_64.dll"
;xdebug.mode allowed are : off develop coverage debug gcstats profile trace
;PJE xdebug.mode =develop
xdebug.mode=debug
xdebug.start_with_request
Toujours en xdebug 3 le port n’est plus 9000 mais 9003
Notez que je vous propose d’utiliser le « remote debug » de xdebug. Bien sûr, dans l’affichage de la page phpinfo, il faut vérifier que l’extension xdebug est bien activé :
Plus bas dans cette page on pourra vérifier que xdebug a les bons réglages dans la partie qui est dédié à xdebug.
Etape 2: Visual Code
Dans Visual Code, il faut activer l’extension PHP Debug pour disposer des outils de liaison entre Visual Code et xdebug. L’extension que j’ai utilisé est de Felix Becker : https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug.
Nous partons du principe que dans le dossier www de Wamp se trouve un sous-dossier dans lequel notre développement sera réalisé.
Pour éviter d’utiliser un fichier tasks.json, j’ai préparé une double configuration dans le fichier launch.json a créé dans le dossier de travail de notre projet. Ce fichier doit permettre d’indiquer à la fois à Visual Code d’écouter les appels de xdebug pour un débogage et de lancer un navigateur chrome avec les options de débogage à distance pour relancer l’affichage de la page en cas de modificaiton du programme php, d’une page html ou d’un fichier CSS ou Javascript.
Le fichier launch.json dont on modifiera les chemins de Chromium et l’URL d’appel en fonction des besoins du projet Web:
{
// Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
// Pointez pour afficher la description des attributs existants.
// Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Chromium",
"program": "C:/Users/pierre.jean/AppData/Local/Chromium/Application/chrome.exe",
"runtimeArgs": [
"--disable-web-security",
"--auto-open-devtools-for-tabs",
"--remote-debugging-port=9222",
"http://127.0.0.1/${workspaceFolderBasename}/${relativeFile}?XDEBUG_SESSION_START"
],
"webRoot": "${workspaceRoot}"
},
{
"name": "Xdebug",
"type": "php",
"request": "launch",
"port": 9000,
},
]
,"compounds": [
{
"name": "Xdebug & Chromium",
"configurations": ["Chromium","Xdebug"],
}
]
}L’appel au débogage doit être la première fois sur le choix « Xdebug & Chromium » pour lancer l’écoute sur l’URL http://127.0.0.1/dossier/index.php?XDEBUG_SESSION_START et ouvrir un navigateur Chromium avec les outils de développement Web ouvert.
Etape 3: Sauver un fichier relancer l’auto refresh de Chrome
Pour exploiter l’auto-refresh de Chrome/Chromium, j’ai pensé chercher l’équivalent des « builders » d’Eclipse, au final, la philosophie de Visual Code est d’utiliser une extension (https://marketplace.visualstudio.com/items?itemName=wk-j.save-and-run) dont l’objectif est de lancer automatiquement un programme debug.cmd qui est une variation de l’ancien programme.
L’extension Save And Run doit être programmé en modifiant le fichier settings.json se trouvant dans le dossier « C:\Users\pierre.jean\AppData\Roaming\Code\User\ » voici ma proposition de réglages pour déclencher le programme debug.cmd.
"saveAndRun": {
"commands": [
{
"match": "\\.(php|html|css|js)$",
"cmd": "${workspaceRoot}/debug.cmd",
"useShortcut": false,
"silent": false
}
]
} Le fichier debug.cmd se trouvera dans le dossier de notre projet Web mais il pourrait être ailleurs. Ce fichier s’appuie encore une fois sur le programme websocat_win64.exe ( pour la communication par WebSocket), disponible sur cette page https://github.com/vi/websocat/releases/.
Bien sûr, devant la complexité de la programmation en batch/cmd je me suis posé la question de développer un programme complet capable de faire les appels WebSocket, capable de trier les objets json des réponses et pour simplifier l’installation selon les systèmes d’exploitations.
Etape 4: debug.cmd pour faire l’auto-refresh de la page
Le programme debug.cmd cherche dans la réponse à l’URL de débogage de Chrome http://127.0.0.1:9222/json un objet json contenant le mot « page » puis en cherchant l’URI pour le WebSocket avec le numéro unique qui permet de demander le rechargement de la page.
@echo off
2 SETLOCAL ENABLEDELAYEDEXPANSION
3
4 set count=1
5 set pattern1="""type"": ""page"","
6 set pattern2="webSocketDebuggerUrl"
7
8 set findPage=0
9 FOR /F "tokens=* USEBACKQ" %%F IN (`curl -s http://127.0.0.1:9222/json`) DO (
10 REM find only page not web developper page with 'type' : 'page'
11 REM echo %%F | find %pattern1%
12 for /f "tokens=2" %%I in ('echo %%F ^| find %pattern1%') DO (
13 if "%ERRORLEVEL%" == "0" (
14 set findPage=1
15 )
16 )
17
18 REM find now webSocketDebuggerUrl
19 REM echo "!findPage!"
20 if !findPage! == 1 (
21 REM find with 'webSocketDebuggerUrl' : 'ws://...'
22 for /f "tokens=2" %%L in ('echo %%F ^| find %pattern2%') DO (
23 if "%ERRORLEVEL%" == "0" (
24 set var=%%L
25 )
26 )
27 )
28 )
29 set str=%var:"devtoolsFrontendUrl":=%
30 set str=%str:,= %
31 set str=%str:"/devtools/inspector.html?=%
32 set str=%str: =%
33 set str=%str:"=%
34 set str=%str:ws=%
35 set str=!str:~1!
36 set str=ws://%str%
37
38 echo {"id":0,"method":"Page.reload","params":{"ignoreCache":true}} | websocat_win64.exe -n1 %str% > NUL
39
40 ENDLOCALJ’ai essayé de rajouter une méthode pour trouver uniquement la page dont j’ai le nom passé en paramètre et gérer le cas de plusieurs onglets de Chrome. Malheureusement la performance est trop faible en batch/cmd. Il faudrait donc un vrai programme pour gérer cette situation et conserver en fait l’identifiant de l’onglet chrome à débogger une fois pour toute la session.
Conclusion
Donc xdebug est activé dans Wamp, Visual Code dispose d’une extension PHP Debug capable d’écouter les appels de xdebug. Visual Code a une configuration launch.json capable de lancer l’écoute et un navigateur qui va ouvrir une URL avec le paramètre XDEBUG_SESSION_START pour lancer xdebug.
Il manque que d’ajouter une extension Save and Run à Visual Code pour déclencher à la sauvegarde d’un fichier php du projet un auto-refresh de Chrome qui a été démarré avec les options de développement Web.
Le « Proof-of-concept » est réalisé grâce à cet enchainement. Mais pour commencer facilement, faite juste l’installation des 2 extensions, créer un sous-dossier dans le dossier www de Wamp, ajouter les fichiers dans ce dossier debug.cmd, launch.json et websocat_win64.exe et cela devrait commencer à fonctionner si votre fichier php.ini de Wamp a xdebug activé aussi.