Cómo detectar y corregir en JavaScript

Durante el proceso de desarrollo de un software, ya sea una página web, un micro servicio, etc, e independientemente del lenguaje empleado, es importante saber cómo analizar el código, detectar los errores y solucionarlos. Javascript no es menos, pero no tenemos ningún IDE, al menos gratuito, dedicado a ello. No pasa nada, ya que con el navegador podemos hacerlo sin problema, y hoy os voy a enseñar cómo.

¡Hazte un experto en programación con el curso de Programación en PHP, Javascript y MySQL!

Solucionar errores en vuestras apps Javascript

En realidad no es del todo cierto que no haya un IDE dedicado a Javascript, pero hay un problema y es que requieren licencia de pago, la cual anualmente no sale muy barata…por esa razón no voy a mencionar de cual se trata. Lo que si haré es recomendar un editor de texto gratuito y open source llamado Atom, el cual es uno de los más usados para realizar código web. Además también tenéis la posibilidad de instalar paquetes que mejoran la productividad de vuestro trabajo en JS. La clave es buscar un “Linter” de este lenguaje. Esta clase de añadido se encarga de resaltar y comunicar al programador los errores de código, de sintaxis, que existan en ese documento. Normalmente es una característica que no encontramos en un editor de código, como Atom, VSCode o Notepad++. Pero gracias a que se puede hacer código que mejora el programa, podemos añadir soluciones para hacer desaparecer las carencias.

En esta imagen podemos ver como Atom detecta un error de sintaxis y se encarga de comunicarlo al programador, dejando clara la línea y, si es posible, el tipo de error. Por ejemplo, si nos hemos dejado un punto y coma (semicolon en inglés), Atom se encargará de señalarte la línea en la que hay esa carencia, te la marcará en rojo y con un punto al lado del número de la línea, para que tú puedas identificar de forma rápida dónde se ubica dicho error. Como podéis ver esto es fundamental en cualquier desarrollo porqué mejora sustancialmente la productividad, el flujo de trabajo y la detección de errores múltiples que puedan haber.

Pero establecer una solución en el editor no es la única. De hecho como comentaba, el navegador también es un poderoso aliado. Vamos a hablar de esto tomando Google Chrome como referencia, pero también sirve para Firefox. Uno de los aspectos clave de cualquier IDE es la posibilidad de depurar el código. ¿Qué es depurar? Se trata de ejecutar el código línea por línea en un entorno de prueba de errores para poder detectar qué está causando el posible error. Lo más interesante de la depuración es la posibilidad de establecer puntos de detención, o breakpoints, al gusto del programador, donde la ejecución del programa se va a detener hasta que nosotros demos luz verde para continuar.

¿Por qué? En el entorno de depuración podemos saber el valor de las variables en cada momento. Si tenemos el programa en la ejecución de un bucle, podemos ver en cada vuelta como un contador puede crecer, como se comportan el resto de variables y tener un control sobre las estructuras de datos, como los arrays. Esto, como es natural pensar, nos otorga una gran cantidad de pistas en forma de datos del estado del programa que nos ayudará a poder comprender por qué no funciona.

¿Esto qué tiene que ver con el navegador? Pues que Atom, al ser un editor de código, y no un IDE (esta diferencia es muy importante tenerla clara), no dispone de un depurador de código. Aquí entra en juego nuestro amigo el navegador, en este caso Chrome, y es que los navegadores cuentan con un depurador integrado en sus herramientas para desarrolladores, las cuales podéis activar desde el menú del programa, en la sección de “más herramientas”.

Dentro tendréis un sub menú llamado “herramientas para desarrolladores”. Cuando las activéis, podréis ver como se abre un panel, inferior o en un lateral, con el código html y los estilos de la página donde hayáis activado las herramientas. Os debéis dirigir a la pestaña de “Sources” y entonces visualizaréis un árbol de directorios donde están todos los ficheros de la web, entre ellos los JavaScript. Buscad el documento que necesitáis analizar y podréis ver, igual que antes con los estilos, todas las líneas de código que se han ejecutado para cargar la página. Debería aparecer lo mismo que tenéis en Atom, con la diferencia de que si presionáis con vuestro ratón encima de alguna línea, se va a establecer un breakpoint, como he comentado antes. Si refrescáis la página, ahora el código se va a detener en el punto de ejecución que habéis establecido, indicando en uno de los paneles el valor de las variables, el punto de ejecución en el que se encuentra, etc.

Como podéis comprobar, pese a que no tengamos un IDE al 100%, en el caso de web no es un problema poder depurar el código, ya que tenemos todas las herramientas a nuestra disposición para poder hacerlo, y sin gastar ni un solo euro, open source e igual de productivas que las de pago.