Como desarrollador web, tú debes saber muy bien la necesidad de depurar tu código. A menudo usamos bibliotecas externas para los registros, y para formatearlos y/o mostrarlos en algunos casos, pero la consola de nuestros navegadores es mucho más potente de lo que pensamos.
Cuando pensamos en la consola, lo primero que nos viene a la mente y el console.log, ¿verdad? Pero hay muchos más métodos de los que imaginamos. Ahora veremos cómo aprovechar al máximo el uso de la consola, y te daré algunos consejos para que estos métodos sean más legibles
¿Qué es la Consola?
La consola JavaScript es una característica incorporada en los navegadores modernos que viene con herramientas de desarrollo listas para usar en una interfaz similar a una concha. Le permite a un desarrollador:
- Ver un registro de errores y advertencias que se producen en una página web.
- Interactuar con la página web usando comandos JavaScript.
- Depurar aplicaciones y atravesar el DOM directamente en el navegador.
- Inspeccionar y analizar la actividad de la red
Básicamente, te permite escribir, administrar y supervisar JavaScript directamente en su navegador.
Console.log, Console.error, Console.warn y Console.info
Estos son probablemente los métodos más utilizados de todos. Puedes pasar más de un parámetro a estos métodos. Cada parámetro es evaluado y concatenado en una cadena delimitada por el espacio, pero en el caso de objetos o matrices se puede navegar entre sus propiedades.
Consola.group
Este método le permite agrupar una serie de console.logs (pero también información de error, etc.) bajo un grupo que puede ser colapsado. La sintaxis es realmente muy sencilla: basta con introducir todo el console.log que queremos agrupar antes que console.group() (o console.groupCollapsed() si queremos que se cierre por defecto). Luego agrega un console.groupEnd() al final para cerrar el grupo.
Desde que descubrí la consola.table mi vida ha cambiado. Mostrar JSON o arrays JSON muy grandes dentro de un console.log es una experiencia aterradora. El console.table nos permite visualizar estas estructuras dentro de una hermosa tabla donde podemos nombrar las columnas y pasarlas como parámetros.
Console.count, Console.time y Console.timeEnd
Estos tres métodos son la navaja suiza para cada desarrollador que necesite depurar. El console.count cuenta y emite el número de veces que count() ha sido invocado en la misma línea y con la misma etiqueta. El console.time inicia un temporizador con un nombre especificado como parámetro de entrada, y puede ejecutar hasta 10.000 temporizadores simultáneos en una página determinada. Una vez iniciado, usamos una llamada a console.timeEnd para detener el temporizador e imprimir el tiempo transcurrido en la Consola.
Console.trace y Console.assert
Estos métodos simplemente imprimen una traza de pila desde el punto en el que fue llamada. Imagine que está creando una biblioteca JS y desea informar al usuario dónde se generó el error. En ese caso, estos métodos pueden ser muy útiles. El console.assert es como el console.trace pero sólo se imprimirá si la condición pasada no ha pasado.
Como podemos ver, la salida es exactamente lo que React (o cualquier otra librería) nos mostraría cuando generamos una excepción.
Borrar todas las consolas
El uso de consolas a menudo nos obliga a eliminarlas. O a veces nos olvidamos de la construcción de la producción (y sólo nos damos cuenta de ello por error días y días después). Por supuesto, no aconsejo a nadie que abuse de las consolas donde no se necesitan (la consola en el mango de entrada de cambio puede ser borrada después de ver que funciona). Debe dejar registros de errores o registros de rastreo en modo de desarrollo para ayudarte a depurar. Uso mucho Webpack, tanto en el trabajo como en mis propios proyectos. Esta herramienta le permite borrar todas las consolas que no desea que permanezcan (por tipo) de la estructura de producción utilizando el plugin uglifyjs-webpack-plugin
