Tutorial DebugKit para CakePHP

Hoy en día es necesario desarrollar aplicaciones web consistentes y extensibles, por fortuna de los desarrolladores contamos con muchas herramientas a nuestra disposición para poder ofrecer aplicaciones mucho mas robustas y eso es lo que nos ofrece el framework CakePHP, la flexibilidad de poder desarrollar aplicaciones web de manera fácil, robusta y extensible. Por otro lado CakePHP nos ofrece una herramienta para poder depurar nuestras aplicaciones desarrolladas en este framework el cual nos ayuda muchísimo permitiéndonos controlar el flujo de nuestro código y en este artículo quiero hablarte de esta útil herramienta.

DebugKit nos ofrece una barra de herramientas de depuración para el desarrollo de aplicaciones CakePHP, con esta herramienta nosotros podemos controlar tanto el flujo de nuestra aplicación como cada una de las peticiones que realizamos al momento de ejecutarlo, pero no solo eso, esta herramienta tiene varias funciones más, por tal razón es que he realizado un tutorial desde cero, es decir, desde la instalación hasta como poder implementar tu propio panel de depuración con DebugKit. Así es que prepara tu proyecto en CakePHP porque comenzamos.


Tutorial DebugKit para CakePHP

Instalación

Para la instalación de DebugKit partiré de una instalación nueva de CakePHP esto con el propósito de mostrarte desde cero como instalar esta herramienta de depuración, no voy describir los pasos para la instalación de CakePHP porque ya lo hicimos en un anterior artículo como parte del curso de CakePHP que estoy desarrollando, el propósito esta vez es centrarnos en DebugKit, dicho esto una vez realizados los pasos de la instalación de un nuevo paquete de CakePHP y accediendo a la página principal de nuestra aplicación recién instalada obtendremos esto:

Instalación DebugKit

Como puedes observar tenemos un mensaje de alerta pendiente (el que esta con fondo amarillo) donde nos indica que nos falta instalar DebugKit el depurador de CakePHP, para proceder a ello vamos a seguir los pasos que te describo a continuacion:

IMPORTANTE: Para el correcto funcionamiento de DebugKit es importante que cuentes con un servidor que contenga una versión de PHP 5.3.0 para adelante y también una instalación de CakePHP 2.2.0 para adelante.

1. Nos dirigimos al siguiente enlace https://github.com/cakephp/debug_kit y descargamos el paquete DebugKit o también podemos clonarlo a nuestro proyecto de CakePHP ya que estamos en el repositorio del framework y del depurador en concreto.

2. Se debe descomprimir el paquete descargado en el directorio app/Plugin/DebugKit , si te das cuenta tienes que renombrar el paquete una vez descomprimido a «DebugKit».

3. Para cargar el paquete tenemos que dirigirnos a app/Config/bootstrap.php y añadir la siguiente linea de código:

[php]

//DebugKit
CakePlugin::load(‘DebugKit’);

[/php]

Puedes agregarlo al final de todo el archivo, no habrá ningún problema.

4. Para que aparezca la barra de herramientas en nuestro proyecto CakePHP tenemos que dirigirnos a app/Controller/AppController.php y dentro de la clase AppController llamamos al componente DebugKit.Toolbar nuestro código tiene que ser similar a este:

[php]

class AppController extends Controller
{
    public $components = array(‘DebugKit.Toolbar’);
}

[/php]

5. Debemos dirigirnos a app/Config/core.php y verificar la siguiente sentencia:

[php]

Configure::write(‘debug’, 2);

[/php]

Lo que estamos haciendo acá es verificar el nivel de depuración, originalmente esta en 2, debes dejarlo así, no quiero omitir este paso porque algunas veces puedes encontrarte con proyectos ya avanzados donde pueden tener modificado este valor entonces no esta por demás verificarlo, así evitamos un dolor de cabeza extra 8-)

6. Nos dirigimos a app/View/Layouts/default.ctp y eliminamos la siguiente sentencia de nuestro layout:

[php]

<?php echo $this->element(‘sql_dump’); ?>

[/php]

