Breakpoints: Usando Debugging Eficiente -

¿Qué es la depuración eficiente?

La depuración eficiente va más allá de solo encontrar errores; se trata de detectar, comprender y resolver problemas de código de manera rápida y sistemática. En lugar de adivinar lo que está mal, la depuración eficiente utiliza herramientas especializadas para observar el comportamiento del código mientras se ejecuta. Esto te permite ver el valor de las variables, el flujo de ejecución y el estado de tu programa en tiempo real, lo que acelera el proceso de solución de problemas.

La práctica más común pero menos eficiente es usar console.log para imprimir valores. Si bien puede ser útil para una revisión rápida, es una forma muy limitada de depurar. A menudo, terminas agregando y quitando múltiples console.log para seguir el rastro de un error, lo que ensucia tu código y no te da una visión completa de lo que está sucediendo. También pueden visitar nuestro blog.

Usa el depurador (Debugger) de tu editor

La forma más potente de depurar es utilizando el depurador integrado en tu editor de código, como el que tiene VS Code. Esta herramienta te permite pausar la ejecución de tu programa en puntos específicos, lo que se conoce como puntos de interrupción o breakpoints.

Puntos de interrupción (Breakpoints)

Un breakpoint es un marcador que colocas en una línea de código. Cuando el programa llega a esa línea, la ejecución se detiene automáticamente. Esto te da la oportunidad de examinar el estado del programa en ese momento preciso. Para colocar un breakpoint en VS Code, simplemente haz clic a la izquierda del número de línea.

Explorar las variables y la pila de llamadas (Call Stack)

Una vez que el programa se detiene en un breakpoint, las herramientas del depurador se vuelven tu mejor aliado.

Variables: En la ventana de depuración, puedes ver todas las variables que están en el alcance en ese momento, junto con sus valores. Esto te permite verificar si una variable tiene el valor que esperas o si un cálculo salió mal.
Pila de llamadas (Call Stack): La pila de llamadas te muestra la secuencia de funciones que se han llamado para llegar al punto actual. Esto es crucial para entender el flujo del programa, especialmente en aplicaciones complejas. Te muestra desde dónde se llamó a la función actual, lo que te ayuda a rastrear el origen de un problema.

Controles de ejecución

Además de los breakpoints, el depurador te da control total sobre la ejecución del código:

Paso a paso (Step Over): Ejecuta la siguiente línea de código y se detiene. Si la siguiente línea es una llamada a una función, la ejecuta completamente sin entrar en ella.
Entrar a la función (Step Into): Entra en la función que se está llamando para que puedas ver su ejecución línea por línea.
Salir de la función (Step Out): Termina la ejecución de la función actual y regresa a la línea donde fue llamada.
Continuar (Continue): Reanuda la ejecución del programa hasta el siguiente breakpoint o hasta que el programa termine.

Ventajas del depurador frente a `console.log`

Característica	Depurador	`console.log`
Visibilidad	Tienes una vista completa de todas las variables y el estado del programa.	Solo ves los valores que decides imprimir, y debes volver a ejecutar el programa para ver nuevos datos.
Control	Puedes controlar el flujo de ejecución del programa, avanzar paso a paso o entrar en funciones.	No tienes control sobre el flujo de ejecución.
Eficiencia	Mucho más rápido para encontrar la causa raíz de un error, ya que no tienes que modificar y guardar el código constantemente.	Requiere que edites, guardes y vuelvas a ejecutar el código repetidamente para rastrear un problema.
Limpieza del código	No dejas rastros en el código una vez que el error está resuelto.	Tienes que asegurarte de eliminar todos los `console.log` antes de la producción, lo que puede ser tedioso.

Exportar a Hojas de cálculo

El depurador frente a console.log

El método tradicional de usar console.log para depurar implica insertar líneas de código para imprimir variables en la consola. Esto es ineficiente porque:

Ensucia el código: Tienes que añadir y luego eliminar las llamadas a console.log.
Visibilidad limitada: Solo puedes ver los valores que decidiste imprimir, lo que a menudo requiere múltiples intentos para encontrar el error.
No hay control: No puedes controlar el flujo de ejecución, como ir paso a paso.

El depurador es una herramienta integrada que soluciona estos problemas. Te da un control completo sobre la ejecución de tu código sin necesidad de modificarlo.

Cómo usar el depurador en VS Code (Ejemplo Práctico)

Vamos a suponer que tienes una función simple en JavaScript que calcula la suma de números en un arreglo y, por alguna razón, no está dando el resultado correcto.

Código con un error:

JavaScript

function calcularSuma(numeros) {
    let resultado = 0;
    for (let i = 0; i < numeros.length; i++) {
        resultado = numeros[i]; // ¡Aquí está el error! Debería ser resultado += numeros[i]
    }
    return resultado;
}

const miArreglo = [10, 20, 30];
const total = calcularSuma(miArreglo);
console.log(total); // Esperamos 60, pero obtendrás 30.

Coloca un «Breakpoint»

En VS Code, ve a la línea resultado = numeros[i]; y haz clic en el área a la izquierda del número de línea. Aparecerá un círculo rojo, que es tu punto de interrupción o breakpoint.

Inicia el depurador

Haz clic en el icono de «Run and Debug» (un insecto con una flecha) en la barra lateral de VS Code y luego en el botón «Run and Debug». El programa se ejecutará hasta que llegue a tu breakpoint y se detendrá.

Explora las variables y la pila de llamadas

Una vez que el programa se detiene, la ventana de depuración te muestra información crucial:

Variables: Verás una sección de «Variables» donde puedes inspeccionar los valores actuales. Por ejemplo, en la primera iteración del bucle, verás i = 0 y resultado = 10. Después de la primera ejecución de la línea con el error (resultado = numeros[i];), verás que resultado ahora es 10. Si continúas la ejecución (usando el botón «Step Over»), verás que en la siguiente iteración resultado se convierte en 20 en lugar de 30. Esto te ayuda a identificar el error de asignación (=) en lugar de suma (+=).
Pila de Llamadas (Call Stack): En la sección «Call Stack», verás que la función calcularSuma fue llamada desde la línea donde se declara la variable total. Esto es muy útil en programas más grandes para entender de dónde viene la ejecución.

Resuelve el problema

Ahora que has identificado el error, puedes detener la ejecución, corregir la línea a resultado += numeros[i]; y ejecutar el programa nuevamente. Esta vez, el depurador te mostrará que resultado se actualiza correctamente en cada iteración, dándote el valor final esperado de 60.

El depurador te da una visión completa del estado de tu programa en cualquier momento, lo que hace que la detección y corrección de errores sea mucho más rápida que el método de prueba y error de console.log.

En resumen, usar el depurador de tu editor es una habilidad esencial para cualquier desarrollador. Te ahorra tiempo y esfuerzo, permitiéndote resolver problemas de manera más inteligente y efectiva. Tambien puedes ver esta pagina para saber un poco más de debugging eficiente.