Sección 3: JavaScript avanzado

Lección 19:

Debugging (depuración)

En esta sección vamos a hablar un poco sobre la depuración, un tema muy importante para todo desarrollador. La depuración es el acto de ver el código, entender lo que hace, y averiguar por qué no actúa como debería hacerlo.

Cuando trabajamos como desarrolladores, se utiliza mucho tiempo depurando código. Por lo tanto es un tema muy importante y vamos a ver algunas estrategias que podemos utilizar para hacerlo de la mejor manera.

Veamos la siguiente función:

Es una función bastante compleja, a menos que se tenga una vasta experiencia en JavaScript. Imaginémosnos que estamos trabajando en un equipo y de repente uno de nuestros compañeros se acerca y nos dice: “No se qué ocurre con esta función, ¿podés darme una mano?”.

Tenemos que averiguar qué es lo que hace esta función, y por qué no está funcionando como se espera. Así que ahora veremos una serie de pasos que podemos usar para depurar este código.

Lo primero que vamos a hacer es comprender realmente lo que hace este código. Para ello leeremos con atención el código:

• - Define una constante.
• - Tenemos un array compuesto por tres arrays.
• - Parece que este código intenta juntar este array.
• - El array llama al método reduce y le pasa como parámetro a y b.
• - El acumulador es a. Cambiemos el nombre a por acumulador para entender mejor el código.

Sigamos analizando el código:

• - b representa a cada una de las posiciones del array grande. Por lo tanto b tomará el valor de cada uno de los arrays hijos en cada iteración. Reemplacemos b por el nombre array.

Sigamos analizando el código:

• - Vemos que el acumulador inicializa con un array vacío.

• - En la primera pasada, el acumulador [] se concatenará con [0, 1]. Añadamos un par console.log para ver los valores a través de las iteraciones.

Podemos inferir lo siguiente:

• - Existen tres iteraciones.

• - En la primera iteración, el array es [0, 1], y el acumulador es un array vacío.

• - En la segunda iteración, el array es [2, 3], y el acumulador es el array [0, 1].

• - Finalmente, en la tercera iteración, el array es [4, 5], y el acumulador es el array [0, 1, 2, 3].

Ahora imprimamos juntar.

Veamos un truco más. En lugar de usar console.log, podemos usar algo llamado debugger.

Cuando el motor de JavaScript encuentra la sentencia debugger se detiene, y nos abre una ventana con el código señalado justo donde se detuvo. En esta nueva ventana podremos ver los valores de los parámetros acumulador y array.

Tenemos varias opciones. Podemos hacer click en el botón play para que finalice la ejecución del código. Por ahora no hagamos click en este botón.

También puede hacer click en el botón “step over” para dar un paso adelante hacia la siguiente sentencia.

Hagamos click nuevamente en el botón “step over”.

Ahora podemos ver que el acumulador es [0, 1], y el array es [2, 3]. Podemos seguir haciendo click en el botón “step over”, hasta terminar con la ejecución del programa. El botón play nos sirve para ver de manera inmediata el estado de nuestro programa al final de su ejecución.

Vale mencionar que en la ventana de depuración, podemos ver en el sector derecho los alcances y contextos de todos los elementos de nuestro programa.

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!