Ejemplo de JavaScript Console.log (): cómo imprimir en la consola en JS

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

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

Consola del editor de varias líneas de Firefox

Si nunca ha utilizado el modo de editor de varias líneas en Firefox, ¡debería probarlo ahora mismo!

Simplemente abra la consola, Ctrl+Shift+Ko F12, y en la parte superior derecha verá un botón que dice "Cambiar al modo de editor de varias líneas". Alternativamente, puede presionar Ctrl+B.

Esto le brinda 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. Puede hacer clic en el botón "Ejecutar" o presionar Ctrl+Enter.

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

Valores múltiples

¿Sabías que puedes incluir varios valores? Agregue 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 también podemos agregar una cadena antes de cada uno de ellos si queremos.

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

Pero eso es demasiado trabajo. ¡Solo envuélvelos con tirantes! Ahora obtienes un objeto con los valores nombrados.

let x = 1 let y = 2 let z = 3 console.log( {x, y, z} )
Salida de consola

Puedes hacer lo mismo con un objeto.

let user = { name: 'Jesse', contact: { email: '[email protected]' } } console.log(user) console.log({user})

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

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

Variables dentro del registro

¿Sabía que puede usar partes de su registro como variables?

console.log("%s is %d years old.", "John", 29)

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

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

El resultado de esta declaración sería: "John tiene 29 años".

Variaciones de registros

Hay algunas variaciones de registros. Es el más utilizado console.log(). Pero también hay:

console.log('Console Log') console.info('Console Info') console.debug('Console Debug') console.warn('Console Warn') console.error('Console Error') 

Estas variaciones agregan estilo a nuestros registros en la consola. Por ejemplo, warnserá de color amarillo y errorserá de color rojo.

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

Registros opcionales

Podemos imprimir mensajes a la consola de forma condicional con console.assert().

let isItWorking = false console.assert(isItWorking, "this is the reason why")

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

Si cambiamos isItWorkinga true, el mensaje no se registrará.

Contando

¿Sabías que puedes contar con 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 llegar a 10.

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

Para poner a cero el contador podemos utilizar console.countReset().

Y, si desea asignar un nombre al contador que no sea "predeterminado", ¡puede hacerlo!

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

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

Y para restablecer este contador, tenemos que pasar el nombre a countReset. De esta manera, puede 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 temporizador podemos usar console.time(). Esto no hará nada por sí solo. Entonces, en este ejemplo, usaremos setTimeout()para emular el código en ejecución. Luego, dentro del tiempo de espera, detendremos nuestro temporizador usando 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 temporizador mientras está funcionando, sin detenerlo. Hacemos esto usando console.timeLog().

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

En este ejemplo, obtendremos nuestros 2 segundos timeLogprimero, luego nuestros 5 segundos timeEnd.

Al igual que el contador, podemos etiquetar temporizadores y tener varios en ejecución al mismo tiempo.

Grupos

Otra cosa que puedes hacer loges agruparlos. ?

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

console.log('I am not in a group') console.group() console.log('I am in a group') console.log('I am also in a group') console.groupEnd() console.log('I am not in a group')

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 como contraído usando console.groupCollapsed()en lugar de console.group().

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

Seguimiento de pila

You can also do a stack trace with console. Just add it into a function.

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

In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace().

Salida de consola

Tables

Here's one of the most mind-blowing uses for console: console.table().

So let's set up some data to log:

let devices = [ { name: 'iPhone', brand: 'Apple' }, { name: 'Galaxy', brand: 'Samsung' } ]

Now we'll log this data using console.table(devices).

Salida de consola

But wait – it gets better!

If we only want the brands, just console.table(devices, ['brand'])!

Salida de consola

How about a more complex example? In this example, we'll use jsonplaceholder.

async function getUsers() { let response = await fetch('//jsonplaceholder.typicode.com/users') let data = await response.json() console.table(data, ['name', 'email']) } getUsers()

Here we are just printing the "name" and "email". If you console.log all of the data, you will see that there are many more properties for each user.

Style ?

Did you know that you can use CSS properties to style your logs?

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

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

Puede usar esto para resaltar sus registros.

Claro

Si está intentando solucionar un problema con los registros, es posible que esté actualizando mucho y que su consola se abarrote.

Simplemente agréguelo console.clear()al principio de su código y tendrá una consola nueva cada vez que actualice. ?

Simplemente no lo agregue al final de su código, lol.

¡Gracias por leer!

Si desea volver a visitar los conceptos de este artículo a través de un video, puede ver esta versión en video que hice aquí.

Jesse Hall (codeSTACKr)

Soy Jesse de Texas. Consulte mi otro contenido y déjeme saber cómo puedo ayudarlo en su camino para convertirse en desarrollador web.

  • Suscribirse a mi YouTube
  • ¡Di hola! Instagram | Gorjeo
  • Inscríbete a mi boletín de noticias