Habilitar Xdebug en Visual Studio Code: una guía completa y sencilla

La configuración de Xdebug en Visual Studio Code es necesaria para depurar código PHP de manera efectiva. Sin este, hay que limitarse a var_dump(), print_r() o echo para poder examinar. En cambio, teniendo Xdebug es posible:

• Establecer puntos de interrupción.
• Ver valores de variables en tiempo real.
• Ejecutar paso a paso para analizar el flujo de la aplicación.
• Inspeccionar la pila de llamadas.

En este artículo se detallan los pasos para habilitar Xdebug en el entorno de VS Code.

Paso 1: Verificar si Xdebug está habilitado

1. Crear un archivo llamado info.php en el directorio del servidor (xampp, wamp, etc.). Lo más probable es que no sea necesario ya que generalmente los servidores de desarrollo tienen algo que permite ver este archivo, pero si se requiere, aquí se muestra lo que debería contener.

   <?php
   phpinfo();
   ?>

2. Acceder al archivo desde el navegador utilizando la URL del servidor, por ejemplo: http://localhost:puerto/info.php.
   El puerto por defecto es 80, pero puede configurarse en otros valores, especialmente si se tienen otros servidores como IIS.
3. Buscar “xdebug” en la salida de phpinfo(). Si no aparece, significa que no está habilitado.

Paso 2: Usar el Xdebug Wizard

1. Visitar el sitio oficial del Xdebug Wizard (https://xdebug.org/wizard).
2. Copiar toda la salida de phpinfo() desde el navegador. Pegarla en el cuadro de texto del Xdebug Wizard y presionar el botón de “Analyze my phpinfo() output”.

Paso 3: Descargar y preparar Xdebug de acuerdo con las instrucciones.

1. Revisar la versión de PHP y la configuración recomendada por el wizard. Es importante para no tener complicaciones.
2. Descargar la versión correspondiente de la DLL de Xdebug.
3. Renombrar la DLL descargada parasimplificar el nombre, como php_xdebug.dll, si es necesario.

Paso 4: Copiar la DLL en el directorio correcto

1. Identificar el directorio de extensiones de PHP. Esto se muestra en phpinfo() como extension_dir.
2. Copiar la DLL renombrada de Xdebug en ese directorio.
3. Si se está usando XAMPP, WAMP o un servidor configurado manualmente, es importante asegurarse de colocar la DLL en la ruta especificada para extensiones PHP.

Paso 5: Configurar php.ini

1. Abrir el archivo php.ini. La ubicación es diferente de acuerdo con el servidor instalado.
2. Agregar las siguientes líneas al final del archivo:

   zend_extension="ruta a php_xdebug.dll"
   xdebug.mode=debug
   xdebug.start_with_request=yes
   xdebug.client_host=127.0.0.1
   xdebug.client_port=9003

3. Guardar los cambios y reiniciar el servidor PHP o el entorno.

Paso 6: Verificar la instalación

1. Abrir de nuevo info.php.
2. Buscar “xdebug” en la salida. Ya se debería ver la configuración de Xdebug habilitada.

Paso 7: Configurar Visual Studio Code

1. Entrar a la pestaña de extensiones.
2. Buscar “PHP Debug” en la barra de búsqueda.
3. Instalar la extensión (hay varias pero se recomienda la creada por Damjan Cvetko o Felix Becker).

Paso 8: Configurar el archivo launch.json

1. Ir al menú “Run” en VS Code.
2. Hacer click en “create a launch.json file”.
3. Seleccionar “PHP” como el entorno.
4. Configurar el archivo con lo siguiente, si ya existe posiblemente tenga otras configuraciones así que debe hacerse con cuidado para no dañar las demás:

   {
       "version": "0.2.0",
       "configurations": [
           {
               "name": "Listen for Xdebug",
               "type": "php",
               "request": "launch",
               "port": 9003
           }
       ]
   }

5. Guardar el archivo.

Paso 9: Iniciar la depuración para probar

1. Verificar que el servidor esté en ejecución.
2. Abrir el archivo PHP que se va a depurar en VS Code.
3. Colocar un punto de interrupción haciendo click en el margen izquierdo de la línea de código.
4. Presionar F5 para iniciar la depuración.
5. El depurador debería detenerse en el punto de interrupción y mostrar el estado de las variables.