Cómo configurar Xdebug con DDEV en VSCode en 4 pasos

Cómo configurar Xdebug con DDEV en VSCode: En solo cuatro sencillos pasos, mejora tu experiencia de codificación y depuración en este popular editor, como se detalla en esta publicación.

Xdebug es una herramienta de depuración y perfilado para PHP. Ofrece rastreos de pila, inspección de variables y puntos de interrupción, junto con cobertura de código y perfilado de rendimiento para optimizar aplicaciones PHP.

La depuración es el proceso de identificar, diagnosticar y corregir errores o fallos en el software. Estos errores pueden ser en forma de código incorrecto, errores lógicos o comportamientos no deseados que impiden que el software funcione según lo previsto.

1. Instalar Prerrequisitos:

Asegúrate de tener instaladas las siguientes herramientas:

• DDEV: Entorno de desarrollo local.
• Visual Studio Code: Nuestro editor de código.
• PHP Debug Adapter for Visual Studio Code: Proporciona soporte para Xdebug.

2. Configurar DDEV para Xdebug:

DDEV viene con Xdebug preconfigurado de fábrica. Solo tienes que habilitarlo:

1. Navega al directorio de tu proyecto DDEV.
2. Ejecuta el comando:

ddev xdebug on

Para verificar que Xdebug está habilitado:

ddev describe

Busca la sección Xdebug; debería indicar que Xdebug está habilitado.

3. Configurar VSCode:

1. En VSCode, haz clic en “Ejecutar” en la barra de herramientas superior.
2. Haz clic en “Abrir configuración” (o una redacción similar, dependiendo de tu versión de VSCode).
3. Añade la siguiente configuración:

{
    "name": "Listen for Xdebug",
    "type": "php",
    "request": "launch",
    "hostname": "0.0.0.0",
    "port": 9003,
    "pathMappings": {
        "/var/www/html": "${workspaceFolder}"
    }
}

Asegúrate de que esta configuración se guarde en el archivo launch.json dentro de la carpeta .vscode de tu proyecto.

4. Iniciar la Depuración:

1. Establece puntos de interrupción en tu código PHP.
2. En VSCode, haz clic en “Ejecutar” en la barra de herramientas superior y luego haz clic en Iniciar Depuración.
3. Inicia la acción en tu aplicación web que active el punto de interrupción.

VSCode debería capturar ahora el punto de interrupción, permitiéndote inspeccionar variables, avanzar paso a paso por el código, etc.

5. Deshabilitar Xdebug en DDEV (Opcional):

Cuando hayas terminado de depurar, es posible que desees deshabilitar Xdebug en DDEV para mejorar el rendimiento:

ddev xdebug off

¡Feliz depuración!