Artículo original escrito por: Jesse Hall
Artículo original: JavaScript Console.log() Example – How to Print to the Console in JS
Traducido y adaptado por: Rafael D. Hernandez

Registrar mensajes en la consola es una forma muy básica de diagnosticar y solucionar problemas menores en el código.

Pero, ¿sabías que hay más opciones con la consola que log? En este artículo, te mostraré cómo imprimir en la consola en JS, así como todas las cosas que no sabías que la consola podía hacer.

Consola de edición multilínea de Firefox

Si nunca has usado el modo editor multilínea en Firefox, ¡deberías probarlo ahora mismo!

Simplemente, abre la consola, Ctrl + Shift + K o F12, y en la parte superior derecha verá un botón que dice "Cambiar al modo de editor multilínea". Alternativamente, puede presionar Ctrl + B.

Esto te da un editor de código de varias líneas dentro de Firefox.

console.log

Comencemos con un ejemplo de registro muy básico.

let x = 1
console.log(x)

Escribe eso en la consola de Firefox y ejecuta el código. Puedes hacer clic en el botón "Run" o presiona Ctrl+Enter.

En este ejemplo, deberíamos ver "1" en la consola. Bastante sencillo, ¿verdad?

Múltiples Valores

¿Sabías que puedes incluir múltiples valores? Agrega una cadena al principio para identificar fácilmente qué es lo que está registrando.

let x = 1
console.log("x:", x)

Pero, ¿qué pasa si tenemos varios valores que queremos registrar?

let x = 1
let y = 2
let z = 3

En lugar de escribir console.log() tres veces podemos incluirlos todos. Y podemos añadir una cadena antes de cada uno de ellos, si queremos también.

let x = 1
let y = 2
let z = 3
console.log("x:", x, "y:", y, "z:", z)

Pero eso es demasiado trabajo. ¡Simplemente envuelve con llaves! Ahora se obtiene un objeto con los valores nombrados.

let x = 1
let y = 2
let z = 3
console.log( {x, y, z} )
Console Output
Console Output

Puedes hacer lo mismo con un objeto.

let usuario = {
  nombre: 'Jesse',
  contacto: {
    correoElectronico: 'codestackr@gmail.com'
  }
}
console.log(usuario)
console.log({usuario})

El primer registro imprimirá las propiedades dentro del objeto de usuario. El segundo identificará el objeto como "usuario" e imprimirá las propiedades que contiene.

Si está registrando muchas cosas en la consola, esto puede ayudarlo a identificar cada registro.

Variables dentro del registro

¿Sabías que puedes usar porciones de tu registro como variables?

console.log("%s tiene %d anios de edad.", "John", 29)

En este ejemplo, %s se refiere a una opción de cadena incluida después del valor inicial. Esto se referiría a "Juan".

%d se refiere a una opción de dígitos incluida después del valor inicial. Esto se referiría a 29.

El resultado de esta declaración será: "Juan tiene 29 anios de edad.".

Variaciones de registro

Hay algunas variaciones de registro. Aquí tienes la más usada console.log(). Pero también hay:

console.log('Consola de Registro')
console.info('Consola de Informacion')
console.debug('Console de Depuracion')
console.warn('Consola de Aviso')
console.error('Consola de Error')

Estas variaciones añaden estilo a nuestros registros en la consola. Por ejemplo, la advertencia (warn) será de color amarillo, y el error será de color rojo.

Nota: Los estilos varían de un navegador a otro.

Registros opcionales

Podemos imprimir mensajes a la consola condicionalmente con console.assert().

let estaFuncionando = false
console.assert(estaFuncionando, "esta es la razón por la que")

Si el primer argumento es false, el mensaje se registrará.

Si cambiamos estaFuncionando a true, el mensaje no se registrará.

Contador

¿Sabías que puedes contar con la consola?

for(i=0; i<10; i++){
  console.count()
}

Cada iteración de este bucle imprimirá un recuento en la consola. Verá "predeterminado: 1, predeterminado: 2", y así sucesivamente hasta que llegue a 10.

Si vuelve a ejecutar este mismo bucle, verá que el conteo continúa donde lo dejó; 11-20.

Para restablecer el contador podemos utilizar la console.countReset().

Y, si deseas nombrar el contador a algo que no sea "predeterminado", ¡puede hacerlo!

for(i=0; i<10; i++){
  console.count('Contador 1')
}
console.countReset('Contador 1')

