MP-08 - Xdebug amb vsCode i l'Isard (servidor extern)

Hi ha gent a qui li agrada depurar les pàgines web que va executant. Ja que treballem amb vsCode, php i Isard anem a trobar una opció per la depuració dels programes.

Instal·larem:

el mòdul pel php Xdebug, que permet depurar el codi php al servidor apache i
l'extensió PHP Debug al nostre editor vsCode, al nostre ordinador.

Els passos que seguirem seran els següents:

Instal·lació i activació del Xdebug al servidor apache

Per a instal·lar Xdebug al contenidor, amb ubuntu, seguirem l'explicació que trobem a https://xdebug.org/docs/install#linux. De manera que seguirem els següents passos:

1.- Instal·lem Xdebug al servidor apache amb la comanda

apt-get update
apt-get install php-xdebug

2.- Activem el mòdul en php. Per això cal editar el fitxer de php del servidor /etc/php/8.1/apache2/php.ini. Podem veure la seva ubicació en l''execució del phpinfo(). Per això cal:

modificar la línia següent
```
;zend_extension=opcache
```
per
fitxer php.ini
```
zend_extension=xdebug.so
```
Cal modificar el fitxer php.ini que utilitza l'apache

afegir les següents línies al mateix fitxer php.ini

fitxer php.ini

xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_host = 127.0.0.1
xdebug.client_port = 9003

MOLT IMPORTANT: Per tal que funcioni correctament caldrà haver iniciat una connexió ssh al servidor de la següent forma:

ssh isard@<ipDelServidor> -L 80:127.0.0.1:80 -R 9003:127.0.0.1:9003

És molt important el paràmetre -R 9003:127.0.0.1:9003 ja que amb això mapegem el port 9003 del servidor escoltant per la ip 127.0.0.1 al nostre port local 9003 on tindrem escoltant el client del xDebug.

En cas contrari caldrà especificar correctament la línia xdebug.client_host = 127.0.0.1

reiniciar el servei de l'apache
```
service apache2 restart
```
Una vegada activat el mòdul Xdebug podem comprovar si s'ha carregat bé executant un fitxer amb la comanda phpinfo() i veure'n l'apartat del Xdebug

o bé executant un fitxer amb la comanda xdebug_info() i veure'n el resultat

Assegura't que a l'apartat del Xdebug apareix Step Debugger com enabled

Instal·lació i configuració del PHP Debug l'editor vsCode

3.- El següent pas ja serà en el nostre editor vsCode. Cal buscar l'extensió PHP Debug i afegir-la al nostre vsCode. Aquesta instal·lació no la documentem ja que ho creiem innecessari.

4.- Finalment cal crear el fitxer .vscode\launch.json i modificar-lo ja que aquest conté, entre d'altres, el mapeig dels directori en el contenidor i en l'ordinador on tenim l'editor.

Compte

Cal tenir present que el mateix arbre de fitxers i directoris del servidor web caldrà tenir-los en local al nostre ordinador. Això cal tenir-ho present per la configuració del fitxer launch.json.

Per a treballar correctament cal obrir en el vsCode la carpeta on tenim el nostre codi, per exemple obrim la carpeta C:\DAW\MP08\www.

És possible que al obrir-la, si detecta algun fitxer .php, ens pregunti on tenim l'executable del php i ens demani que ho configurem,

,

ignorarem aquest missatge. El que ens interessa és que l'extensió del vsCode per l'Xdebug es connecti amb el php del contenidor. No executarem php en el client.

Obrirem a l'editor vsCode un fitxer amb codi php, nosaltres provarem amb el següent codi en un fitxer anomenat index.php situat a C:\MVD\2223\contenidor\var_www\html

<?php
    echo "<h1>Prova de php - Debug</h1>";
    for($i = 1; $i < 100; $i++) 
        if ($i % 3 == 0)
            echo $i;
    echo "<hr />";
?>

Ens col·locarem a la línia 2 del fitxer, la marcada, i hi afegirem un Punt de Breakpoint (F9). Obtenint quelcom semblant a la següent imatge:

Ara ens cal generar el fitxer de configuració launch.jsoni per això seguirem els següents passos:

escollirem, de les icones de l'esquerra, la de debugar (la marieta), i premerem la opció Create a launch.json file per tal que ens generi un fitxer .vscode\launch.json.
editarem el fitxer vscode\launch.json que trobarem a l'arbre de fitxers.

i li especificarem on ha d'anar a buscar el codi dels programes. A la opció de Listen for Xdebug li afegirem la ubicació dels fitxers, a l'apartat del pathMappings, tal i com es mostra a continuació:

        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "C:\\DAW\\MP08\\www"
            }
        }

No us oblideu la coma , després del 9003

desarem el fitxer i el tancarem.
Obrirem el fitxer que volem depurar, en el nostre cas el index.php, ens assegurarem que tenim el breakpoint on toca i tot seguit indicarem com volem debugar el programa.

Per començar a debugar caldrà escollir la opció Listen for Xdebug del deplegable

i prémer el botó de play.

Se'ns activaran els botons del debugador

i en accedir a la pàgina en qüestió des del navegador http://localhost/index.php se'ns aturarà el debugador a la línia del breakpoint podent debugar pas a pas i veure'n les diferents variables.

Fins que no arribeu al final de l'script no podreu veure el resultat de la pàgina al navegador.

Abans d'iniciar el debug

netstat -ano | find /I "9003"

netsh interface ipv4 show tcpconnections | find /I "9003"

Debug a l'espera de la petició

netstat -ano | find /I "9003"
  TCP    0.0.0.0:9003           0.0.0.0:0              LISTENING       3120
  TCP    [::]:9003              [::]:0                 LISTENING       3120

netsh interface ipv4 show tcpconnections | find /I "9003"
Dirección local Puerto local    Dirección remota        Puerto remoto   Estado
-----------------------------------------------------------------------------
        0.0.0.0     9003               0.0.0.0          0     Escuchar

Debugant

netstat -ano | find /I "9003"
  TCP    0.0.0.0:9003           0.0.0.0:0              LISTENING       3120
  TCP    127.0.0.1:9003         127.0.0.1:51241        ESTABLISHED     3120
  TCP    127.0.0.1:51241        127.0.0.1:9003         ESTABLISHED     9160
  TCP    [::]:9003              [::]:0                 LISTENING       3120

netsh interface ipv4 show tcpconnections | find /I "9003"
Dirección local Puerto local    Dirección remota        Puerto remoto   Estado
-----------------------------------------------------------------------------
      127.0.0.1     9003             127.0.0.1      53310  Establecido
      127.0.0.1    53310             127.0.0.1       9003  Establecido
        0.0.0.0     9003               0.0.0.0          0     Escuchar```

MOLT IMPORTANT

Per tal que funcioni correctament caldrà haver iniciat una connexió ssh al servidor de la següent forma:

ssh isard@<ipDelServidor> -L 80:127.0.0.1:80 -R 9003:127.0.0.1:9003

ALTRES CONFIGURACIONS

És possible que també funcioni amb altres configuracions. La que hem establert no necessita modificar el firewall que tinguem al sistema. De totes maneres, podeu no afegir les línies

fitxer php.ini

xdebug.client_host = 127.0.0.1
xdebug.client_port = 9003

i afegir la línia

fitxer php.ini

xdebug.discover_client_host = true

Si no acaba de funcionar, mireu el log de l'apache, pot ser que us indiqui on intenta trobar el depurador xDebug

sudo tail -n 0 -f /var/log/apache2/error.log