Consejos útiles para mostrar información en la consola
La consola Javascript es una zona del navegador ubicada en las DevTools donde podemos escribir pequeños fragmentos de código y observar los resultados, así como revisar mensajes de información, error u otros detalles similares. Para acceder a las DevTools podemos pulsar el atajo de teclado Ctrl + Shift + J sobre la pestaña de la página web en cuestión. Esta zona es un panel de control general donde podemos ver varios aspectos del desarrollo de la página en la que nos encontramos: su etiquetado HTML, sus estilos CSS, etc... Sin embargo, pulsando el atajo de teclado Ctrl + Shift + J nos llevará directamente a la consola.
Para ir a ver los ejemplos en la consola usa:
Ctrl +
Shift +
J
El método console.log() es el método más utilizado para mostrar información en la consola.
Este método recibe un argumento, que es el valor que queremos mostrar. Por ejemplo:
console.log("Hola, soy un mensaje en la consola");Mensajes de error por niveles
Además de console.log(), existen otros métodos para mostrar mensajes en la consola, cada uno
con un nivel de importancia diferente. Por ejemplo:
console.debug("Muestra información con todo nivel de detalle.");console.info("Muestra mensajes de información.");console.warn("Muestra información de advertencia. Aparece destacado en amarillo.");console.error("Muestra información de error. Aparece destacado en rojo.");Mostrar una traza de error
El método console.trace() muestra una traza de error en la consola, lo que nos permite
ver el camino que ha seguido el programa hasta llegar a ese punto. Esto es especialmente útil para
depurar errores y entender el flujo de ejecución de nuestro código.
console.trace("Esto es una traza de error");Truco: Mensajes con estilos CSS
El método console.log() también permite mostrar mensajes con estilos CSS personalizados. Para
ello, podemos utilizar el siguiente formato:
console.log("%cEste mensaje tiene estilos CSS personalizados", "color: red; font-size: 20px; font-weight: bold;");En este ejemplo, el mensaje se mostrará en rojo, con un tamaño de fuente de 20 píxeles y en negrita.
Limpiar la consola
El método console.clear() permite limpiar la consola. Esto es útil cuando queremos borrar todos
los mensajes anteriores para tener una vista más limpia.
console.clear();Agrupar mensajes
Existen varias formas de agrupar mensajes de consola. Veamos algunos de ellos:
console.group("Grupo de mensajes - Inicia un acordeón expandible con el texto indicado por parámetro.");Es posible agrupar varios mensajes de consola mediante console.group() y las
funciones de su
familia:
console.groupCollapsed("Grupo de mensajes colapsado - Idem al anterior, pero colapsado (cerrado) por defecto.");También es posible cerrar un grupo de mensajes con console.groupEnd
console.groupEnd("Grupo de mensajes - Cierra el grupo de mensajes abierto anteriormente.");Un método que puede resultar muy interesante en algunas situaciones es
console.table(), ya que
nos permite crear una tabla con los datos a mostrar, algo que en ciertas situaciones con tipos de datos
Object o Array
muy extensos, es muy práctico:
console.table([{nombre: "Jairo", edad: 30}, {nombre: "María", edad: 25}]);Otro método es console.assert()Javascript incorpora un método de consola para
realizar asertos, es decir, un console.log() especial que se realiza junto a una condición. El mecanismo de
utilizar este método es que podemos indicar ciertas condiciones como puntos de control, para asegurarnos que
todo ha salido correctamente.
console.assert(2 > 3, "Esto es un error, ya que la condición es falsa.");En este ejemplo, el mensaje de error se mostrará en la consola porque la condición
2 > 3 es falsa. Si la condición fuera verdadera, no se mostraría ningún mensaje. Ten en cuenta
que el aserto sólo sirve para avisar por consola con un mensaje, de forma muy sútil. No detiene la ejecución
del programa, ni nada parecido.
Otro método es console.dir(). Este método nos permite mostrar la representación de
un objeto en la consola, lo que es muy útil para inspeccionar sus propiedades y métodos.
console.dir(document.getElementById("miElemento"));En este ejemplo, se mostrará la representación del elemento con el id "miElemento" en la consola, permitiéndonos inspeccionar sus propiedades y métodos de manera más detallada.
Crear benchmarks rápidos
Es posible que necesitemos hacer tests de rendimiento, para comprobar cuanto se tarda en realizar alguna acción, o comparaciones para decidirnos por mejores formas de hacer nuestro código. Los navegadores tienen una serie de métodos interesantes para ello, divididos en tres grupos:
1.- Contadores
Con los contadores de consola, puedes crear contadores rápidamente que sólo necesitas utilizar en tareas de depuración, de forma mucho más rápida que hacerlo con código Javascript.
Tiene tres métodos principales:
console.count()console.countReset()console.countEnd()Ejemplo sencillo:
console.count("Contador de ejemplo");Cada vez que se ejecute esta línea, el contador con el nombre "Contador de ejemplo" aumentará en uno y se mostrará su valor actual en la consola.
console.countReset("Contador de ejemplo");Este método restablece el contador con el nombre "Contador de ejemplo" a cero.
console.countEnd("Contador de ejemplo");Este método detiene el contador con el nombre "Contador de ejemplo" y muestra su valor final en la consola.
2.- Benchmark de tiempo
Con los métodos de benchmark de tiempo, puedes medir el tiempo que tarda en ejecutarse un bloque de código o una función específica. Esto es útil para identificar cuellos de botella y optimizar el rendimiento de tu código.
Tiene tres métodos principales:
console.time()console.timeLog()console.timeEnd()Ejemplo sencillo:
console.time("Tiempo de ejemplo");Este método inicia un temporizador con el nombre "Tiempo de ejemplo". Puedes ejecutar este método varias veces para iniciar varios temporizadores con diferentes nombres.
console.timeLog("Tiempo de ejemplo");Este método muestra el tiempo transcurrido desde que se inició el temporizador con el nombre "Tiempo de ejemplo".
console.timeEnd("Tiempo de ejemplo");Este método detiene el temporizador con el nombre "Tiempo de ejemplo" y muestra su valor final en la consola.
2.- Benchmark de rendimiento
Con los métodos de benchmark de rendimiento, puedes medir el rendimiento de tu código en términos de uso de CPU, memoria y otros recursos del sistema. Esto es útil para identificar problemas de rendimiento y optimizar tu código.
Tiene tres métodos principales:
console.profile()console.profileEnd()console.timeStamp()Ejemplo sencillo:
console.profile("Perfil de ejemplo");Este método inicia un perfil de rendimiento con el nombre "Perfil de ejemplo". Puedes ejecutar este método varias veces para iniciar varios perfiles con diferentes nombres.
console.profileEnd("Perfil de ejemplo");Este método detiene el perfil de rendimiento con el nombre "Perfil de ejemplo" y muestra su valor final en la consola.
console.timeStamp("Marca de tiempo de ejemplo");Este método agrega una marca de tiempo con el nombre "Marca de tiempo de ejemplo" a la consola. Esto es útil para marcar eventos específicos en tu código y medir el tiempo transcurrido entre ellos.