Debugging Laravel

Depuración de una aplicación Laravel con Xdebug

Depurar una aplicación mediana o grande solo con var_dump() o dd() puede llegar a ser lento e ineficaz, para estos casos podemos hacer uso de una conocida extensión de Php llamada XDebug, creada por Derick Rethans, el mismo desarrollador de la conocida clase de Php DateTime(). En este articulo te mostraremos como depurar tus aplicaciones de Laravel con Xdebug.

Xdebug es una extensión de Php que nos permite hacer debugging y profiling de nuestras aplicaciones, mediante Xdebug podemos asignar breakpoints en el código y ver los valores “at run time”.

Actualmente es utilizada por muchos desarrolladores profesionales de Php, y se ha vuelto una extensión bastante conocida en el mundo de la programación. Antes de iniciar con la instalación vamos a conocer un termino importante en este tema.

¿Qué es un breakpoint?

Xdebug-phpstorm

Un breakpoint es un marcador en nuestro código que le indica a Xdebug (o cualquier herramienta para debugging) que cuando llegue a ese punto en el código deberá detenerse y esperar. ¿Cuál es el beneficio de esto? Imaginemos que estás intentando encontrar la razón de porque uno de nuestros foreach no está entrando  en la condición que queremos, ahora imaginemos que hay múltiples variables en ese punto del código y es difícil saber cuál es el valor de cada una de ellas en cada iteración del foreach, pero si pudiéramos detenernos y ver exactamente cada valor seria de gran ayudar para encontrar el error. Para esto existen los breakpoints.

Configurando Xdebug en Homestead

Ahora que ya entendemos la utilidad de los breakpoints y Xdebug, describiré los pasos necesarios para configurarlo en nuestro entorno de desarrollo utilizando Homestead y luego pasaremos al IDE que en este caso será Phpstorm.

Afortunadamente para los usuarios de Homestead, esta extensión ya viene instalada por defecto y lo único que vamos a tener que hacer es ajustar la configuración para que Xdebug se pueda conectar remotamente a nuestro IDE. Por defecto Xdebug viene configurado para conectarse a localhost, este sería el caso si tuviéramos nuestros entorno de desarrollo instalado en nuestro sistema operativo base.

Para configurar el “remote debugging” entramos a nuestra máquina Homestead con vagrant ssh en la ubicación donde tengamos instalado Homestead, normalmente ~/Homestead :

Para confirmar que tenemos Xdebug activado ejecutamos php -v y deberíamos ver algo similar a:

Podemos ver  que Xdebug v2.5.0rc1 está instalado. Esto solo quiere decir que la extension está correctamente configurada en la línea de comandos de Php, pero para poder hacer debugging de nuestra aplicación Laravel vamos a tener que comprobar que Php fpm está también correctamente configurando y la extensión cargada.

Comprobar Php FMP

La forma más sencilla es poner un phpinfo();  al inicio de algún controlador, y navegar a esa página, esto nos mostrará la página de configuración de Php, y ahí debemos de tener una sección de Xdebug similar a esto:

screen-shot-2016-12-19-at-13-45-05

Ya que confirmamos que  se encuentra cargado correctamente via cli y Php fpm, ahora vamos a configurar las opciones necesarias para que sea capaz de conectarse a nuestro IDE.

Entramos nuevamente a Homestead por SSH y abrimos el archivo de configuración de Xdebug correspondiente a la versión de Php que usamos, esto es debido a que Homestead es una máquina enfocada al desarrollo e incluye múltiples versiones de Php cada una con sus extensiones y archivos de configuración, por lo que si estamos usando php 7.0, el archivo en cuestión se encuentra en: /etc/php/7.0/fpm/conf.d/20-xdebug.ini . Si tienes problemas para encontrar el archivo xdebug.ini correcto, mira la página phpinfo(), y busca la ruta al archivo xdebug.ini, ese es el que la extensión esta usando.

Abrimos ese fichero con nuestro editor de textos preferido (generalmente vim o nano)

Y nos aseguramos de tener la siguiente configuración de esta forma:

