Más allá de preferencias personales por un navegador u otro (no es el tema del post), desde la aparición de Firebug como extensión de Firefox, para la mayoría de los que desarrollamos para plataformas web, no queda duda alguna de cuál es el navegador a usar.
Tampoco es la idea hablar sobre las bondades de dicha extensión, sino, focalizarnos sobre una de sus herramientas: la consola.
Habitualmente, cuando estamos armando nuestras funciones de javascript (ya sea que usemos algún framework o no), solemos aplicar la forma más básica para conocer el valor de una variable: la función alert.
<script type='text/javascript'> alert('Mensaje de prueba'); </script>
Con éste método, además de tener cierto margen de error, podemos encontrarnos con pruebas que pueden tornarse casi insoportables.
A partir de ahora, y gracias al uso de la consola de Firebug, vamos a poder mejorar nuestras pruebas y nuestro control en el flujo de nuestros scripts.
El objeto console posee varios métodos. En éste post vamos a concentrarnos en aquellos que nos ayudarán a mejorar nuestras posibilidades de debug.
Como decía, los métodos disponibles para obtener los valores de variables o strings, son:
- console.log: imprime el valor que hayamos indicado como parámetro.
- console.info: imprime el valor, agregando representación visual y un link a la línea del código en donde fue invocada la función.
- console.debug: imprime el valor, agregando el link a la línea del código en donde fue invocada la función.
- console.warn: imprime el valor, agregando representación visual y un link a la línea del código en donde fue invocada la función.
- console.error: imprime el valor, agregando representación visual y un link a la línea del código en donde fue invocada la función.
Si bien el resultado será muy similar en todos, la ayuda visual nos permitirá tener mejor control sobre nuestro proceso de debug.
Un ejemplo (muy básico) del uso de éstas funciones sería:
<script type='text/javascript'> console.log('Ejemplo de console.log'); console.info('Ejemplo de console.info'); console.debug('Ejemplo de console.debug'); console.warn('Ejemplo de console.warn'); console.error('Ejemplo de console.error'); </script>
Si ejecutamos nuestra página, veremos lo siguiente en nuestro navegador.
Una vez que nos acostumbremos a jugar con las bondades de ésta consola, ya no tendremos excusas para evitar errores en nuestros scripts.