Hola Habr! Les presento la traducción del artículo "Cómo usar la consola JavaScript: yendo más allá de console.log ()" por Yash Agrawal.Una de las formas más fáciles de depurar algo en JavaScript es generar el material utilizando console.log. Pero la consola ofrece muchos otros métodos que pueden ayudar a mejorar la depuración.Empecemos.El caso de uso más básico es generar una cadena o grupo de objetos JavaScript. Bastante simpleconsole.log('Is this working?');
Ahora imagine un escenario cuando tiene un montón de objetos que necesita enviar a la consola.const foo = { id: 1, verified: true, color: 'green};
const bar = { id: 2, verified: false, color: 'red' };
La forma más intuitiva de salida es simplemente console.log (variable) varias veces. El problema se hace más evidente cuando vemos cómo se muestra en la consola.
Como puede ver, los nombres de las variables no son visibles, lo cual no es muy conveniente. Esto se puede resolver combinando todas las variables en una sola consola.log ({foo, bar}). También reduce la cantidad de líneas de console.log en nuestro código.mesa de consola ()
Podemos dar el siguiente paso poniendo todo esto en una tabla para que sea más legible. Siempre que tenga objetos con propiedades comunes o una matriz de objetos, use console.table (). Aquí podemos usar console.table ({foo, bar}) y la consola muestra:
console.group ()
Se puede usar cuando desea agrupar o anidar los elementos correspondientes para poder leer el registro fácilmente.También puede usarlo cuando tiene varias declaraciones de registro dentro de una función, y desea poder ver claramente el alcance correspondiente a cada declaración.Por ejemplo, si registra datos de usuario:
console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer');
console.group('Address');
console.log('Street: 123 Townsend Street');
console.log('City: San Francisco');
console.log('State: CA');
console.groupEnd();
console.groupEnd();
También puede usar console.groupCollapsed () en lugar de console.group () si desea que los grupos se contraigan de forma predeterminada. Deberá hacer clic en el botón de control a la izquierda para expandir.console.warn () y console.error ()
Dependiendo de la situación, para hacer que su consola sea más legible, puede agregar registros usando console.warn () o console.error (). También hay console.info (), que muestra el icono "i" en algunos navegadores.
Puede ir aún más lejos agregando su propio estilo. Puede usar la directiva% c para agregar estilo a cualquier instrucción de registro. Esto se puede usar para distinguir entre llamadas API, eventos de usuario, etc.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 tamaño de fuente, el estilo de fuente y otros elementos CSS.
console.trace ()
console.trace () imprime el seguimiento de la pila en la consola y muestra cómo salió el código en cierto punto. Hay ciertos métodos a los que le gustaría llamar solo una vez, por ejemplo, eliminación de la base de datos. console.trace () se puede usar para asegurarse de que el código se comporte de la manera que queremos.console.time ()
Otra cosa importante cuando se trata de desarrollo frontend es que el código debe ser rápido. console.time () le permite sincronizar ciertas operaciones en el código para realizar pruebas.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++) {
Esperemos que este artículo haya proporcionado información sobre las diferentes formas de usar la consola.