Blog Xplorastudios

Anteriormente comentamos como crear un sencillo debugger de javascript con Jquery. En ésta ocasión, y partiendo de esa base, crearemos un script para realizar debug de javascript más avanzado siguiendo los mismos principios: que sólo sea necesario incluir el script para habilitar el debugger, que éste nos permita seguir la evolución en tiempo real en la misma ventana de trabajo, y que pueda ser minimizado para que no nos moleste cuando no lo necesitemos.

Entre las características adicionales que he agregado destaca la implementación de un sistema de logging, que nos permitirá enviar información al log de forma muy sencilla al log a mediante la función jsdebugLog(’Texto a enviar al log’);, el debugger se encargará automáticamente de rotar el log para mostrarnos sólo los últimos eventos.

Adicionalmente, he incluido un interesante pero sencillo sistema para sugerir nombres de variables, funciones y objetos. En función de lo que escribamos en el campo de expresiones, se nos sugerirarn posibles valores que podemos añadir al evaluador de expresiones con tan solo hacer click.

Por último, se han incluido botones para poder vaciar tanto el evaluador de expresiones como el log y se han retocado un poco los estilos.

1. El concepto

1.1 Evaluador de expresiones

Para poder mostrar un listado de variables, funciones y objetos disponibles sensible al texto que estamos escribiendo, lo que haremos es iterar por ‘this‘ buscando coincidencias, una vez las encontremos, las iremos añadiendo a un array de palabras sugeridas.

suggested=new Array();
for (var s in this) {
   if (s.toLowerCase().indexOf(search.toLowerCase())>=0) suggested.push(s);
}

Una vez hecho esto, tan solo debemos comprobar el tamaño del array, y si es superior a 0, generaremos el código html con el listado de palabras sugeridas y las adjuntaremos al div correspondiente. En caso de que el array esté vacio, ocultaremos el div de palabras sugeridas. ¡Tan sencillo como eso!.

1.2 Logger

El logger es más sencillo si cabe, simplemente utilizaremos un array para almacenar ahí todos los datos que se envíen al log y en caso de que se exceda la capacidad del logger (indicada en una variable), se eliminará la entrada más antigua.

En cada intervalo de refresco, se regenerara el listado con los datos del array y se asignarán vínculos para poder eliminar registros del logger o vaciarlo por completo.

2. El código

Descargar debug_avanzado.js

3. Instalación

Simplemente copiamos el archivo al directorio de nuestras librerias javascript 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, llamar a la funcion jsdebugClose(), 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.

Para agregar datos al logger, podemos usar la función jsdebugLog(texto);.

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

4. Conclusión

Ahora disponemos de un debugger un poco más avanzado que nos será de mucha utilidad a la hora de realizar debug de nuestras aplicaciones. Como siempre, aún puede mejorarse y ampliarse mucho más, pero por el momento lo dejaremos aquí ya que particularmente, cumple con todas mis espectativas.

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