Depura tu código JavaScript fácilmente

Actualmente muchas personas empiezan su etapa de desarrollador utilizando como lenguaje de entrada JavaScript, por sus múltiples usos, pequeña curva de aprendizaje inicial y la capacidad de poder desarrollar código en este lenguaje desde un navegador web.

Debido a las características anteriores y a que muchos de los nuevos desarrolladores que utiliza JavaScript vienen del mundo de la maquetación web (HTML y CSS), la depuración del código suele ser un asignatura pendiente en la mayoría de los casos.

Si alguno se ha tenido que enfrentar a depurar código C con GDB sabrá que depurar nunca es algo placentero, ni fácil, ni rápido. Pero ahora ya contamos con muchos softwares con interfaz visual que nos facilitan en gran medida la depuración del código.

Acabando con el console.log()

Una de las primeras funciones que uno aprende cuando trabaja con JavaScript es cómo mostrar texto en la consola, ya que es una forma muy útil de informar qué está haciendo nuestra aplicación sin tener que modificar la interfaz de usuario. Sin embargo, esta misma función suele ser utilizada en gran medida para ir mostrando valores y depurar nuestro código. Esto es lo que en C y otros lenguajes se conoce como: depurar con prints, lo cuál ha sido reconocido por la comunidad como una mala práctica, por los siguientes motivos:

• No permite hacer un seguimiento completo de cómo se ha llegado a ese punto del flujo de ejecución.
• No muestra el valor de los parámetros y de todas sus variables.
• No permite guardar ese flujo de ejecución para ser compartido y que otra persona pueda depurar el programa.
• El momento en el cuál el valor se escribe en la pantalla puede ser bastante posterior al instante donde ocurrió.
• Es extremadamente complejo aplicarlo en programas multihilo al compartir un mismo recurso (salida por consola) entre varios hilos.

Breakpoints al poder

La solución a todo lo anterior es el uso de breakpoints, es decir, indicar con la consola del navegador que cuando el flujo de ejecución vaya a ejecutar esa línea, se pare y te permita observar una fotografía del instante actual.

Añadir breakpoints, es un proceso tedioso, por lo que si conoces de antemano que deberías parar el depurador en una línea concreta, deberías utilizar la orden debug;. Esta instrucción sólo va a ser interpretada por el depurador, realizando el mismo comportamiento que si encontrase un breakpoint y así conseguirás depurar de una manera más rápida. Esta instrucción es compatible con todos los navegadores.

Para finalizar este artículo, te dejo otro recurso donde te enseñan a cómo utilizar todas las opciones del depurador.

Espero que te haya parecido interesante este artículo.

La imagen que ilustra este artículo se ha realizado gracias al icono hecho por Freepik