Depuración de programas

Otra área fundamental que VSCode nos trae dentro del editor es la depuración de código.

Recordemos que depurar es el proceso que hacemos a nuestros programas para identificar errores que hay en los mismos.

Dentro de la "Barra de actividades" de VSCode podemos identificar el ícono que nos abre el diálogo de depuración:

Cada ambiente de trabajo tiene sus propias herramientas de depuración: Node.JS, Python, C# etc.

Prueba de depuración con Node.JS

Crearemos un pequeño proyecto con dos archivos y algunos errores en su interior para posteriormente depurarlos.

En una carpeta crearemos dos archivos que ejecutaremos luego desde el ambiente de Node.JS.

matematica.js

const PI = 2.14;

function sumar(x1, x2) {
    return x1 - x2;
}

function restar(x1, x2) {
    return x1 - x2;
}

function dividir(x1, x2) {
    if (x2 == 0) {
        mostrarErrorDivision();
    }
    else {
        return x1 / x2;
    }
}

function mostrarErrorDivision() {
    console.log('No se puede dividir por cero');
}

exports.sumar = sumar;
exports.restar = restar;
exports.dividir = dividir;
exports.PI = PI;

principal.js

const mat=require('./matematica');

let s = mat.sumar(2, 2);
let r = mat.restar(4, 1);
let d = mat.dividir(6, 3);

console.log('La suma de 2+2=' + s);
console.log('La resta de 4-1=' + r);
console.log('La división de 6/3=' + d);
console.log('El valor de PI=' + mat.PI);

Abrimos el archivo 'principal.js' y presionamos el botón de 'Ejecutar y depurar', se nos muestra que podemos ejecutarlo con Node:

Podemos ver la consola y comprobaremos que algunos resultados son incorrectos (la suma y el valor de PI):

En la pestaña donde se llama a la función 'sumar' dispondremos un punto de ruptura. Esto se logra disponiendo la flecha del mouse a la izquierda del comando:

Procederemos ahora a abrir la opción de "Depurar" ( Ctrl + Shift + D o el ícono de la barra de actividades) e iniciamos la depuración:

El programa empieza a ejecutarse y se detiene en la línea donde dispusimos el punto de ruptura (break point):

Como vemos aparece una barra de botones que nos permite:

Continuar (F5) (el triángulo azul)
Depurar paso a paso por procedimiento (F10)
Depurar paso a paso por instrucciones (F11)
Salir de depuración (Shift + F11)
Reiniciar (Ctrl + Shift + F5)
Detener (Shift+F5)

En nuestro problema elegiremos "Depurar paso a paso por instrucciones" para analizar el algoritmo de la función sumar:

Disponiendo la flecha del mouse sobre el nombre de una variable o parámetro se nos muestra su contenido. Podemos identificar luego que la lógica de la función sumar es incorrecta:

    return x1 - x2;

Cuando debería ser:

    return x1 + x2;

Reiniciar la depuración y probemos ahora de ejecutar "Depurar paso a paso por procedimiento", veremos ahora que la función sumar se ejecuta en forma completa pero sin entrar y ejecutarla paso a paso sus instrucciones:

Acceso a las opciones de depuración desde el menú de barra.

Todas las opciones que hemos visto hasta ahora las podemos acceder también desde la opción de menú de barra "Ejecutar":

Juego para memorizar los atajos de teclado en VSCode (hasta lo visto en este concepto)

Retornar

13 - Depuración de programas

Prueba de depuración con Node.JS

Acceso a las opciones de depuración desde el menú de barra.