Lo que estamos haciendo es eliminar el elemento sql_dump de nuestro template actual (puedes tambien comentarlo) de lo contrario no se mostrarían nuestras consultas en el DebugKit.

Y eso es todo, si nos dirigimos a la página de inicio de nuestro proyecto veras que todos los mensajes se encuentran de color verde, incluido el mensaje de instalación de DebugKit, quiere decir que hicimos todo correctamente. Por otro lado si te fijas también en la parte superior derecha de tu página de inicio podrás visualizar un icono CakePHP el cual corresponde a la barra de DebugKit.

Instalación DebugKit


Barra de herramientas de DebugKit

Instalación DebugKit

La barra de herramientas DebugKit se compone de varios paneles, que se muestran haciendo clic en el icono de CakePHP en la esquina superior derecha de tu página principal. Cada panel tiene su propósito y continuación te describo cada uno de ellos:

IMPORTANTE: Para mostrar el funcionamiento de los paneles de la barra de herramientas de DebugKit lo hice bajo un proyecto ya avanzado eso con el propósito de que puedas ver con un ejemplo real como el depurador recopila información de un proyecto en CakePHP.

1. History: Nos muestra las ultimas 5 solicitudes previas que hicimos en el proyecto, esto es útil cuando queremos depurar alguna re dirección.

Panel History DebugKit

2. Session: Nos muestra información de la sesión actual en la que se encuentra nuestra aplicación.

Panel Session DebugKit

3. Request: Muestra información sobre las peticiones actuales, POST, GET, parametros que utiliza el framework, informacion de cookies y rutas actuakles.

Panel request DebugKit

4. Sql log: Nos muestra consultas SQL que ejecutamos actualmente.

Panel Sql Log DebugKit

5. Timer: Nos muestra el pico de memoria utilizada como también los tiempos de petición en ms.

Panel Timer DebugKit

6. Log: Nos muestra si hubo alguna entrada en el archivo log de cada solicitud.

Panel Log DebugKit

7. Variables: Nos muestra todas las variables establecidas en el controlador.

Panel Variables DebugKit

8. Environment: Nos muestra las variables de entorno utilizadas tanto con CakePHP como con PHP.

Panel Environment DebugKit

9. Include: Muestra tanto rutas como archivos incluidos en la aplicación web que estamos trabajando.

Panel Include DebugKit


Configuración de los paneles de DebugKit

Una de las cosas agradables de este depurador es que puedes personalizar la barra de herramientas, por ejemplo puedes ocultar algunos paneles que no utilizas y combinarlos de acuerdo a tus necesidades, también puedes modificar parámetros de cada uno de estos paneles. Como ejemplo vamos a realizar cambios en la barra de herramientas, voy a quitar los paneles Log y Variables , también voy a cambiar el parámetro del panel History de tal forma que en vez de mostrarme las ultimas 5 solicitudes me muestre ahora las ultimas 10 solicitudes. Para ello vamos a modificar la llamada al componente que hicimos en el archivo AppController.php dentro de la clase AppController:

[php]
class AppController extends Controller
{
public $components = array(‘DebugKit.Toolbar’ => array(‘panels’ => array(‘log’ => false, ‘variables’ => false), ‘history’ => 10));
}
[/php]

Si te fijas detenidamente el código, todos los parámetros y cambios que definimos para personalizar nuestra barra de herramientas lo hacemos dentro de un array, este es el array de configuracion de la barra de herramientas de DebugKit y este se compone por lo que denominan Key, con estos Key vamos a identificar a cada uno de los paneles de la barra de herramientas, por ejemplo el Key del panel «Variables» es «variables» . Y ya esta lista nuestra barra personalizada, puedes fijarte que nos oculto los paneles de Log y Variables (en caso que no los utilicemos) como también ahora nos muestra las ultimas 10 solicitudes del panel History:

Personalizar DebugKit


