Una de las formas más fáciles de depurar en JavaScript es iniciar sesión usando console.log. Pero hay muchos otros métodos de trabajo con la consola que le permiten depurar mejor y más rápido.
¡Comencemos a revisar 9 de ellos!
1. Usa notaciones de objetos abreviadas en lugar de console.log()
Supongamos que desea generar una variable llamada name. Por lo general, en tales casos, se realiza la siguiente entrada:
console.log('name', name)A partir de ES2015, se utilizan notaciones de objetos abreviadas para registrar dichos datos. Esto significa que puedes escribir lo siguiente:
console.log({name})Y tal registro dará como resultado lo mismo.
2. Agilice la grabación de múltiples elementos
Imagine un script con muchos objetos que deben escribirse en la consola.
const sunil = { name: "Sunil", member: true, id: 134323 };
const ilaria = { name: "Ilaria", member: false, id: 489348};Puede generarlos individualmente. Por ejemplo:console.log()
console.log(sunil)
console.log(ilaria)Este método de registro será lento y no mostrará los nombres de las variables junto con los datos registrados.
En su lugar, vale la pena usar el gran método dado en el primer ejemplo.
console.log({sunil, ilaria})Obtendrá una solución más rápida y con un formato mejor para varios elementos de entrada de consola con nombres de variables junto a cada uno.
3. Usa tablas en lugar de filas
Vayamos un paso más allá: combinemos todos los datos en una tabla. Esto hará que la grabación sea más legible. Si tiene objetos con propiedades comunes o una matriz de objetos, el archivo console.table(). En este caso, usaremos console.table({ foo, bar}), y la consola mostrará:
4. Fusionar registros agrupados
Este método es útil cuando se registran muchos datos diferentes que deben agruparse.
Uno de estos casos es el registro de datos con varias funciones diferentes, en el que es necesario indicar claramente de qué función proviene la información.
Un ejemplo es el registro de datos de usuario:
console.group('User Details');
console.log('name: Sunil Sandhu');
console.log('position: Software Developer');
console.groupEnd();console.group('Account');
console.log('Member Type: Premium Member');
console.log('Member Since: 2018');
console.log('Expiry Date: 20/12/2022');
console.groupEnd();
Si lo desea, puede anidar algunos grupos dentro de otros:
5. Mejorar las alertas
¿Quieres aumentar la visibilidad de cierta información grabada? los mostrará sobre un fondo amarillo:
console.warn('This function will be deprecated in the next release')
6. Mejorar el registro de errores
Vaya un paso más allá si desea utilizar un determinado tipo de registro cuando reciba notificaciones de error de consola rojas alarmantes. Esto se puede lograr de las siguientes maneras:
console.error('Your code is broken, go back and fix it!')
7. Personaliza el aspecto de tu consola
¡Repasa tus habilidades de CSS y aplícalas a tu consola!
Para agregar estilo a cualquier mensaje, puede usar la directiva%c
console.log('%c React ',
'color: white; background-color: #61dbfb',
'Have fun using React!');
8. Mide la velocidad de las funciones
¿Quieres saber qué tan rápido funciona una función en particular? Escribe un código como este:
let i = 0;
console.time("While loop");
while (i < 100000) {
i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 100000; i++) {
// For Loop
}
console.timeEnd("For loop");
Tenga en cuenta que los valores marcados aquí no son estáticos. En otras palabras, dicho registro mostrará cuál de las dos funciones es más rápida en un momento dado. Sin embargo, debe comprender que otros factores, como el rendimiento del equipo y las implementaciones paralelas, también pueden afectar la velocidad de las funciones realizadas. Por lo tanto, después de realizar estas funciones 5 veces más, obtenemos resultados diferentes:
En particular, la función fue más rápida en 3 de cada 5 casosfor loopwhile loop.
9. Mejorar la eficiencia de los seguimientos de pila
console.trace() Imprime un seguimiento de pila en la consola y muestra cómo se agotó el código en un momento determinado. Este método resulta útil cuando se depura código complejo que puede tener llamadas en diferentes lugares. Si bien la siguiente entrada no es un ejemplo de código complejo, al menos muestra cómo funciona:
const sunil = {name: "Sunil", member: true, id: 134323};function getName(person) {
console.trace()
return person.name;
}function sayHi(person) {
let _name = getName(person)
return `Hi ${_name}`
}console.trace() devolverá lo siguiente:
Puede hacer clic en los enlaces azules: cada uno de ellos conducirá al momento en que se ingresó el comandoconsole.trace()
¡Eso es todo! Estos 9 consejos te ayudarán a mejorar tus habilidades de depuración de JavaScript.
