Cómo depurar JavaScript en Visual Studio Code

Editado 6 hace meses por ExtremeHow Equipo Editorial

Visual Studio CodeDepuraciónJavaScriptExtensionesConfiguraciónHerramientasPuntos de InterrupciónConsolaIntegraciónConfiguraciónCódigo FuenteDesarrolloDesarrollo webSolución de problemasErroresProgramaciónNode.jsFlujo de trabajoEficienciaPruebas

La depuración es una parte esencial del proceso de desarrollo de software. Visual Studio Code, también conocido como VS Code, proporciona un sólido soporte para la depuración de JavaScript. Su herramienta de depuración proporciona a los desarrolladores una serie de características que facilitan la identificación y corrección de errores en su código. En este documento, explicaremos en un lenguaje muy simple cómo puedes depurar JavaScript de manera efectiva utilizando Visual Studio Code. Discutiremos la configuración, los puntos de interrupción, la ejecución paso a paso del código y cómo ver las variables. Proporcionaremos ejemplos para que te resulte más fácil empezar.

Configuración del entorno

Primero, asegúrate de tener instalado Visual Studio Code en tu máquina. Puedes descargarlo desde el sitio web oficial de Visual Studio Code. Una vez instalado, asegúrate de tener instalado el entorno de ejecución de Node.js más reciente, ya que se requiere para ejecutar JavaScript fuera del navegador. Puedes descargar Node.js desde su sitio web oficial.

Instalación de las extensiones necesarias

Visual Studio Code depende en gran medida de las extensiones para funcionalidades adicionales. Para depurar JavaScript de manera efectiva, considera instalar las siguientes extensiones:

• Debugger for Chrome: Esta extensión te permite depurar JavaScript del lado del cliente que se ejecuta en Google Chrome.
• Node.js Extension Pack: Este paquete de extensiones es útil si estás trabajando con aplicaciones Node.js.

Para instalar estas extensiones, abre VS Code, haz clic en el icono de extensión en la barra de actividad en el lado de la ventana y busca cada extensión por nombre.

Iniciando una sesión de depuración

Una vez configurado tu entorno, puedes iniciar una sesión de depuración. Sigue estos pasos:

1. Abre tu archivo JavaScript: En VS Code, abre la carpeta que contiene tu proyecto de JavaScript y localiza el archivo que deseas depurar.
2. Establece un punto de interrupción: Un punto de interrupción es un marcador que le indica al depurador que detenga la ejecución de tu código en un punto específico. Para establecer un punto de interrupción, haz clic en el margen izquierdo del editor junto al número de línea donde se encuentra tu código JavaScript. Aparecerá un punto rojo para indicar que el punto de interrupción está establecido.
3. Inicia la depuración: Haz clic en el icono de depuración en la barra de actividad en el lado de la ventana. Haz clic en el botón verde de reproducción (o presiona F5) para iniciar una sesión de depuración. Si se te pide seleccionar un entorno, elige "Node.js" o "Chrome", dependiendo de dónde quieres que se ejecute tu código.

Usando puntos de interrupción

Los puntos de interrupción son herramientas poderosas en la depuración que te permiten pausar la ejecución de tu código para inspeccionar su estado. Al inspeccionar variables y sus valores, puedes obtener información sobre cómo está funcionando tu código.

Para gestionar los puntos de interrupción:

• Deshabilitar/Habilitar Puntos de Interrupción: Deshabilita o habilita un punto de interrupción existente haciendo clic derecho sobre él. Deshabilitar un punto de interrupción significa que el depurador lo ignorará durante la ejecución.
• Eliminar un punto de interrupción: Haz clic en el punto rojo en el editor para eliminar un punto de interrupción.
• Punto de interrupción condicional: Haz clic derecho sobre el punto de interrupción y selecciona "Agregar punto de interrupción condicional". Esto permite que la ejecución del código se detenga solo cuando se cumpla la condición especificada.

Avanzando a través del código

Una vez que se llega a un punto de interrupción, tienes varias opciones disponibles para continuar en tu código:

• Continuar >| : Continúa la ejecución hasta que se encuentre el siguiente punto de interrupción.
• Paso Sobre >| : Esto avanza a la siguiente línea en la función actual, sin entrar en las funciones o métodos encontrados en esa línea.
• >> PASO EN: Esto te lleva a través de las funciones o métodos utilizados en la línea y se detiene en el primer punto posible dentro de esa función.
• Paso fuera |< : Si has entrado en una función y deseas completarla y regresar a la función principal que la llamó, usa esta opción para salir de la función actual.

Inspeccionando variables

Durante una sesión de depuración, a menudo necesitas inspeccionar los valores de las variables para determinar si contienen los datos esperados. Visual Studio Code proporciona varias formas de inspeccionar variables:

• Panel de Variables: Mientras depuras, observa el panel de Variables en la sección de depuración. Muestra todas las variables actualmente en el ámbito junto con sus valores.
• Ventana de Observación: Agrega variables a la Ventana de Observación para que sus valores puedan ser monitoreados continuamente. Para agregar una variable, haz clic derecho sobre ella en el editor y selecciona "Agregar a Observación".
• Pasar el cursor: Pasa el cursor sobre una variable en tu código para ver su valor actual.

Consola y Consola de Depuración

La Consola de Depuración en Visual Studio Code actúa como una consola interactiva, lo que te permite ejecutar código arbitrario y evaluar expresiones. Esto puede ser especialmente útil para hacer cambios rápidos o verificar hipótesis sobre el comportamiento del código en tiempo real.

La consola estándar sigue estando disponible para tu uso regular a través de la programación, generalmente integrada con declaraciones console.log() en JavaScript. Esta es otra forma simple, pero efectiva, de rastrear cambios en los datos a lo largo de tu ejecución.

Ejemplo

Consideremos un programa simple para entender el proceso de depuración:

function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } const result1 = add(10, 5); console.log('Resultado de la suma: ', result1); const result2 = subtract(10, 5); console.log('Resultado de la resta: ', result2);

Para depurar este programa JavaScript:

• Abre el archivo en Visual Studio Code.
• Establece puntos de interrupción en las funciones add() y subtract().
• Inicia la depuración usando el depurador de VS Code presionando F5.
• A medida que la ejecución del código alcanza tu punto de interrupción, inspecciona los valores de a y b.

Conclusión

Aprender a depurar en Visual Studio Code puede parecer aterrador al principio, pero con la práctica, se convierte en una experiencia muy gratificante. Identificar errores en el código, avanzar paso a paso a través de la lógica y validar suposiciones sobre cómo debería funcionar tu código se vuelve algo natural. Equipado con esta poderosa herramienta, tu eficiencia y efectividad como desarrollador mejorarán considerablemente. Recuerda usar los puntos de interrupción regularmente, inspeccionar variables y hacer buen uso de la consola de depuración para probar la lógica del código en el momento.

La depuración es una actividad fundamental, y tener habilidades sólidas en el uso de herramientas robustas como Visual Studio Code mejora tu capacidad para entregar código de alta calidad aún más. ¡Feliz depuración!

  Comparte este artículo

Si encuentras algo incorrecto en el contenido del artículo, puedes solicitar una actualización