Si te das cuenta la barra de herramientas de DebugKit aparece en todo momento, desde que lo instalamos siempre estará durante toda la navegación de la aplicación, esta configuracion es llamada forceEnable que se implementó en la versión 1.1 del depurador, el cual permite forzar la barra de herramientas independientemente del nivel de depuración en el que nos encontremos y esto implica que si nuestra aplicación está en producción el depurador seguirá visualizándose, pero no siempre lo queremos tener presente por eso es que desde la versión 1.2 de DebugKit se añadió una nueva configuracion de un parámetro llamado autorun el cual nos permite controlar si queremos que la barra de herramientas sea o no mostrada.  Esto lo podemos configurar dentro del array de configuración de la barra de herramientas en el archivo AppController.php tal como lo hicimos para personalizarlo:

[php]
class AppController extends Controller
{
public $components = array(‘DebugKit.Toolbar’=>array(‘autoRun’=>false));
}
[/php]

Modificando el parámetro autorun a false entonces la barra de herramientas desaparecerá, obviamente si lo cambias a true podrás visualizarlo nuevamente. Si en algún caso quisiéramos habilitar la barra de herramientas del depurador en una página en especifico podemos hacerlo añadiendo ?debug=true al final de la url y la barra de herramientas sera visible temporalmente.


Crear un propio panel para la barra de herramientas

Otra de las ventajas que nos trae DebugKit es el poder desarrollar nuestros propios paneles de depuración de tal forma tener una barra de herramientas totalmente personalizada. Acá entra mucho el seguir las convenciones de CakePHP y también la ubicación de los archivos tal y como pide DebugKit. Como ejemplo para este tutorial voy a crear un panel personalizado que lo llamaré MiIdPanel el cual tendrá la función de mostrarnos unicamente el ID del usuario que pertenece a la sesión actual en la que se encuentra la aplicación es decir que si el usuario tiene el ID 1 y este usuario ingresa a la aplicación a través de una sesión entonces nos mostrará este ID del usuario, esta es una práctica muy útil si queremos verificar que nuestro usuario esta dentro de una sesión, es por eso que la sesión sera semejante al ID del usuario. A continuación vamos a desarrollar nuestro panel con los siguientes pasos:

1. Vamos a dirigirnos al directorio app\Lib\ y creamos una carpeta llamada Panel y dentro de ella creamos el archivo MiIdPanel.php.

2. Dentro del archivo MiIdPanel.php vamos a crear nuestra clase tal y como te lo muestro en el siguiente código:

[php]
<?php
App::uses(‘DebugPanel’, ‘DebugKit.Lib’); //Importamos el contenido del paquete DebugKit

/* Mi Panel Personalizado */
class MiIdPanel extends DebugPanel
{
public $title = «Recupera ID»; //Nombre de nuestro panel que aparecerá en la barra de herramientas de DebugKit
}
?>
[/php]

Toma atención en que el nombre del archivo siempre tiene que coincidir con el nombre de la clase

3. Cada panel siempre estará asociado a un elemento vista y esta vista sera el que muestre el contenido del panel personalizado, el nombre de este elemento siempre debe estar separado por un underscore (barra baja) para el caso del panel MiIdPanel el elemento vista tiene que ser llamado mi_id_panel.ctp. Este elemento vista lo creamos dentro del directorio app\Plugin\DebugKit\View\Elements e ingresamos el siguiente código:

[php]
<?php
if (isset($_SESSION[‘Auth’][‘User’][‘id’]))
{
echo «El ID correspondiente es: «. $_SESSION[‘Auth’][‘User’][‘id’];
}
else
{
echo «No existe id»;
}
?>
[/php]

Con este código verificamos si existe el ID del usuario perteneciente a la sesión actual, de ser así nos imprime el ID, de no serlo nos indica que no existe id

4. Finalmente llamamos al panel personalizado desde el array de configuracion del panel que se encuentra en el archivo AppController.php donde realizamos toda la personalización de la barra de herramientas.

[php]
public $components = array(‘DebugKit.Toolbar’ => array(‘panels’ => array(‘MiId’, ‘log’ => false, ‘variables’ => false), ‘history’ => 10));
[/php]

Cuando llamamos a nuestro panel personalizado dentro del array de configuracion de la barra de herramientas lo hacemos con el nombre MiId, excluimos la ultima palabra Panel que llegaría a ser solamente un sufijo para denominar a nuestros paneles personalizados.

