Al mando de la consola de Javascript

Al mando de la consola de Javascript

Trucos útiles para depurar, formatear y mejorar

La consola es una de las primeras herramientas que los desarrolladores conocen. La consola es la herramienta que utilizan los desarrolladores al depurar sus propias aplicaciones. La ley del instrumento establece que es fácil desarrollar un exceso de confianza en una herramienta familiar.

“Supongo que es tentador, si la única herramienta que tienes es un martillo, tratar todo como si fuera un clavo”. -Maslow

La misma idea se puede aplicar a la consola. En un ecosistema donde las herramientas, los atajos de teclado y las API fluyen como leche y miel en la tierra prometida, es difícil justificar la elección de un nuevo martillo cuando el anterior funciona bien. Sin embargo, créame en este caso, esas cosas con puntas en la parte posterior de su martillo no son solo para arrancar clavos.

Los siguientes son algunos de los trucos más simples que he encontrado para depurar en la consola.

# 1: Argumentos de envoltura

Si envuelve el argumento pasado console.logen {}, generará los datos que está registrando en forma de objeto. El objeto tendrá un nombre agradable para indicarle qué era lo que estaba intentando generar.

En lugar de ver un montón de objetos con campos similares como id y nombre en su consola de esta manera:

Obtendrá el nombre de la variable delante de los datos que se imprimen de esta manera:

# 2: Copiar datos al portapapeles

Puede copiar los datos registrados en la consola al portapapeles de su computadora. Encuentro esto útil cuando desea manipular un objeto en un REPL o extraer datos que está depurando.

Haga clic con el botón derecho junto a los datos que desea copiar y seleccione “Almacenar como variable global”. Esto guardará los datos como una variable en la consola con un nombre temporal. (Si es la primera vez que lo hace en una ventana de la consola, lo será temp1). Entonces puede usar el copy()comando poniendo el nombre temp1como argumento. Esto copia los datos almacenados en su portapapeles que puede pegar como lo haría con cualquier otra cosa que copie.

Es especialmente útil cuando una consulta de base de datos no devuelve datos en un formato que coincida con cómo se manipulan sus datos en la interfaz. Puede mostrarle cómo se modifican o transforman los datos.

# 3: expresiones de cortocircuito

Si cortocircuita una expresión con un ||, puede hacer que refactorice el código o agregue una declaración de depuración mucho más rápido. Esto es particularmente útil con las funciones de flecha gruesa de una línea en las que desea ver qué datos está recibiendo como argumento.

// THISsomeFunction = data => ( )
// BECOMES...someFunction = data => console.log(data) || ( )
// RATHER THAN...someFunction = data => { console.log(data) return ( )}

Dejas de envolver toda la función entre llaves y agregar un retorno. Parece que esto no es tan importante hasta que optimizas el rendimiento y lo haces mil veces tratando de averiguar qué pecado atroz de React has cometido.

# 4: registro, error, advertencia

Además console.log(), la consola tiene varias otras funciones para imprimir datos en la consola en diferentes formatos predefinidos. Entre estos se encuentran:

  • console.log()
  • console.warn()
  • console.error()

# 5: formato personalizado para salida de consola

Se puede hacer algo más que poner en práctica la incorporada en el formato con console.log, warny error. ¡Puedes jugar el papel de artista donde la consola es tu lienzo!

Tal vez intente imprimir una buena pastilla alrededor de la salida que desea enfatizar:

Aquí está ese fragmento:

También puede almacenar CSS para usar como estilos en una variable para aplicar a la salida. Puede golpear a sus compañeros de trabajo con un toque de arco iris para seguir todo lo que produce. Si quieres arcoíris gigantes que lo sigan todo, prueba esto:

# 6: Imprimir JSON como una tabla

Sin que muchos lo sepan, la consola tiene un método incorporado para imprimir datos tabulares en formato de tabla. Esto puede ser excelente para examinar rápidamente datos JSON.

# 7: conteo fácil

El console.count()método puede hacer que el seguimiento de cuántas veces ha llegado a un punto en su código sea realmente simple. Ya no necesita modificar su código para incrementar las variables.

Consejo profesional: puede reemplazar "número" con una etiqueta de una variable y contará cuántas veces se ha alcanzado el método de recuento con esa etiqueta.

Encontré que esto es útil cuando trato de depurar condiciones de carrera o re-renderizado innecesario en una aplicación React.

# 8: Uso de elementos DOM

Puede seleccionar un elemento DOM en la pestaña Elementos y luego acceder a él con $0. El navegador realmente mantendrá un historial donde $0representa la selección actual. $1representa la selección anterior. $2la penúltima selección y así sucesivamente hasta 5 elementos.

Puede preguntarse: ¿cuándo querría cambiar el HTML interno de mi aplicación desde la consola? Y la respuesta sería probablemente solo cuando desee un GIF de ejemplo realmente simple para una publicación de blog. Pero esto también tiene sus casos de uso.

# 9: La declaración del depurador

Si alguna vez agregó un archivo console.log, ingresó a las herramientas del navegador y agregó un punto de interrupción, para ver qué sucede cuando llega a ese código, libérese con la debuggerdeclaración.

Si agrega debuggeruna línea en su Javascript, el navegador se detendrá y abrirá las herramientas de depuración y pausará la ejecución.

Aunque no es una función de consola, es bueno saberlo. El registro de información en la consola no es tan efectivo o eficiente como las herramientas de depuración integradas en los navegadores (como la pestaña Fuentes de Chrome o la pestaña Depurador de Firefox). Para mejorar aún más su depuración, busque recursos que se sumerjan en esas herramientas.

Sin embargo, la consola sigue siendo una forma realmente rápida y efectiva de ver el flujo de aplicaciones en aplicaciones donde se están activando muchos métodos de ciclo de vida diferentes y re-renderizaciones y mejorar la forma en que los usa también lo convertirá en un mejor desarrollador.

¡Gracias por leer!

Si tiene sus propios consejos, ¡compártalos! Me encantaría saber de ti aquí en los comentarios, en Twitter o por correo electrónico.

Si lo que leíste te pareció interesante o útil, siéntete bienvenido a dejar un aplauso o dos, suscribirte para recibir actualizaciones futuras o retuitear / compartir este tweet: