Análisis y Programación: Depurar Temas y Plugins de WordPress Con Eclipse y Xdebug

sábado, 17 de agosto de 2019

Depurar Temas y Plugins de WordPress Con Eclipse y Xdebug

Hay veces que no basta con las herramientas de WordPress y necesitamos depurar su código interno para hacer lo que queramos y tener más control sobre nuestra página web o blog.

Un depurador remoto, es un programa instalado en el lado del servidor que intercepta todo el código PHP que es ejecutado. Entre otras funciones, tiene la capacidad de parar la ejecución del código a mitad y pasar información a un cliente externo, como un Entorno de Desarrollo Integrado (IDE, Integrated Development Environment). mostraremos cómo usar el depurador remoto XDebug y el IDE de código abierto Eclipse juntos para procesar el código de WordPress y resolver errores.

En la mayoría de sitios que he visitado para buscar información te cuentan la chorrada de que en el archivo wp-config.php hay que poner la entrada define ('WP_DEBUG' = , true); y a correr, como si todo el mundo supiéramos ya como montar un entorno de desarrollo y depuración para WordPress. No ha sido fácil encontrar información de cómo hacer esto, pero esto es lo que he conseguido después de buscar mucho y probar. Esta guía es para Linux, pero se puede aplicar prácticamente igual (excepto los comandos de Linux) para instalarlo sobre Windows.

El entorno de desarrollo

Se supone que ya tenemos instalado un servidor Apache/PHP/MySQL y una instalación de WordPress. Si no es así, aquí están las instrucciones para hacerlo.

Instalar Xdebug

Para instalar XDebug en el servidor tenemos que abrir un terminar con permisos de root y escribir.

sudo apt-get install php-xdebug

Reiniciamos el servidor apache, para ello basta con pulsar el botón restart del servidor apache de la carpeta Manage Servers del panel de administración de Bitnami-LAMP. Si no vemos este panel, lo podemos arrancar desde el terminal de Linux con:

sudo cd /opt/wordpress

y luego escribimos

./manager-linux-x64.run

Esto nos abrirá esta pantalla en la que en la pestaña Manage server podemos poner en marcha MySQL y el servidor Apache.

Reiniciar el servidor Apache desde Bitnami

Ahora abrimos con un editor de texto el archivo xdebug.ini en este caso con con:

sudo nano /etc/php/7.0/mods-available/xdebug.ini

Y le añadimos al final las líneas

Xdebug.show_error_trace = 1

Zend_extension=xdebug.so

Y salimos grabando cambios con ctrl X

Configurar PHP para Cargar Xdebug

Necesitamos añadir estas líneas en el archivo php.ini (suele estar en /opt/wordpress/php/etc o en cualquier otro sitio dependiendo de la plataforma):

WINDOWS

LINUX

[XDebug]

zend_extension="/opt/wordpress/php/lib/extensions/xdebug.so"

xdebug.remote_enable=true

xdebug.remote_autostart=true

Hecho esto, reiniciamos el servidor Apache.

Verificar Xdebug

Creamos un archivo llamado test.php en la carpeta raíz de nuestra web,(/opt/wordpress/apps/wordpress/htdocs/ y añadimos una llamada a la función phpinfo():

<?php phpinfo(); ?>

Ponemos en un navegador

web localhost/wordpress/test.php y nos debe mostrar una pantalla como esta en la que buscando por xdebug, debemos encontrar una sección al final de la página similar a lo siguiente.

Con esto ya tenemos XDebug instalado y funcionando.

Instalar Eclipse

Antes de instalar eclipse en windows hay que instalar JDK y JRE de java

Entramos en la página oficial de eclipse www.eclipse.org y descargamos el paquete. Para mí se descargó un paquete llamado "eclipse-inst-linux64.tar.gz" sabiendo que dispongo un sistema operativo con arquitectura 64 bits. ¡Ojo, recuerda bien el nombre del paquete descargado!

En descargas podemos ver el paquete que nos ha descargado.

Una vez descargado, ejecutamos el archivo dándole permisos de ejecución y hacemos doble click sobre él. Esto extrae los archivos que nos llevamos a /opt.

Para que Eclipse pueda ejecutarse de forma correcta necesitamos tener instalado el OpenJDK o el Sun Java. Para instalar OpenJDK ejecutamos el siguiente comando:

sudo apt-get install openjdk-8-jdk

Ahora hacemos doble click sobre el archivo eclipse y nos abre el programa.

Una vez abierto eclipse, sobre el menú de ayuda "Help", pulsamos "Install Software". Que está en la opción "Work With", seleccionamos –All available sites- y elegimos PHP Development tools y PHP Development tools SDK.

PHP Development tools y PHP Development tools SDK.

Pulsamos next.

Configurar Eclipse para Escuchar a Xdebug

Ahora en el menú Windows elegimos preferences -> Debug-> Debuggers.

Aplicamos, volvemos de nuevo y hacemos doble click sobre XDebug, esto nos abre otra pantalla en la que elegimos el puerto 9000 y localhost.

Habilitamos la perspectiva PHP pulsando el botón Open Perspective de la esquina superior derecha:

seleccionamos PHP.

Pulsamos el botón PHP para ir a la perspectiva PHP

Desde "File" pulsamos New -> PHP Project. Esto abrirá la ventana "New PHP Project". Ponemos el nombre del proyecto wordpress. Seleccionamos la opción Create project at existing location (from existing source) bajo Contents y vamos al directorio raíz de WordPress. Dejamos las opciones predeterminadas para el resto de secciones, y pulsamos Finish.

Abrimos un archivo y hacemos doble click en la parte izquierda para poner puntos de ruptura.