Cómo puede mejorar su flujo de trabajo usando la consola de JavaScript

Como desarrollador web, conoces 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 poderosa de lo que pensamos.

Cuando pensamos en la consola, lo primero que nos viene a la mente y el console.log, ¿no? 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 de JavaScript es una función incorporada en los navegadores modernos que viene con herramientas de desarrollo listas para usar en una interfaz similar a un shell. Permite a un desarrollador:

  • Vea un registro de errores y advertencias que ocurren en una página web.
  • Interactúe con la página web mediante comandos de JavaScript.
  • Depura aplicaciones y recorre el DOM directamente en el navegador.
  • Inspeccionar y analizar la actividad de la red

Básicamente, le permite escribir, administrar y monitorear JavaScript directamente desde su navegador.

Console.log, Console.error, Console.warn y Console.info

Estos son probablemente los métodos más utilizados de todos. Puede pasar más de un parámetro a estos métodos. Cada parámetro se evalúa y concatena en una cadena delimitada por el espacio, pero en el caso de objetos o matrices se puede navegar entre sus propiedades.

Console.group

Este método le permite agrupar una serie de console.logs (pero también información de error, etc.) en un grupo que se puede contraer. La sintaxis es realmente muy sencilla: basta con introducir todo lo console.logque queramos agrupar antes de a console.group()(o console.groupCollapsed()si queremos que esté cerrado por defecto). Luego agregue un console.groupEnd()al final para cerrar el grupo.

Los resultados se verán así:

Mesa de consola

Desde que descubrí el, console.tablemi vida ha cambiado. Mostrar JSON o matrices JSON muy grandes dentro de un console.loges una experiencia aterradora. El console.tablecon nosotros permite visualizar estas estructuras dentro de una hermosa mesa donde podemos nombrar las columnas y pasarlos como parámetros.

El resultado es maravilloso y muy útil en la depuración:

Console.count, Console.time y Console.timeEnd

Estos tres métodos son la navaja suiza para todo desarrollador que necesite depurar. Los console.countrecuentos y salidas el número de veces que count()ha sido invocado en la misma línea y con la misma etiqueta. La console.timepone en marcha un temporizador con un nombre especificado como un parámetro de entrada, y se puede ejecutar hasta 10.000 temporizadores simultáneos en una página determinada. Una vez iniciado, usamos una llamada a console.timeEndpara detener el temporizador e imprimir el tiempo transcurrido en la Consola.

La salida se verá así:

Console.trace y Console.assert

Estos métodos simplemente imprimen un seguimiento de la pila desde el punto donde se llamó. 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 resultar muy útiles. El console.assertes como el console.tracepero se imprimirá solo si la condición aprobada no pasó.

Como podemos ver, el resultado es exactamente lo que React (o cualquier otra biblioteca) nos mostraría cuando generamos una excepción.

¿Eliminar todas las consolas?

El uso de consolas a menudo nos obliga a eliminarlas. O a veces nos olvidamos de la construcción de producción (y solo los notamos por error días y días después). Por supuesto, no le aconsejo a nadie que abuse de las consolas donde no son necesarias (la consola en el identificador de entrada de cambio se puede eliminar después de ver que funciona). Debe dejar los registros de errores o los registros de seguimiento en modo de desarrollo para ayudarlo a depurar. Utilizo mucho Webpack, tanto en el trabajo como en mis propios proyectos. Esta herramienta le permite eliminar todas las consolas que no desea que permanezcan (por tipo) de la compilación de producción utilizando el complemento uglifyjs-webpack-plugin?

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : []}

La configuración es realmente trivial y simplifica el trabajo, así que diviértete con la consola (¡pero no abuses de ella!)

Si te gustó el artículo, aplaude y sígueme :)

Gracias y estad atentos?

Sigue mis últimas noticias y consejos en Facebook