Depurar código PHP en VSCode con Ubuntu Linux

Editado el 10 de Abril del 2021 a las 15:59:24 por Rafael Corro

En este artículo mostraré los pasos a seguir para preparar el editor Visual Studio Code para poder depurar código PHP.
Este post ha sido nuevamente editado, usando la versión de PHP: 7.4.3 y XDebug 3.0.4 en un sistema opertativo Kubuntu 20.04.

Instalación de XDebug 3.0.4 en Ubuntu:

1.- Mostrar página phpinfo();
Podemos crear una pagína en nuestro localhost para que muestre la información PHP.

<?php
echo phpinfo();
?>

2.- Copiar la salida de phpinfo() pulsando Ctrl+a y Ctrl+c

3.- Abrir https://xdebug.org/wizard
4.- Pegar contenido en el textarea y pulsar el botón: Analyse my phpinfo() output.
5.- Seguimos las instrucciones que no ha dado la página:

   a.- Descargamos xdebug
   b.- Instalamos las herramientas para compilar extensiones php
           sudo apt-get install php-dev autoconf automake
   c.- Descomprimimos el archivo descargado de xdebug
           sudo tar -xvzf xdebug-3.0.4.tgz
    d.- Entramos en la carpeta descomprimida de xdebug
    e.- Ejecutamos phpize (Si no está instalado ejecutar: sudo apt-get install php7-devel)
           sudo phpize

6.- Añadimos unas lineas al php.ini
       cd /etc/php/7.4/apache2/
       sudo nano php.ini

Buscamos la linea ;opcache.lockfile_path=/tmp y añadimos debajo:
zend_extension = /usr/lib/php/20190902/xdebug.so

y al final, añadimos las lineas:

[XDebug]
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_connect_back=1 # No es seguro para entornos de produción
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req xdebug.remote_autostart=true
xdebug.remote_autostart = 1

7.-Añadimos el fichero de configuración de xdebug
cd /etc/php/7.4/apache2/conf.d/
sudo nano 20-xdebug.ini

y su contenido será:

xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_port = 9000

8.- Nos aseguramos xdebug.so está instalado:
       ls /usr/lib/php/20190902|grep xdebug

     Y si no nos muestra xdebug.so en la salida seguir los pasos:
      a.-Volvemos a entrar en la carpeta que descomprimimos de xdebug que nos descargamos
      b.-Ejecutamos: ./configure
    c.-Ejecutamos: make
    d.-Ejecutamos: cp modules/xdebug.so /usr/lib/php/20190902

Para que los cambios surtan efecto volvemos a la terminal y reiniciamos el servidor apache
        /etc/init.d/apache2 restart

9.- Comprobamos en el phpinfo() que está funcionando la extension.


Configuramos Xdebug en VSCode ____________________________

1.- Instalamos las siguientes extensiones:
   PHP IntelliSense 2.3.14
     PHP Debug 1.14.12

2.- Configuración de launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        },
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Comenzamos la depuración:

Marcamos los breakpoint, abrimos el navegador Chromium o Chrome y pusamos F10 para dar un paso hacia adelante y F11 para realizar la depuración más a fondo.

Y eso es todo ;)

Valoración de los lectores sobre: Depurar código PHP en VSCode con Ubuntu Linux