Y listo! ya tenemos un panel personalizado denominado Recupera ID donde nos muestra el ID del usuario correspondiente a la sesión actual en la que se encuentra:

Crear Panel DebugKit


Como pudiste apreciar esta herramienta de CakePHP tienen un gran potencial ya que ademas de tener paneles con funcionalidades bastante útiles puedes crear tus propios paneles acorde a tus necesidades y también configurar su barra de herramientas. Este tutorial esta desarrollado con pleno detalle y quise hacerlo lo mas completo posible desde la instalación de DebugKit a partir de una nueva instalación de CakePHP hasta crear y configurar tus propios paneles de depuración, espero te sea de gran utilidad.

Si este tutorial te pareció útil e interesante no dudes y compártelo en las redes sociales así muchos se benefician con este contenido y si tienes alguna duda o sugerencia puedes dejar un comentario. Ah y no olvides seguir mis próximos vídeos del curso de CakePHP que se viene con grandes novedades 8-)

Saludos!!!

firma emm

17 respuestas a «Tutorial DebugKit para CakePHP»

  1. Estimado, muy buen blog felicidades.

    Trate de instalar debug kit siguiendo tus pasos,, pero no logro que funcione.

    Me dice Missing Plugin

    Error: The application is trying to load a file from the DebugKit plugin

    Y ya descarge el plugin.

    Saludos.

    1. Hola Francisco, verifica si estas situando correctamente el directorio del plugin, cuando desarrollé el tutorial yo mismo lo realicé paso a paso, ayudaría que me indiques en que paso se te presenta ese error. Saludos!

    1. Hola Felipe para desactivar el panel basta con eliminar o comentar la llamada al componente desde AppController (Lo que hicimos en el paso 4) y si tu aplicación ya está en producción debes cambiar el nivel de depuración en 0 (lo que hicimos en el paso 5). Saludos y gracias por seguir mi trabajo.

  2. Hola Edson, quiero agradecerte por este material. Ha sido de gran ayuda.
    Estoy intentando replicar esto exactamente como lo propones y cuando verifico el estado de cake me sale este mensaje:

    DebugKit.ToolbarComponent could not be found.Create the class

    ¿Me puedes indicar como resolverlo por favor?

    1. Hola Mauricio, gracias por el comentario, respecto a tu duda puede ser porque no estas llamando correctamente al componente por esa razón no lo encuentra, revisa los pasos 3 y 4 nuevamente ya que es allí donde realizamos la llamada al componente. Saludos!!!

    2. Lo tengo exactamente como indicas en el tutorial:

      Estos son los errores que me indica el cake:

      DebugKit.ToolbarComponent could not be found.

      Create the class ToolbarComponent below in file: P:\xampp\htdocs\lasabrosura\app\Plugin\DebugKit\Controller\Component\ToolbarComponent.php

      1. Como te lo mencionaba generalmente es porque no cargaste adecuadamente el componente, lo que puedes hacer es volver a clonar el plugin o al final vuelve a instalarlo paso a paso en una nueva instalación de CakePHP, eso con el fin de saber donde esta el error para que después repliques la solución en tu proyecto. Los pasos descritos en el tutorial los seguí yo mismo mientras lo desarrollaba así es que espero lo soluciones pronto. Saludos

      2. Hola nuevamente, estuve revisando el repositorio del Plugin y quizá el error que te ocurre es porque no estas descargando el plugin de la rama (branch) correcta, verifica dentro de GitHub que este usando la versión 2.2 del plugin ya que con la llegada de CakePHP 3 el plugin DebugKit también fue actualizado, una vez que hayas descargado la versión 2.2 puedes seguir los mismos pasos de este tutorial para poder instalarlo y crear tus propios paneles dentro el depurador. Saludos y espero esto te ayude a solucionar el problema.

    1. Hola Paola, el curso de CakePHP ya finalizó quizá lo pueda realizar mas adelante en un artículo para el blog, por lo pronto lo que te puedo sugerir es una librería llamada DOMPDF el cual te ayuda a exportar archivos PDF el cual lo puedes utilizar para generar tus reportes. Saludos!!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *