xdebug + phpstorm + ubuntu + postman

Después de varios años de estar en el mundo de .net y al regresar a PHP, sentí la falta de un entorno para realizar depuración, nunca había configurado uno para trabajar con esta tecnología . Y pues una cosa que no puedo negar es que Microsoft con .Net tiene muchas  ayudas que brinda a los desarrolladores grandes beneficios al momento de buscar errores.

Por esto decidí iniciar la instalación del entorno y después de mucho  tropiezos lo logre y quiero compartir esta  experiencia con ustedes.

Este es mi actual entorno de trabajo es con Linux Mint y fue en el cual lo configure , pero para poder mostrar la instalación vamos a realizar una nueva instalación en una maquina virtual con el siguiente entorno.

• Sistema operativo : Ubuntu 17,10,
• Xampp 7.1.10 ( Apache 2.4.28, MariaDB 10.1.28, PHP 7.1.10, phpMyAdmin 4.7.4)
• IDE : Phpstorm 2017.2.4
• Xdebug 2.5.4

1. Versión de Ubuntu

2. Descargamos  xampp version 7.1.10 64 bit (https://www.apachefriends.org/es/download.html)

3. Instalamos xampp como root para esto realizamos las siguientes instrucciones en la terminal

a)     sudo su

b)     chmod +x xampp-linux-x64-7.1.10-0-installer.run

c)     ./xampp-linux-x64-7.1.10-0-installer.run

4. Después de instalar Xampp ,  iniciamos el servidor local

◦        sudo /opt/lampp/lampp start

5. IDE PhpStorm

a)     Descargamos nuestro IDE  (https://www.jetbrains.com/phpstorm/download/#section=linux)

b)     Descomprimimos el archivo ejecutando el siguiente comandos en la terminal :

·       tar -xvf PhpStorm-2017.2.4.tar.gz

·       cd PhpStorm-172.4155.41/bin

·       ./phpstorm.sh

c)     Para el caso de no tener una licencia seleccionamos la opción de evaluación.

6. Hasta este punto ya tenemos instalado nuestro servidor local y nuestro IDE . Ahora procedemos a realizar la instalación del xdebug

7. En este momento ya podríamos trabajar de forma tradicional, creando nuestros proyecto y probando retornando valores con “echo”  o “print”. Pero vamos a instalar nuestro la extensión de php xdebug para poder hacer depuración.

8. Con nuestro servidor local iniciado, ingresamos en un navegador al localhost phpinfo (“http://localhost/dashboard/phpinfo.php”), para obtener las características de nuestro servidor.

9. Copiamos el contenido de la primera tabla y procedemos a ingresar a la pagina de xdebug ( https://xdebug.org/wizard.php )que nos permite validar que versión requerimos de la extensión , según las características de nuestro servidor. 

10. Realizamos clic en el botón   “Analyse my phpinfo() output” y obtenemos la versión recomendada de xdebug para nuestro servidor y las instrucciones de como realizar la instalación.

11.  Para el servidor local la versión recomendada es la xdebug-2.5.4.tgz, descargamos y procedemos a realizar los pasos de instalación , con algunas modificación para algunos de ellos.          

a)     Paso 4, nos solicita instalar php7.0-dev, pero debemos instalar php7.1-dev

b)     Paso 5, fue el que mas me dio problema  y no es porque falle en el momento de realizarlo , sino que al momento de ejecutar el comando ( ./configure  ) , este queda vinculado al php-config del apache del sistema que trae ubuntu por defecto y no con el  apache que trae xampp.

·       Para esto tenenos que adicionar -with-php-config=”Ubicación de nuestro php-config xampp”,  para nuestro caso quedaría de la siguiente manera :

▪        ./configure -with-php-config=/opt/lampp/bin/php-config

c)     Paso 7, es copiar el resultado de nuestro make, el archivo xdebug.so a la ubicación que deseemos , mi caso la ubique en la carpeta ( /opt/lampp/lib/php/xdebug/ ), para lo cual cree el folder xdebug,  quedando así el comando  :

·       sudo mkdir /opt/lampp/lib/php/xdebug

·       sudo cp modules/xdebug.so /opt/lampp/lib/php/xdebug/xdebug.so

d)     Paso 8, para este paso editamos y registramos en el php.ini de nuestro xampp los valores para configurar la extensión xdebug

▪        sudo gedit /opt/lampp/etc/php.ini

▪        Pegamos al final del archivo estas lineas

·       [Xdebug]

·       zend_extension= /opt/lampp/lib/php/xdebug/xdebug.so

·       xdebug.remote_enable = 1

·       xdebug.remote_port = 9000

·       xdebug.idekey = PHPSTORM

·       xdebug.remote_autostart = 1

·       xdebug.max_nesting_level = 512

·       xdebug.remote_host=127.0.0.1

·       xdebug.file_link_format = phpstorm://open?%f:%l

Nota : la vairable xdebug.idekey = PHPSTORM y xdebug.remote_autostart = 1, permite al sistema iniciar la sesión automáticamente. Esto facilita el trabajo con api rest y hacer pruebas con Postman u otro similar.

e)     Paso 9,  reiniciamos nuestro servidor local

▪        sudo /opt/lampp/lampp stop

▪        sudo /opt/lampp/lampp start

12. En este momento ya tenemos configurado nuestro entorno de depuración, para validar la configuración  ingresamos a nuestro localhost (http://localhost/dashboard/phpinfo.php), donde  podemos ver que ya se encuentra la información del xdebug

13. Ingresamos a PhpStorm y creamos un nuevo proyecto

14. Seleccionamos para el ejemplo:

a)     PHP Empty Project

b)     Location : /opt/lampp/htdocs/ejemplo

c)     PHP language level : 7,1

d)     CLI Interpreter : tenemos que crear nuestra configuración, pero la ventana no alcanza a mostrar el boton para seleccionar la creación.

e)     Creamos el proyecto e internamente configuraremos el CLI Iterpreter

15. Dentro e nuestro proyecto procedemos a configurar nuestro CLI Interpreter

a)     Settings…

b)     Languages & Frameworks → PHP

·       en esta parte encontramos la configuración del CLI Interpreter.

c)     Seleccionamos Other local

d)     Colocamos en PHP executable la ruta /opt/lampp/bin/php

·       En este momento el sistema nos muestra la versión de PHP y la versión del Xdebug

16. Aplicamos los cambios y listo , nuestro entorno de depuración esta configurado . Ahora vamos a probarlo.

17. Creamos un archivo index.php y colocamos alguna lógica que nos pueda permitir mirar el funcionamiento de la depuración

18. ya para terminar activamos el botón de “listening for debug connections”, que parece un teléfono en la parte superior derecha de nuestro IDE

19. Cargamos nuestra pagina index.php que se encuentra en nuestro proyecto en la ruta (/opt/lampp/htdocs/ejemplo). Desde el navegador cargamos ( http://localhost/ejemplo/ ).

20. El sistema automáticamente nos carga el PhpStorm y nos pide autorización de seguimiento para el archivo index.php

21. Aceptamos y nos carga el archivo y linea en el cual colocamos un punto de interrupción o breakpoint .

22. . Con la tecla F8 vamos paso a paso y con la tecla F9 continuamos la ejecución.

Espero que este tutorial sea útil y les sirva para poder configurar sus entornos y realizar proyectos de una mejor manera.