El parámetro más importante en esas opciones es el xdebug.remote_host que le está diciendo a que host debe de conectarse Xdebug. Si no has cambiado la configuración red de Homestead la ip seguramente será 192.168.10.10 y en tu ordenador 192.168.10.1 esta es una red virtual que Vagrant crea para comunicarse entre sí, confirma que las direcciones ip coinciden para evitar problemas.

Una vez que hayas hecho esa modificación, guarda tus cambios, en nano ctrl + o  y cierra el editor ctrl + x  o en vim :wq

Ahora para que los cambios tenga efecto reinicia php fpm con el siguiente comando:

Si todo es correcto, actualizamos la página que tenemos con phpinfo() y ahora en los detalles de configuración de Xdebug debemos de ver reflejados estos nuevos parámetros, pon especial atención al xdebug.remote_host.

Configurando Phpstorm con Xdebug

El siguiente paso es la configuración del IDE o editor de textos. Mi experiencia usando Xdebug es con Phpstorm por lo que detallaré este proceso. Al final del post pondré algunos links a otros sitios donde es explican la parte de configuración específica para otros editores.

Abrimos Phpstorm si no lo teníamos ya abierto con nuestro proyecto. Vamos a crear un breakpoint en la línea donde escribimos phpinfo(); esto se hace haciendo click al lado del número de línea (como en la animación del inicio) y hacemos click en el pequeño teléfono en la barra de herramientas, esto habilita la escucha de llamadas Xdebug por el puerto 9000 que es el puerto defecto de XDebug, si tienes windows o algún firewall activado, recuerda permitir las conexiones en este puerto.

screen-shot-2016-12-19-at-14-06-59

Para activar Xdebug de lado del cliente es necesario crear una cookie especial, para evitarnos el tener que estar creando esta cookie cada vez que deseamos hacer debug con Xdebug podemos instalar una extensión para el navegador, estas son mis dos recomendaciones:

Chrome: xdebug-helper
Firefox: the-easiest-xdebug

Lo siguiente será habilitar Xdebug desde la extensión que acabamos de instalar y luego actualizar la página en nuestro navegador (apuntando al controlador con phpinfo) y si todo salió correctamente, tendremos un cuadro de dialogo de Phpstorm preguntándonos si queremos aceptar la conexión entrante.

Después de esto seguramente veremos el siguiente mensaje:

screen-shot-2016-12-19-at-12-08-58

Esto es debido a que Phpstorm no tiene el ‘mapping’ entre nuestro proyecto local y el código dentro de Homestead, para solucionar esto debemos establecer manualmente esta relación, abrimos la configuración de Phpstorm y nos vamos a Languages & frameworks > Php > Servers y agregamos un mapping a la carpeta raíz del proyecto:

screen-shot-2016-12-19-at-12-09-39

Guardamos los cambios y volvemos a actualizar la página, esta vez veremos que Phpstorm se detiene en la línea exacta que hemos definido. Ahora podremos inspeccionar los valores de las variables como mostré al inicio de este post. Con esto hemos terminado de configurar correctamente Xdebug y ahora puedes crear breakpoints en cualquier parte de tu aplicación.

Conclusión

Como podemos ver,  Xdebug es una potente herramienta para depuración de aplicaciones no solo Laravel, pero cualquiera en Php.

En otro post mas adelante describiré como depurar Commands de Laravel ejecutados desde artisan. Si seguiste esta guía y/o tienes experiencia con Xdebug dime en los comentarios que te parece el uso de Xdebug en comparación con dd  y var_dump. O si eres nuevo en el mundo de Xdebug menciona que herramientas has usando anteriormente para la depuración de código.

Finamente pongo enlaces a guías sobre como configurar Xdebug en Sublime Text y Atom.

¡Hasta la próxima!

  • Dennis Castro

    Excelente post, homestead ayuda con eso de traer la extensión ya instalada. desafortunadamente en mi caso uso la version de apache y php que trae mac (OS Sierra)

    • gublin

      En mac yo uso MAMP y siempre he usado xdebug sin problemas y en windows con WAMP también. De todas formas instalar xdebug en donde lo uses es muy sencillo, solo hay que adaptarlo un poco, seguro que en google encuentras fácilmente algo al respecto.