Depurar Debug

Iniciar debugger en VSCode

El debugger de VSCode es una herramienta integrada que permite ejecutar código paso a paso, inspeccionar variables y encontrar errores de forma sistemática. A diferencia de las build tasks que compilaban o ejecutaban código, el debugger proporciona control total sobre la ejecución del programa.

Acceder al Run and Debug view

La vista de Run and Debug se activa mediante Ctrl+Shift+D o haciendo clic en el icono de reproducción con un insecto en la barra lateral. Esta vista contiene varios paneles especializados que trabajan conjuntamente durante el proceso de debugging:

• Variables: Muestra el estado actual de todas las variables en el scope
• Watch: Permite monitorear expresiones específicas
• Call Stack: Visualiza la pila de llamadas de funciones
• Breakpoints: Lista todos los puntos de interrupción configurados

En la parte superior encontrarás la barra de herramientas de debugging con controles para iniciar, pausar y navegar por el código durante la ejecución.

Configuración inicial con launch.json

Para iniciar el debugging, VSCode necesita saber cómo ejecutar tu aplicación. Esta configuración se almacena en el archivo launch.json dentro de la carpeta .vscode de tu proyecto.

Cuando accedes por primera vez al Run and Debug view, VSCode te ofrece crear una configuración automática. Para JavaScript/Node.js, puedes seleccionar "Node.js" y VSCode generará una configuración básica:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/app.js",
            "console": "integratedTerminal"
        }
    ]
}

Los campos principales de esta configuración son:

• type: Especifica el tipo de debugger (node, python, etc.)
• request: Define si lanzar ("launch") o conectar ("attach") al proceso
• name: Nombre descriptivo que aparece en el dropdown
• program: Ruta al archivo principal de tu aplicación
• console: Dónde mostrar la salida del programa

Primer debugging session

Una vez configurado el launch.json, puedes iniciar el debugging de varias formas:

• Presionar F5 (Start Debugging)
• Hacer clic en el botón de play verde en la vista Run and Debug
• Usar Ctrl+Shift+P y buscar "Debug: Start Debugging"

Antes de iniciar, es recomendable establecer al menos un breakpoint haciendo clic en el margen izquierdo del editor, junto al número de línea. Aparecerá un punto rojo que indica dónde se pausará la ejecución.

Considera este ejemplo básico de JavaScript:

// app.js
function calcularPromedio(numeros) {
    let suma = 0;
    for (let i = 0; i < numeros.length; i++) {
        suma += numeros[i]; // Breakpoint aquí
    }
    return suma / numeros.length;
}

const valores = [10, 20, 30, 40];
const resultado = calcularPromedio(valores);
console.log(`El promedio es: ${resultado}`);

Al presionar F5, el programa se ejecutará hasta encontrar el breakpoint en la línea marcada. En ese momento, la ejecución se pausará y podrás inspeccionar el estado actual de todas las variables.

Navegación durante el debugging

Una vez pausado en un breakpoint, tienes varios controles de navegación disponibles en la barra de herramientas:

• Continue (F5): Continúa la ejecución hasta el siguiente breakpoint
• Step Over (F10): Ejecuta la línea actual sin entrar en funciones
• Step Into (F11): Entra dentro de las funciones llamadas en la línea actual
• Step Out (Shift+F11): Sale de la función actual y regresa al caller
• Restart (Ctrl+Shift+F5): Reinicia toda la sesión de debugging
• Stop (Shift+F5): Termina la sesión de debugging

El flujo típico de debugging implica usar Step Over para avanzar línea por línea, Step Into cuando necesitas examinar el interior de una función, y Continue cuando quieres saltar al siguiente punto de interés.

Debug Console

Durante una sesión activa de debugging, la Debug Console se abre automáticamente en el panel inferior. Esta consola permite evaluar expresiones en tiempo real usando el contexto actual del programa.

Puedes escribir cualquier expresión JavaScript válida y ver su resultado inmediatamente:

// En la Debug Console, mientras estás pausado:
suma
// Muestra el valor actual de la variable suma

numeros.length
// Muestra la longitud del array

Math.max(...numeros)
// Evalúa expresiones complejas usando el estado actual

La Debug Console es especialmente útil para probar hipótesis sobre el comportamiento del código sin modificar el archivo fuente.

Gestión de breakpoints

Los breakpoints son puntos de control que pausan la ejecución en líneas específicas. VSCode ofrece varios tipos de breakpoints para diferentes necesidades:

Breakpoints simples se crean haciendo clic en el margen izquierdo. Puedes deshabilitarlos temporalmente haciendo clic derecho y seleccionando "Disable Breakpoint", lo que los convierte en círculos grises sin eliminarlos.

Breakpoints condicionales se activan solo cuando se cumple una condición específica. Para crearlos, haz clic derecho en el margen y selecciona "Add Conditional Breakpoint":

// Breakpoint condicional: i === 2
for (let i = 0; i < numeros.length; i++) {
    suma += numeros[i]; // Solo se pausa cuando i es igual a 2
}

El panel Breakpoints en la vista Run and Debug muestra todos los breakpoints activos, permitiendo habilitarlos, deshabilitarlos o eliminarlos de forma centralizada.