Ahora que hemos agregado una etiqueta, verás "Contador 1, Contador 2", y así sucesivamente.

Y para restablecer este contador, tenemos que pasar el nombre a countReset. De esta manera, puedes tener varios contadores funcionando al mismo tiempo y solo restablecer algunos específicos.

Tiempo de seguimiento

Además de contar, también puedes cronometrar algo como un cronómetro.

Para iniciar un contador podemos usar la console.time(). Esto no hará nada por sí solo. Por lo tanto, en este ejemplo, usaremos setTimeout() para emular código en ejecución. Luego, dentro del tiempo de espera, detendremos nuestro temporizador usando la console.timeEnd().

console.time()
setTimeout(() => {
  console.timeEnd()
}, 5000)

Como era de esperar, después de 5 segundos, tendremos un registro de finalización del temporizador de 5 segundos.

También podemos registrar la hora actual de nuestro tiempo mientras se está ejecutando, sin detenerlo. Hacemos esto usando la console.timeLog().

console.time()

setTimeout(() => {
  console.timeEnd()
}, 5000)

setTimeout(() => {
  console.timeLog()
}, 2000)

En este ejemplo, obtendremos nuestro 2 segundos timeLog primero, luego nuestro 5 segundos timeEnd.

Al igual que el contador, podemos etiquetar temporizadores y ejecutar varios al mismo tiempo.

Grupos

Otra cosa que puedes hacer con log es, ¿agruparlos?

Comenzamos un grupo usando la console.group(). Y terminamos un grupo con console.groupEnd().

console.log('No estoy en un grupo')

console.group()
console.log('Estoy en un grupo')
console.log('También estoy en un grupo')
console.groupEnd()

console.log('No estoy en un grupo')

Este grupo de registros será plegable. Esto facilita la identificación de conjuntos de registros.

De forma predeterminada, el grupo no está contraído. Puede configurarlo en contraído mediante la console.groupCollapsed() en lugar de console.grupo().

Las etiquetas también se pueden pasar al grupo() para identificarlas mejor.

Seguimiento de pila

También puede hacer un seguimiento de pila con la console. Simplemente, añádelo a una función.

function one() {
  two()
}
function two() {
  three()
}
function three() {
  console.trace()
}
one()

En este ejemplo, tenemos funciones muy simples que se llaman entre sí. Luego, en la última función, llamamos console.trace().

Console Output
Console Output

Tabla

Este es uno de los usos más alucinantes para consolas: console.table().

Así que vamos a configurar algunos datos para registrar:

let dispositivo = [
  {
    nombre: 'iPhone',
    marca: 'Apple'
  },
  {
    nombre: 'Galaxy',
    marca: 'Samsung'
  }
]

Ahora registraremos estos datos usando la console.table(dispositivos).

Console Output
Resultado de consola

Pero espera – ¡se pone mejor!

Si solo queremos las marcas, ¡solo console.table(dispositivos, ['marca'])!

Console Output
Resultado de consola

¿Qué tal un ejemplo más complejo? En este ejemplo, usaremos jsonplaceholder.

async function obtenUsuarios() {
  let respuesta = await fetch('https://jsonplaceholder.typicode.com/users')
  let datos = await respuesta.json()
 
  console.table(datos, ['nombre', 'correoElectronico'])
}

obtenUsuarios()

Aquí solo estamos imprimiendo el "nombre" y el "correoElectrónico". Si te console.log todos los datos, verás que hay muchas más propiedades para cada usuario.

Estilo ?

¿Sabías que puedes usar propiedades CSS para dar estilo a tus registros?

Para hacer esto, usamos %c para especificar que tenemos estilos para agregar. Los estilos se pasan al segundo argumento del log.

console.log("%c Este es un texto amarillo sobre un fondo azul.", "color:yellow; background-color:blue")

Puedes usar esto para que tus registros destaquen.

Claro

Si está tratando de solucionar un problema utilizando registros, es posible que se esté actualizando mucho y su consola se sature.

Solo agrega console.clear() en la parte superior de tu código y tendrás una consola nueva cada vez que la actualices. ?

Simplemente, no lo agregues al final de tu código.

¡Gracias por Leer!

Si quieres revisar los conceptos de este artículo a través de video, puedes ver esta versión de video que hice aquí.

YouTube: There's More To Console Than Log
Jesse Hall (codeSTACKr)

Soy Jesse de Texas. Echa un vistazo a mi otro contenido y hazme saber cómo puedo ayudarte en tu viaje para convertirte en desarrollador web.