Configurar Xdebug 3 con Docker y PHPStorm

Hola Devs¡

Hoy vengo a explicar como se configura Xdebug 3 con Docker en nuestros proyectos para poder hacer ‘debug’ o depurar nuestro codigo paso a paso.

No cabe decir que deberas tener instalada la extension de Chrome de Xdebug, dejo el enlace aqui para instalarlo. Una vez lo tengas instalado, pulsas boton derecho > Opciones > Selecciona el IDE que estes usando, en mi caso PHPStorm.

Pasos:

1- Para ello hay que añadir la extension en nuestro Dockerfile de PHP-FPM 7.4:

FROM php:7.4-fpm

... (otras librerias que necesite tu proyecto)

RUN pecl install xdebug-3.0.4
&& docker-php-ext-enable \
        xdebug \

2- Hay que crear varios archivos dentro de nuestra carpeta /docker del proyecto y meter dentro lo siguiente:

  • /docker/php-fpm/conf.d/xdebug.ini
zend_extension=xdebug
[xdebug]
xdebug.mode=develop,debug
xdebug.client_host=host.docker.internal
xdebug.start_with_request=yes
  • /docker/php-fpm/conf.d/error_reporting.ini
error_reporting=E_ALL

3- Y teniendo la siguiente configuracion en nuestro docker-compose.yml:

... Otros servicios definidos como nginx, mysql, etc.

php-fpm:
      build: docker/php-fpm
      container_name: php_fpm
      working_dir: /application
      volumes:
        - .:/application:cached
        - ./docker/php-fpm/php-ini-overrides.ini:/etc/php/7.4/fpm/conf.d/99-overrides.ini
        - ./docker/php-fpm/conf.d/xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
        - ./docker/php-fpm/conf.d/error_reporting.ini:/usr/local/etc/php/conf.d/error_reporting.ini
      environment:
          PHP_IDE_CONFIG: serverName=server-xdebug

4- Volvemos a lanzar nuestros contenedores pero compilandolos para que vuelva a generar de nuevo los archivos que hemos mapeado como volumenes en docker:

$ docker-compose up -d –build –force-recreate

4- Ahora en nuestro IDE tenemos que configurar el servidor para Xdebug de la siguiente forma:

Atencion: Aqui es importante marcar la opcion «Break at first line in PHP scripts» por primera vez, y despues desmarcarla para que no nos moleste constantemente.
Atencion: En esta pantalla, pulsamos el + para añadir un nuevo servidor. La clave esta en ponerle el mismo nombre que pusimos en nuestro docker-compose.yml en la parte de environment, en mi caso «server-xdebug», añadir el host, el puerto, y el directorio donde se mapea nuestro proyecto, en mi caso /application.

5- Por ultimo, solo nos queda poner un breakpoint en una parte de nuestro codigo, habilitar el telefono en PHPStorm y en el navegador y automaticamente deberia parar en el IDE.

6- Para que no moleste, ahora deberemos desmarcar la opcion «Break at first line in PHP scripts» que marcamos en el paso anterior.

De esa forma, ya deberia funcionar todo correctamente y debereis ser capaces de usar las herramientas que trae Xdebug.

Si quereis sacar la info de xdebug, podeis usar este metodo que os sacará por pantalla todo lo relacionado con ello:

xdebug_info();

Espero que os haya gustado, no olvideis compartirlo ¡

Hasta la proxima.

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.