7 days of WordPress plugins, themes & templates - for free! Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Creative Coding

Depurar Temas y Plugins de WordPress Con Eclipse y Xdebug

Read Time: 7 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Depurar PHP con un editor de texto y alguna combinación de invocaciones echo, print_r y exit es suficiente cuando trabajas con código sencillo.  Pero, cuando tu rompedor plugin de WordPress crezca hasta alcanzar miles de líneas de código ocupando múltiples archivos, este método acabará siendo rápidamente tedioso y proclive a los errores. Cuando llegues a ese punto, será el momento de licenciarte en un depurador remoto de modo que puedas atravesar cada línea de tu código con rapidez y facilidad para localizar problemas.


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 podría ser un Entorno de Desarrollo Integrado (IDE, Integrated Development Environment). En este tutorial hablaremos sobre como usar el depurador remoto xdebug y el IDE de código abierto Eclipse juntos para procesar el código de WordPress y resolver errores.


Paso 1 Configurar Tu Entorno de Desarrollo

Asumo que ya tienes funcionando Apache/PHP/MySQL y una instalación operativa de WordPress ejecutándose en tu estación de trabajo local. Si no es así, lee nuestro tutorial sobre cómo configurar un entorno de desarrollo para WordPress en Windows.

Instalar Xdebug

Las instrucciones más actuales las puedes encontrar en la web de xdebug.

Si estás en Windows usando XAMPP para el desarrollo, el binario de xdebug ya estará incluido y puedes pasar a configurar PHP.

Si estás en Mac OS X, te recomendaría recopilar de las fuentes o usar PECL para la instalación.

Si usas Linux, podrías realizar la instalación usando tu gestor de paquetes de tu distribución, o recopilar de las fuentes/usa PECL. 

Configurar PHP para Cargar Xdebug

Necesitarás añadir estas dos líneas en tu archivo php.ini (el cual debe estar en /etc/php.ini o c:\xampp\php\php.ini o en cualquier otro sitio dependiendo de tu plataforma):

Una vez hecho, reinicia tu servidor Apache. Existen otras muchas opciones que puedes configurar más tarde que se explican en la documentación de xdebug, pero con esto deberíamos tener suficiente para empezar.

Verifica Xdebug

Crea una página llamada test.php en la carpeta raíz de tu web, y añade una llamada a la función phpinfo():

Busca por xdebug, y deberías encontrar una sección al final de la página similar a lo siguiente:

Instalar Eclipse y PDT

Descarga Eclipse classic desde la página de descarga de Eclipse, descomprímelo, cópialo en el directorio de tus aplicaciones, y después ábrelo.

Pulsa sobre el menú de ayuda "Help", luego "Install Software". Bajo la opción "Work With", selecciona el sitio "Indigo". Selecciona una de las casillas "PHP Development Tools (PDT) Feature", y después pulsa "Next".

Haz clic a través de los paso restantes del instalador para finalizar, después reinicia Eclipse cuando te avise.

Configura Eclipse para Escuchar a Xdebug

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

Después selecciona la opción "Other", selecciona PHP, luego haz clic en "OK":

Pulsa el botón PHP para ir a la perspectiva PHP:

Luego dirígete a "File" -> New -> PHP Project. Esto abrirá la ventana "New PHP Project". Puedes indicar "wordpress" o lo que quieras como nombre para tu proyecto. Deberías seleccionar la opción "Create project at existing location (from existing source)" bajo "Contents" y dirígete a tu directorio raíz de WordPress. Deja las opciones predeterminadas para el resto de secciones, después pulsa el botón "Finish".

Ves a "Window -> Preferences -> PHP -> Debug" y cambia el ajuste "PHP Debugger" de Zend a XDebug.

Después dirígete a "Window -> Preferences -> PHP -> Debug -> Installed Debuggers" y haz un doble clic sobre XDebug. Cambia la opción "Accept remote session (JIT)" de "off" a "localhost" y pulsa "OK".

Paso 2 Depura Tu Código

Establece Puntos de Interrupción

Un punto de interrupción es una señal que le indica al depurador que pare la ejecución del programa en una cierta línea de código de forma que puedas inspeccionar lo que está sucediendo.

