Y vos, ¿le estas sacando provecho a Console?
Para los desarrolladores es de mucha utilidad poder saber con exactitud el flujo que está tomando nuestro código, o, así como también diferentes valores, como el de una una variable, un tipo de dato, etc. Es por eso que constantemente utilizamos herramientas que nos permitan hacer posible todo lo anterior. En este caso, y a lo largo de todo este artículo, vamos a estar haciendo referencia a el objeto de JavaScript llamado Console , y vamos a ver con algunos ejemplos, como sacarle el máximo provecho.
Para comenzar, podemos hablar de Console. Console es un objeto propio del lenguaje Javascript. Esto significa que ya está establecido por defecto en el lenguaje, lo que nos permite poder utilizarlo, sin configurar nada con anterioridad. Lo que nos resta es solamente utilizarlo. Como es propio de cada Objeto, contamos con muchos métodos para su uso. Sin dudas, el objetivo por el cual querras usar Console es: acceder a la consola de depuración de los navegadores. Si bien en este artículo, hablaremos de algunos de ellos, si quieres conocer más detalles de todos los métodos del objeto Console, puedes visitar la documentación oficial.
Personaliza tus logs.
Uno de los métodos más utilizados con Console, es log(). Pero, ¿sabías que puedes personalizar tus logs? ¡Si! ¡Y es muy fácil! Solo debes agregar el símbolo (%c) al comienzo del mensaje que desees mostrar, y como segundo parámetro, debes agregarle los estilos, como lo harías con CSS. Aquí un ejemplo
Si ejecutas este código, podras notar en la pestaña Consola de tu navegador, lo siguiente:
Datos mas visuales.
En muchos casos, necesitamos ver un listado de grandes volúmenes de información, y muchas veces pasamos tiempo, buscando entre ellos uno en particular. Si esta es tu situación, el método .table(), te será de mucha ayuda. Este método, te ayudara a ordenar matrices u objetos de una forma más prolija, y visualmente más entendible. Aquí un ejemplo:
El resultado en consola, será el siguiente:
Métodos para cada situación.
Como hemos visto anteriormente, podemos personalizar nuestros mensajes por consola. Esto es muy útil, pero si queremos que nuestros mensajes, tomen ciertos estilos, según el tipo de mensaje, podría ser algo tedioso. En esos casos, nos puede ser de mucha ayuda, usar métodos según cada situación. ¡ Pero no todo es color de rosas ! 😭. Algo que debemos de tener en cuenta, es que podrían no llegar a tener soporte en algunos navegadores, o los estilos predefinidos podrían variar entre uno u otro. Veamos los siguientes métodos:
Metodo .warn()
Metodo .error()
Metodo .info()
Metodo .warn()
Este método, imprime un mensaje en la Consola, pero con estilos de advertencia predefinidos.
Por consola, veras algo así:
Metodo .error()
Este método, imprime un mensaje en la Consola, pero con estilos de error predefinidos.
Por Consola, veras algo así:
Metodo .info()
Este método, imprime un mensaje en la Consola, pero con estilos de información definidos.
Por Consola, veras algo así:
Cronometra el tiempo de ejecución
Si necesitas saber cuánto tiempo tarda en ejecutarse una función, o cierta operación en particular, el método .time(), viene en tu ayuda. Cuando ejecutamos el método .time(), se inicia un temporizador, el cual se detiene cuando encuentra el método .timeEnd() con el mismo nombre. ¡Si, dijimos nombre! Y es que ambos métodos, deben recibir un label (o nombre) como identificador. De esa manera, podremos iniciar y finalizar el temporizador en nuestra ejecución. Algo que es importante tener en cuenta, es que el tiempo de la operación, será un resultado expresado en milisegundos. Veamos un ejemplo, para entenderlo mejor.
Lo que aparecerá por consola, será lo siguiente:
Seguimiento del Stack
Si por algún motivo, necesitas consultar la Pila de llamadas (Call Stack), te puede ser de mucha ayuda utilizar el método .trace(). Si no estas familiarizado con el concepto de Call Stack, puedes visitar la documentación oficial Veamos un ejemplo para ver cómo funciona.
El método .trace() nos devolverá lo siguiente:
Como hemos visto hasta aquí, los métodos de Console, son variados, y podremos usar cada uno de ellos, según en el contexto en el que nos encontremos. Lo importante entonces, es saber identificar esas situaciones para poder escoger el mejor.
Te agradezco mucho si has llegado hasta aquí. Espero que este artículo, te haya sido de mucha ayuda. ❤️