En el desarrollo de juegos PBBG, el combo Javascript + PHP es un ejemplo clasico de como crear tu juego. En el lado Javascript tienes al poderoso Firebug que te ayuda excesivamente a debugear tu fabuloso y egocentrico codigo. ¿Pero que hay de PHP?

¿Hay vida despues de hacer echo en cada variable que quieras conocer su contenido ? Pues la forma general de debugear es mediante alguna extension a tu servidor apache como Xdebug, o quizas torturarte un poco tratando de instalar todos los requisitos para el Zend Debugger, que aunque es una excelente herramienta, seamos sinceros, no es nada sencillo de instalar y usar.

Pero hay luz al final del camino, hijos mios, y esta luz se llama FirePhp. FirePHP es una extension de Firebug que te permite, entre muchas otras cosas, ver el estado de tu variable/array/objeto en la consola firebug, muy util para debugear llamadas de AJAX, y lo mejor de todo esto es que la instalacion es demasiado sencilla para ser verdad.

Requerimientos de Instalacion

• Mozilla Firefox
• Extension Firebug de Mozilla

Pasos de Instalacion

• Bajarse la extension de Firebug para Firefox. La cosa mas sencilla del mundo

• Bajate la libreria de FirePhp en cualquier parte de tu proyecto. (Basicamente son otros archivos PHP)
  
• Pon este codigo al comienzo del archivo donde quieras probar Fire PHP:

                      require_once('Direccion/de/FirePHPCore/FirePHP.class.php');
                      $firephp = FirePHP::getInstance(true);

• Y Listo comienza a usar Firephp de esta forma:

                     global $firephp;
                     $firephp->log($unArregloXEjemplo);

La funcion log es una de muchas que tiene firebug, recomiendo se lo instalen, ayuda demasiado

Siguiendo con este minitutorial de uso de Firebug, vamos a revisar unas caracteristicas unicas en Firebug con respecto a Javascript y AJAX

1) Visualiza tus envios Ajax: Cada ves que hagas un pedido Ajax con respuesta puedes visualizar su contenido en la Consola del firebug. No solo eso, puedes ver, los datos enviados, la respuesta del servidor y en la ultima version.

Si tu dato fue enviado como JSON firebug lo comprende bien y te lo muestra , miren este poder:


2) Magia en Javascript: Una cosa que me facilita el Firebug es que puedo ejecutar codigo javascript cuando yo quiera, digamos un overwhelming alert:


Ahora ya que estan trabajando con firebug, les dejo una funcion truco, la console.log(). Esta funcion te permite mandar mensajes a la consola.

Si, se que no sirve de mucho mandar una cadena "Hola Firebug", pero lo que no pensaron ustedes es que puedes tambien mandar variables a la consola, con toda la funcionalidad que esto amerita ;)


Y asi termino con lo basico del Firebug. Les sigo aconsejandolo, instalenlo en su Firefox. ¿Que no estas usando Firefox?, no hay problema instalate tambien el Firefox.

Y para coronar mi regreso aqui un pequeño tutorial sobre esta gran herramienta. Este Plugin de Firefox es vital para cualquier chango que quiera desarrollar Paginas Web, incluyendo por supuesto Juegos Web. ¿Y que es lo que hace esta magica herramienta?, Que es lo que no hace deberian de preguntarse. Empezare por lo mas basico:

1) Modificacion de tu HTML
A veces te pasa lo siguiente: Tienes tu HTML generado de forma dinamica y para ver el resultado tienes que ver el codigo tal como te bota en blanco y negro y posiblemente muchos TAG aglomerados en una sola linea, simplemente brutal.

Con Firebug no solo puedo pasearme por el codigo HTML como si fuera un dia de campo y verlo todo coloreado resaltando los datos de los atributos, tambien puedo modificarlo, cambiandole el texto, añadir nuevos atributos, es mas puedo eliminar Tags completos solo por el gusto de ver que pasaria si elimino esa molestosa ventana flotante o ese quisquilloso DIV que me esta tapando la informacion.


3) Cambia tu CSS al vuelo
Ok ya tienes seleccionado tu etiqueta, haz probado eliminarla y se ve bien. ¿Que sigue despues?. Manipula tu CSS on the Fly!!!. ASi es con firebug puedes cambiar tu CSS y ver los cambios al instante, sin necesidad de estar entrando una que otra vez a tu archivo CSS y presionando F5. Tan solo seleccionas tu propiedad y empeizas a manipularlo. Y si eres de gustos exigentes puedes crear nuevas propiedades a cualquier elemento.


Destilado de Awesomeness en este debugeador web. La siguiente entrada hablaremos un poco sobre javascript y ajax asi que stay tune .


PD: Obviamente este plugin solo funciona para Firefox, aunque hay varios debugers que tratan de funcionar asi de bien en otros navegadores.