Cómo debugear Código PHP usando Xdebug en XAMPP y VS Code (Configuración y Solución)

¡Hola a todos los lectores y seguidores de Adobe Designers! Bienvenido a un nuevo artículo para todos aquellos programadores de Back End que deseen debugear su código PHP dentro de VS Code, hoy conocerán como hacer esto paso a paso, teniendo detallado todos los pasos para que lo comprendan tanto profesionales como novatos.

Además, dejo casi al final del artículo una ayuda para aquellos que no les funciona XDebug pese a seguir todos los pasos que han visto en otros lugares y que han probado y aún así no les funciona. Bueno…si estás listo ¡Empecemos!

1-Lo primero que tenemos que hacer es descargar la ultima versión de XAMPP desde su sitio oficial, este software recordad que es gratuito y no necesita de crack, una vez lo hayamos bajado lo instalamos en nuestro PC.

Nota: Todos los links de los archivos necesarios los tendréis al final del artículo.

2-Descargar las siguientes extensiones para Visual Studio Code:

• PHP Debug
• PHP Intelli Sense
• PHP Intelli Sense Crane (Opcional)

3-Descargar nuestra versión correspondiente de XDebug según la versión de PHP que tengamos instalada, para averiguarlo basta con abrir XAMPP y luego abrir su consola y escribir: php -v como se muestra en estas 2 fotos:

4-Ahora en la consola nos dirá la versión que tenemos de PHP al darle Enter, en base a esto es la versión de Xdebug que descargaremos, en mi caso elegí:

php_xdebug-2.7.2-7.3-vc15-x86_64.dll

Tienes que fijarte en que en los 2 numeritos que viene antes de vc que son los que indican la versión de PHP, los otros 3 que están antes son la versión de XDebug y lo que viene después de vc quiere decir si es para 32 o 64 bits, la que descargué sirve para ambos porque dice x86_64, indicando así que es para 32 y 64 bits

5-Una vez descargado nuestra versión de Xdebug procedemos a copiarla en la siguiente ruta:

C:\xampp\php\ext

Nota: Esta ruta es en donde se instaló tu versión de XAMPP, verifica la misma.

6-Después de esto nos dirigimos a nuestro archivo php.ini:

7-Una vez ahí pegamos al final del documento las siguientes líneas de código:

[XDebug]

zend_extension = C:\xampp\php\ext\php_xdebug-2.7.2-7.3-vc15-x86_64.dll

xdebug.remote_enable = 1

xdebug.remote_autostart = 1

Nota: zend_extension tiene que corresponder con la ruta en la que tenemos instalado XAMPP con la ruta hacia donde hemos copiados nuestra extensión de Xdebug con su nombre exacto y su extensión (.dll) Esto lo aclaro porque puede ser que lo instales en otra ruta o que en tu sistema se instale en Archivos de Programa (Program Files en Inglés) y entonces no corresponda la ruta, así como puede ocurrir si tu versión de PHP es distinta a la mía y tuviste que bajar una versión diferente de XDebug a la que tengo, pero si instalas la última versión de XAMPP esto no te debe preocupar, al no ser que salga otra versión mas moderna a partir de la fecha en que se publicó este artículo, pero se seguiría la misma metodología.

8-Ahora comprobamos que tenemos instalado y habilitado nuestro plugin de XDebug entrando nuevamente a la consola como se describe en el paso 3 y escribir lo mismo, pero esta vez nos deberá aparecer XDebug y su versión

9-Ahora vamos a cambiar la ruta de nuestro localhost para otra carpeta para que no nos aparezca la pantalla de Bienvenida de XAMPP cada vez que accedamos a nuestro localhost y evitarnos así tener que estar escribiendo la ruta de nuestro proyecto en la barra de direcciones del navegador, lo hacemos siguiendo estos pasos:

• Abrimos XAMPP
• Nos dirigimos a nuestra configuración de apache como se muestra en esta foto
• Buscamos la siguiente línea de código dentro de nuestro documento:

DocumentRoot "C:\xampp\htdocs”

<Directory "C:\xampp\htdocs">

• Esta la modificamos por la ruta de nuestra carpeta que queremos que sea la que nos abra por defecto nuestro servidor Apache, en mi caso es 1WEB y quedaría así:

DocumentRoot “C:\xampp\htdocs\1WEB”

<Directory “C:\xampp\htdocs\1WEB”>

Echo esto ya debería iniciar el servidor local desde esa carpeta por defecto al escribir localhost o 127.0.0.1

10- Ahora iniciamos nuestro servidor Apache desde XAMPP y abrimos nuestro navegador y accedemos a nuestro localhost desde la barra de direcciones escribiendo lo mismo: localhost, si todo ha ido bien debería aparecer el proyecto que tengamos ahí y si no tenemos ninguno pues simplemente se queda en blanco.

11-Ahora nos dirigimos a nuestro VS Code y abrimos nuestro proyecto php de prueba que os dejaré también al final de este artículo para que probeís todo esto, recordad que nuestro proyecto tiene que estar en la ruta que especificamos anteriormente en la configuración del apache (paso 9) si no no lo abrirá.

12-Ahora vamos a nuestro panel de Debug y añadimos un punto de interrupción a nuestro código PHP situando el mouse al lado izquierdo del numerito y haciendo 1 clic como se observa en esta imagen:

13- Luego nos dirigimos a este menú que se muestra en esta foto y seleccionamos la opción que dice: Listen for Xdebug, hecho esto nos aparecerá solo esta vez un menú para seleccionar un lenguaje, en nuestro caso elegimso PHP. Echo este hacemos clic en la flechita verde

14- Ahora una vez hecho esto abrimos nuestro navegador y refrescamos nuestro localhost, si todo ha salido bien al refrescar se debería abrir directamente nuestro VS Code o se nos pondrá en amarillo y parpadeando en la barra de tareas de Windows, esto nos indica que ya está depurando y en funcionamiento, al abrir VS Code nos mostrará en el lado derecho el valor de la variable al presionar el botón: Depurar paso a paso, si todo ha salido bien veremos que nuestra variable vale 5.

15- Recordad que cada vez que pausemos o lleguemos a la última línea depurable de nuestro código o pausemos XDebug, tendremos que volver a refrescar la página.

Ahora les dejo una ayuda para aquellos que lleguen a este artículo porque no les funcióna XDebug.

Solucionar Error no me funciona XDebug pese a seguir los pasos de Instalación:

OJO: No borres los archivos de XAMPP que están por defecto en la carpeta de htdocs porque yo los había borrado anteriormente de haber descubierto e instalado Xdebug y por eso no me funcionaba pese a que seguía todos los pasos, esto es importante. Si lo has hecho como me pasó a mí, tienes que volver a instalar XAMPP.

Puede que esto parezca algo simplón, pero créeme que te puede ahorrar tiempo si pruebas y pruebas por todos lados otros tutoriales de como instalar Xdebug y ves que no te sigue funcionando, esto a mi me ocurrió y si hubiera sabido esto antes me hubiera ahorrado pensar a ponerme que estaba haciendo mal y demás…

Bueno, esto ha sido todo, espero que te haya quedado muy claro. Si este artículo te ha servido o ayudado me gustaría que si fueses tan amable me lo dejaras saber en los comentarios. Si conoces un amigo que le podría interesar o tiene problemas o no sabe configurar correctamente XDebug, comparte este artículo con el copiando el link o mediante los enlaces sociales que están antes de la caja de comentarios. Muchas gracias por leer y a todos los que siguen el blog; nos vemos en el próximo artículo…Happy Coding 🙂

Links de los Archivos:

• XAMPP
• Xdebug
• PHP IntelliSense
• PHP Debug
• Marketplace Visual Studio Code (Por si quieres otra extensión)