Cómo configurar Xdebug con VSCode y WSL2

Para los desarrolladores de Drupal y Symfony, configurar un entorno de desarrollo sostenible y eficiente es esencial. Utilizando herramientas como Docker, WSL (Windows Subsystem for Linux), y Visual Studio Code, esta guía explica cómo configurar Xdebug con DDEV, un enfoque popular para el desarrollo local en Drupal.

1 - Inicio de Docker y WSL:

• Asegúrate de tener Docker Desktop y WSL en funcionamiento.

2 - Acceso al Proyecto:

• En VSCode, abre el directorio de tu proyecto local ubicado en WSL2. Para esto necesitarás la extensión que provee Microsoft dentro de Visual studio code llamada WSL2 y la que provee xdebug.

3 - Configuración de DDEV:

En el terminal de VSCode ejecuta el comando ddev config global --xdebug-ide-location=wsl2. Esto adapta DDEV para trabajar con Xdebug en WSL2.

4 - Configuración de Visual Studio Code:

En VSCode, selecciona el icono de la extensión de Xdebug en el panel lateral izquierdo.

Crea un archivo launch.json eligiendo php inicialmente.

Copia el siguiente código en launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug with escueladrupal.com",
            "type": "php",
            "request": "launch",
            "hostname": "0.0.0.0",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
        }
    ]
}

Si tu proyecto está, por algún motivo, en una ruta interior de la carpeta root del archivo, habitualmente llamada web, añádela en pathMappings.

5 - Verificación y activación:

Comprueba el puerto Xdebug correcto en /admin/reports/status/php en tu sitio Drupal y ajusta launch.json si es necesario.

Accede a la extensión de debug en visual Studio code y clica en el botón de reproducción verde (play) para iniciar "Listen for Xdebug with escueladrupal.com".

6 - Prueba de Funcionamiento:

Una vez colocados los puntos de ruptura donde se desee que Xdebug pare, visita tu sitio web local. y debería detenerse en esos puntos de ruptura establecidos.

Conclusión

Siguiendo estos pasos, puedes configurar Xdebug con DDEV de manera eficiente, mejorando tu flujo de trabajo en el desarrollo de Drupal y Symfony. Este enfoque no solo es sostenible sino que también integra las mejores prácticas de desarrollo web moderno. Si quieres más información o entender mejor cómo funciona DDEV de la mano de un experto, accede al curso de DDEV desde cero.