Hackea tu código con el Debugging en VS Code

¡Hola! En este artículo te mostraré cómo puedes utilizar el depurador en VS Code para mejorar tu experiencia de programación y detectar errores en tu código de manera más eficiente. El depurador es una herramienta incorporada en VS Code que te permite encontrar y corregir errores en tu código, o incluso sugerir formas de solucionarlos. ¡Sigue leyendo para aprender cómo utilizarlo!

¿Qué es un depurador?

Antes de sumergirnos en cómo utilizar el depurador en VS Code, es importante entender qué es realmente un depurador. Un depurador es un programa o herramienta que se utiliza para buscar y corregir errores en el código. En otras palabras, es como un detective que te ayuda a encontrar los errores ocultos en tu código y te ofrece soluciones para corregirlos.

El depurador en VS Code

VS Code tiene una herramienta de depuración integrada que te permite ejecutar y depurar tu código paso a paso, lo que te permite examinar el estado del programa en cada paso y detectar cualquier problema. Puedes establecer puntos de interrupción en tu código, lo que significa que el depurador se detendrá automáticamente en esos puntos para que puedas examinar el estado de tus variables y seguir el flujo de ejecución.

Utilizando el depurador en VS Code

Para utilizar el depurador en VS Code, sigue estos sencillos pasos:

1. Instala la extensión de depuración más adecuada para el lenguaje de programación que estás utilizando. Para ello, ve al menú superior, selecciona “Instalación de depuradores adicionales” y elige los lenguajes que deseas utilizar.
2. Una vez instalada la extensión, deberás configurar el archivo “launch.json” que se encuentra en la carpeta “.vscode” de tu proyecto. Este archivo es donde se almacenan todas las configuraciones de depuración.
3. Ahora, puedes establecer puntos de interrupción en tu código, lo que te permitirá detener la ejecución del programa en esos puntos y examinar el estado de las variables.
4. Para iniciar la depuración, puedes hacerlo de varias formas. Puedes utilizar la paleta de comandos, presionar F5 o seleccionar la opción “Depurar” en la barra lateral.

Crear un programa de Node.js

Si estás utilizando Node.js, es necesario crear un programa simple para ejecutar el depurador. Aquí te muestro cómo hacerlo:

1. Asegúrate de tener Node.js instalado en tu computadora. Puedes descargarlo desde su página oficial.
2. Verifica que Node.js esté instalado escribiendo “node -v” en la terminal. Debería mostrarte la versión que tienes instalada.
3. Crea una carpeta vacía en tu escritorio y asígnale un nombre.
4. Abre VS Code y en la terminal, ingresa los siguientes comandos: mkdir (para crear la carpeta) y cd (para ingresar a la carpeta).
5. Una vez en la carpeta, puedes crear un nuevo archivo de JavaScript con el siguiente comando: touch app.js
6. Abre el archivo “app.js” en el editor y escribe el siguiente código:

        var msg = 'Hola, Mundo';
        console.log(msg);
      

7. Guarda el archivo y asegúrate de que el archivo esté seleccionado en el Explorador de archivos de VS Code.
8. ¡Genial! Ahora tienes un programa de Node.js simple listo para ser ejecutado y depurado en VS Code.

Ejecutando el depurador

Una vez que tengas tu programa listo, puedes ejecutar el depurador en VS Code para examinar tu código y detectar cualquier error. Aquí te muestro cómo:

1. Asegúrate de haber guardado tu archivo correctamente antes de continuar.
2. Selecciona la opción “crear un launch.json” en el menú de depuración de VS Code. Esta opción creará automáticamente un archivo “launch.json” en la carpeta “.vscode” de tu proyecto.
3. Abre el archivo “launch.json” y verifica que tenga la siguiente configuración:

        {
          "version": "0.2.0",
          "configurations": [
            {
              "type": "node",
              "request": "launch",
              "name": "Node.js: Launch Program",
              "program": "${file}"
            }
          ]
        }
      

4. Guarda los cambios en el archivo.
5. Para iniciar la depuración, puedes hacerlo de varias formas. Puedes utilizar la paleta de comandos, presionar F5 o seleccionar la opción “Depurar” en la barra lateral.
6. ¡Listo! El depurador se iniciará y podrás examinar el estado de las variables y seguir el flujo de ejecución de tu programa paso a paso.

Agregar puntos de interrupción

Mientras depuras tu código, puedes establecer puntos de interrupción para detener la ejecución del programa en ciertas líneas de código y examinar el estado de las variables en ese punto.

1. Para establecer un punto de interrupción, simplemente haz clic en el número de línea en el margen izquierdo del editor.
2. Una vez que hayas establecido tus puntos de interrupción, puedes iniciar la depuración y el depurador se detendrá automáticamente en esos puntos.
3. Desde aquí, puedes examinar el estado de las variables, ejecutar el programa paso a paso, seguir el flujo de ejecución y detectar cualquier problema en tu código.

…