Blog Xplorastudios

Me considero un fanático de Jquery, que no es más que un conjunto de librerías de javascript que nos permiten crear aplicaciones dinámicas de forma extremadamente sencilla, además nos libera de la tediosa tarea de tener que utilizar diferentes funciones y métodos en función del navegador. Existen otras librerias (DOJO, Yahoo, Prototype, Moo-tools …), pero para mi Jquery es la mejor de todas con diferencia.

Por ello, he decidido ir creando una serie de tutoriales sobre algunos scripts que voy preparando y que creo que os pueden ser de mucha utilidad. Los tutoriales serán de nivel medio, por lo que no entraré a comentar temas básicos, pero si intentaré explicar el funcionamiento, si tenéis alguna duda, comentadlo y os intentaré echar una mano.

1. Introducción

Cada vez utilizo más la potencia que ofrece Jquery y Ajax para crear aplicaciones más complejas y usables, sobre todo a la hora de crear interfaces de gestión eficientes que de otro modo serían demasiado tediosas, por poner un ejemplo, al tener que trabajar con cientos de productos, imágenes, entradas o categorias.

Debido a esto, y dada la naturaleza de javascript, me encontraba a menudo con problemas a la hora de realizar debugging, localizar errores o simplemente realizar el seguimiento de deteminadas funciones. Soy consciente de que existen addons y plugins para realizar debug de javascript en varios navegadores pero todos me han parecido demasiado complejos y simplemente no se ajustan a mis necesidades, que son básicamente disponer de un pequeño cuadro en el que pueda evaluar código javascript y que la evaluación se muestre en tiempo real, para poder ver por ejemplo, cómo evoluciona el contenido de determinadas variables. Creo que no hay nada como hacer las cosas uno mismo y no depender de nadie, además, el debugger que vamos a crear a continuación es compatible con todos los navegadores y no se necesita instalar nada

2. El concepto

Básicamente lo que vamos a hacer es crear un div flotante que evalue constantemente las expresiones que añadamos a un array y muestre su resultado. Éste resultado se irá actualizando cada cierto tiempo para mostrarnos como evolucionan dichas evaluaciones. En la expresión a evaluar, podemos incluir cualquier tipo de código javascript, ya sea el nombre de una variable para ver su resultado, una asignación de un valor a una variable o incluso una expresión compleja con jquery.

Para añadir expresiones al array de evaluación, podremos hacerlo a través de un campo de texto habilitado para tal efecto, o a través de una función a la que le pasaremos la expresión a añadir al cuadro de evaluación, jsdebugWatch(expresion); Asimismo, crearemos diferentes botones para poder quitar expresiones del array y para poder minimizar-maximizar el cuadro de evaluación, que por defecto se mostrará en estado minimizado.

3. El código

Descargar debug.js

4. Instalación

Simplemente copiamos el archivo al directorio de nuestras librerias y lo cargamos en la página de la que queramos hacer debug. Si no queremos que se muestre, podemos cambiar la variable jsdebugActive a false, o simplemente, no cargar el archivo.

Podemos escribir manualmente las expresiones en el campo habilitado y añadirlas, o podemos agregarlas desde nuestro código mediante la función jsdebugWatch(expresion);

Para probar el funcionamiento podeis introducir la expresión 1+1 y tendrá que evaluarla como 2, también podéis probar a introducir alguna variable que esteis utilizando y os mostrará su valor.

Nota: Para que funcione, es necesario que las librerias de jquery estén cargadas

Nota: Los estilos utilizan position:fixed, no todos los navegadores soportan esta opcion, si vuestro navegador no la soporta, podeis utilizar position:absolute

5. Conclusión

Ahora disponemos de un sencillisimo debugger que nos será de mucha utilidad a la hora de realizar debug de nuestras aplicaciones. Personalmente lo he usado en multitud de proyectos y me resulta de mucha utilidad, me olvido de tener que instalar nada y sólo tengo que incluir el debug.js para tener el debugger disponible.

Por supuesto, éste es un debugger muy simple, podría mejorarse, ampliarse y probablemente optimizarse, pero eso os lo dejo a vosotros

Y nada más, lo siento por la tremenda parrafada que me ha salido, intentaré para la próxima que el “tutorial” sea un poco más gráfico.

Espero que os sea de tanta utilidad como a mi, estaré encantado de leer vuestras dudas o comentarios al respecto.