Una de las formas más fáciles de depurar cualquier cosa en JavaScript es registrando cosas usando console.log. Pero hay muchos otros métodos proporcionados por la consola que pueden ayudarlo a depurar mejor.
Empecemos.
El caso de uso muy básico es registrar una cadena o un montón de objetos JavaScript. Muy simple,
console.log('Is this working?');Ahora, imagina un escenario en el que tienes un montón de objetos que necesitas para iniciar sesión en la consola.
const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };La forma más intuitiva de registrar esto es solo console.log(variable)uno tras otro. El problema se hace más evidente cuando vemos cómo aparece en la consola.
Como puede ver, no se ven nombres de variables. Se vuelve extremadamente molesto cuando tienes un montón de estos y tienes que expandir la pequeña flecha a la izquierda para ver cuál es exactamente el nombre de la variable. Ingrese los nombres de propiedad calculados. Esto nos permite agrupar básicamente todas las variables juntas en una sola console.log({ foo, bar });y la salida es fácilmente visible. Esto también reduce la cantidad de console.loglíneas en nuestro código.
mesa de consola()
Podemos llevar esto un paso más allá poniendo todos estos elementos juntos en una tabla para que sea más legible. Siempre que tenga objetos con propiedades comunes o una matriz de objetos, utilice console.table(). Aquí podemos usar console.table({ foo, bar})y la consola muestra:
console.group ()
Esto se puede utilizar cuando desee agrupar o anidar detalles relevantes para poder leer fácilmente los registros.
Esto también se puede usar cuando tiene algunas declaraciones de registro dentro de una función y desea poder ver claramente el alcance correspondiente a cada declaración.
Por ejemplo, si está registrando los detalles de un usuario:
console.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');// Nested Groupconsole.group('Address');console.log('Street: 123 Townsend Street');console.log('City: San Francisco');console.log('State: CA');console.groupEnd();console.groupEnd();
También puede utilizar en console.groupCollapsed()lugar de console.group()si desea que los grupos se contraigan de forma predeterminada. Debería presionar el botón descriptor a la izquierda para expandir.
console.warn () y console.error ()
Dependiendo de la situación, para asegurarse de que su consola sea más legible, puede agregar registros usando console.warn()o console.error(). También hay una console.info()que muestra un icono "i" en algunos navegadores.
Esto se puede ir un paso más allá agregando un estilo personalizado. Puede usar una %cdirectiva para agregar estilo a cualquier declaración de registro. Esto se puede usar para diferenciar entre llamadas a API, eventos de usuario, etc. manteniendo una convención. He aquí un ejemplo:
console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered');console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details');console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');También puede cambiar el font-size, font-styley otras cosas CSS.
console.trace ()
console.trace()envía un seguimiento de la pila a la consola y muestra cómo terminó el código en un punto determinado. Hay ciertos métodos a los que solo le gustaría llamar una vez, como eliminar de una base de datos. console.trace()se puede utilizar para asegurarnos de que el código se comporte de la manera que queremos.
console.time ()
Otra cosa importante cuando se trata del desarrollo de frontend es que el código debe ser rápido. console.time()permite la sincronización de ciertas operaciones en el código para la prueba.
let i = 0;console.time("While loop");while (i < 1000000) { i++;}console.timeEnd("While loop");console.time("For loop");for (i = 0; i < 1000000; i++) { // For Loop}console.timeEnd("For loop");
Con suerte, el artículo proporcionó información sobre varias formas de usar la consola. Si tiene alguna pregunta o desea que le explique más, déjeme una nota a continuación o comuníquese conmigo en Twitter o correo electrónico.