Es sencillo. Simplemente abre el archivo que contiene el código que quieres inspeccionar (por ejemplo el archivo index.php del tema que estés desarrollando). Después, en el lado izquierdo de la ventana del archivo, realiza un doble clic sobre el área a la izquierda de la línea. Un punto azul debería aparecer tal y como ves en la línea 20 del ejemplo inferior (el index.php del tema twentyeleven).

Comienza una Sesión Xdebug

Tras establecer un punto de interrupción, abre en el navegador tu sitio WordPress local,  añadiendo la siguiente cadena de consulta XDEBUG_SESSION_START=wordpress como ves en el ejemplo:

Esto le indicará a xdebug que establezca una cookie que busque cargas subsecuentes de la página. Si todo está configurado correctamente, deberías ver una notificación que te comunique que Eclipse ha recibido una sesión entrante. Pulsa "OK" para aceptarla, y después la vista Debug se debería abrir en la primera línea de index.php.

Puedes inspeccionar variables que estén actualmente en el marco usando la ventana del inspector de "Variables" de la derecha.  En el ejemplo de arriba, no existen variables locales que buscar, solo las variables globales $_COOKIE, $_ENV, $_FILES, $_GET, $_POST, $_REQUEST, $_SERVER and $GLOBALS.

Procesar el Código

Para ver un ejemplo de información más útil, necesitarás procesar algunas líneas de código para llegar a The Loop.  La ventana "Debug" de Eclipse tiene varios controles que deberías entender: 

  1. Eliminar Todos Los Lanzamientos Terminados – Limpiar sesiones previas
  2. Resumen – Resume la ejecución del código. Si no tienes otros puntos de interrupción establecidos, el programa terminarás de cargar con normalidad.
  3. Suspender – No es aplicable a la depuración de PHP.
  4. Terminar – Para la ejecución del programa y la depuración.
  5. Desconectar – Para el depurado, pero continúa ejecutando el programa.
  6. Ingresa – Sigue el código línea por línea conforme se ejecuta, incluidas las funciones de llamada. Esto es útil para depurar una función en particular.
  7. Saltar – Saltar mostrando la ejecución de una llamada de función particular. La ejecución será resumida en la siguiente línea.
  8. Saltar a la Respuesta – Si estás dentro de una función, esto saltará a su respuesta.
  9. Caer Al Marco – No se aplica a la depuración de PHP.
  10. Usar Filtros de Paso – No se admite en Eclipse PDT

Pulsa una vez el botón "Resume". El cliente de depuración Eclipse debería ahora pausarse en el punto de interrupción que estableciste en el archivo index.php del tema.

Pulsa el botón "Step Into". Esto te llevará a la función "have_posts" de WordPress. Pulsa nuevamente "Step Into", y verás como se muestra la variable $wp_query en la ventana "Variables".

Pulsa "Step Return" para salir de la función "have_posts", y estarás de vuelta en el archivo index.php.  En el ejemplo, esto luego te dejará en una llamada a la función "twentyeleven_content_nav". Puedes o bien seguir para ver que sucede si estás interesado, o saltarlo si no lo estás.

Pulsando "Step Over" te llevará a la llamada del Loop. Introducirte en "the_post" te enseñará mucho sobre como WordPress procesa los datos y los muestra en la página durante el Loop. No pierdas ojo a la ventana "Variables" para vigilar como las variables locales y globales cambian conforme las funciones se ejecutan.

También puedes procesar tu propio código de la misma manera para ver como son manipuladas las variables conforme se ejecuta el código.

Cuando hayas visto todo lo que querías, pulsa el botón "Resume" y tu blog terminará de cargarse cono normalmente.

Si pulsas un enlace hacia otra página del navegador, advierte como el depurador se cargará nuevamente aunque la cadena de consulta XDEBUG_SESSION_START no esté añadida al final de la URL.

Cerrando Tu Sesión de Depuración

Cuando ya no quieras que Eclipse entre en modo de depuración al cargar una página de tu blog local, simplemente introduce una llamada de URL que busque esto en tu navegador:

Esto eliminará la cookie de xdebug, y tus páginas se cargarán con normalidad hasta que abras otra sesión con xdebug.

¿Usas Eclipse y Xdebug para el desarrollo extremo con WordPress? Si es así, ¿tienes algún consejo adicional? Si no, ¿qué te frena a empezar?

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.