Todo desarrollador de JavaScript comienza con console.log(). Es rápido, funciona y resulta familiar. Pero cuando estás rastreando un bug a través de múltiples llamadas a funciones, operaciones asíncronas o cambios complejos de estado, el registro por consola se convierte en un juego del gato y el ratón.
El depurador integrado de VS Code cambia esto. En lugar de adivinar qué está haciendo tu código, puedes pausar la ejecución, inspeccionar variables en cualquier punto, avanzar por las funciones línea por línea y comprender exactamente cómo se comporta tu aplicación.
El debugging, o depuración en español, es el proceso de encontrar y corregir errores o defectos en el código de un programa. Estos errores pueden causar comportamientos inesperados, mal funcionamiento o fallos en el programa. El objetivo del debugging es identificar y corregir estos errores para que el programa funcione según lo previsto.
El proceso de debugging generalmente implica el uso de herramientas y técnicas específicas para rastrear y comprender el flujo de ejecución del programa, así como para inspeccionar y modificar el estado interno del mismo.
Qué es Visual Studio Code y por qué resulta útil para depurar JavaScript
Visual Studio Code, al que conocemos también como VSCode, es un editor de código para programadores gratuito, de código abierto y multiplataforma.
Cuando te preguntas qué es Visual Studio Code, la respuesta va más allá de ser un simple editor de texto. Su popularidad masiva se debe a un conjunto de características bien pensadas que lo han convertido en una herramienta indispensable para desarrolladores de todos los niveles.
Básicamente, se trata de un editor de código. Esto quiere decir, una herramienta que nos permite editar el texto plano de los archivos de código para programación.
Así pues, VSCode es una herramienta extremadamente versátil, capaz de facilitar muchas tareas de la programación, llegando (con las correspondientes extensiones) a funcionar casi al nivel de un IDE.
VSCode tiene integradas herramientas para depurar el código fuente. La depuración de código es un paso crucial para encontrar y corregir errores.
Visual Studio Code incluye un depurador integrado que te permite ejecutar tu código paso a paso, inspeccionar variables, establecer puntos de interrupción y analizar la pila de llamadas.
La capacidad de depurar directamente dentro de la interfaz de VS Code elimina la necesidad de cambiar a otra herramienta, lo que acelera significativamente el proceso de desarrollo.
La información se presenta de manera clara y organizada, permitiéndote identificar la raíz del problema de forma más rápida.
Preparación del proyecto JavaScript
Para comenzar, necesitas tener instalado Node.js en tu computadora.
Para nuestro ejemplo, usaremos el siguiente código inicial de JavaScript. Puedes crear este archivo en el directorio que prefieras. Lo llamaremos index.js.
Este código define una función en JavaScript llamada sumUpToN que suma los números desde 1 hasta un número dado n.
Luego, se establece un límite (en este caso, 5) y se llama a la función con ese límite.
El programa imprime mensajes indicando que se están sumando los números y, al final, muestra la suma total de los números desde 1 hasta el límite establecido.
Archivo index.js
function sumUpToN(n) {
let sum = 0;
console.log("Summing numbers from 1 to", n);
for (let i = 1; i <= n; i++) {
sum += i;
}
console.log("End summing numbers");
return sum;
}
let limit = 5;
let resultSum = sumUpToN(limit);
console.log('The sum of numbers from 1 to', limit, 'is:', resultSum);
Cómo abrir el panel de depuración
Para abrir el panel de depuración en VSCode, simplemente haz clic en el icono correspondiente en la barra lateral de VSCode, ubicado en el costado de la ventana (tiene forma de bicho).
Haz clic en el icono Depurar en la Barra de Actividad para cargar la vista de Depuración.
Cuando hagas clic en el botón, VSCode te presentará tres opciones de configuración para depurar. Debes elegir la que mejor se adapte a tus necesidades.
Run and Debug
La opción “Run and Debug” es una opción general que te permite ejecutar y depurar tu código en diferentes lenguajes de programación, incluyendo JavaScript.
Esta opción te brinda un archivo de configuración llamado launch.json donde puedes personalizar la forma en que se ejecuta y depura tu código.
En este archivo de configuración, puedes establecer diferentes configuraciones de ejecución, como el tipo de archivo que deseas ejecutar, los argumentos de línea de comandos, los puntos de interrupción, entre otros.
JavaScript Debug Terminal
La opción “Javascript Debug Terminal” es una opción nativa que te permite ejecutar tu código JavaScript en una terminal de depuración específica para este lenguaje.
Esta terminal te proporciona un entorno interactivo para ejecutar y depurar tu código fácilmente sin realizar configuraciones previas.
Debug URL
La opción “Debug URL” es una opción que te permite depurar una URL específica en tu proyecto.
Esto es útil cuando estás trabajando en una aplicación web y deseas depurar el código que se ejecuta en una página web en particular.
Al utilizar esta opción, puedes establecer puntos de interrupción y analizar el flujo de ejecución de tu código en el contexto de una URL específica.
Además, es importante señalar que en el panel de depuración también encontrarás detalles sobre puntos de interrupción y eventos.
Configuración de launch.json
El corazón de la depuración en VS Code es el archivo launch.json.
Presiona F5 en cualquier proyecto de JavaScript y VS Code te pedirá crear uno.
Para comenzar con nuestra depuración, debemos dar clic a la opción debajo el botón “Run and Debug” llamada “create a launch.json file”.
Posterior, VSCode nos preguntará el tipo de ambiente a configurar. En este caso debemos seleccionar la opción de Node.js.
Una vez seleccionado nuestro ambiente, VSCode nos generará una configuración básica en formato JSON, la cual podemos modificar posteriormente.
Este archivo proporciona información esencial sobre el entorno de ejecución y las opciones de depuración necesarias para VSCode.
También debemos revisar todos los valores generados automáticamente y asegurarnos de que tengan sentido para el proyecto, como por ejemplo el archivo de lanzamiento y tipo de entorno correcto.
Debemos recordar que los atributos disponibles en las configuraciones del archivo launch.json pueden ser diferentes según el depurador que estés utilizando.
Es importante no asumir que un atributo que funciona para un depurador automáticamente funcionará para otros depuradores.
| Elemento | Función |
|---|---|
| launch.json | Archivo de configuración de ejecución y depuración |
| Node.js | Entorno de ejecución seleccionado para el ejemplo |
| F5 | Inicio de una sesión de depuración |
| sourceMaps | Mapeo del código generado hacia el código fuente original |
Cómo colocar puntos de interrupción
Luego de configurar nuestro archivo launch.json, vamos a colocar puntos de interrupción en nuestro código.
En este caso, agregaremos 3 puntos de interrupción, uno en cada instrucción console.log.
Los puntos de interrupción son marcados con un círculo rojo al principio de una línea de código.
Puedes añadir o quitar estos puntos de interrupción con solo hacer clic en el lado izquierdo del número de la línea de código.
Los puntos de ruptura son una de las técnicas principales de depuración. Establecer puntos en el código permite que la ejecución del programa se detenga, permitiendo a los desarrolladores examinar el estado del programa en ese momento y analizar variables.
Una vez agregado los puntos de interrupción, vamos a ejecutar una sesión de depuración.
Para esto podemos apretar la tecla F5 o como alternativa podemos ejecutar la sesión manualmente en el panel de depuración y dar clic a “Launch Program”.
Justo después de iniciar la sesión de depuración, el panel principal te mostrará información sobre el proceso en ejecución.
A su vez, la barra de estado cambiará de color y los paneles del lado izquierdo se llenarán con detalles sobre variables y estados actuales.
Como primera instancia, el depurador se detendrá en el primer punto de ruptura configurado.
A su vez gracias a la barra de control de depuración podemos ir línea por línea inspeccionando nuestro código.
Ejecutar JAVASCRIPT paso a paso 🚀 Run and Debug | Visual Studio Code ✅
Paneles de información durante la depuración
Variables
La sección de variables en la vista de depuración muestra una lista de las variables del programa y sus valores mientras lo estás depurando.
Puedes ver qué variables están siendo utilizadas y qué valores tienen.
Además, en algunos casos, puedes incluso cambiar estos valores directamente, y ver cómo afecta eso al programa en ejecución.
El panel Variables muestra todas las variables locales y globales en el ámbito actual.
Watch
La función “Watch” en la barra de depuración de VSCode te permite monitorear y evaluar el valor de expresiones o variables específicas en tiempo real mientras depuras tu programa.
Puedes agregar expresiones al “Watch” para seguir su evolución durante la ejecución del código, proporcionando una herramienta útil para examinar y comprender el estado de variables clave sin interrumpir el flujo normal de la depuración.
El panel Watch te permite rastrear expresiones específicas.
Call Stack
La sección “Call Stack” (pila de llamadas) en un debugger de VSCode muestra la secuencia de funciones que están siendo ejecutadas en un programa en un momento específico durante la depuración.
Cada vez que una función es llamada, se agrega a la parte superior de la pila de llamadas, y cuando una función completa su ejecución, se elimina de la parte superior.
La pila de llamadas ayuda a comprender qué funciones llevaron al programa hasta la línea en la que se detuvo.
Consola de depuración
La Consola de Depuración no es solo para salida-es un REPL conectado a tu contexto de ejecución pausado.
Desde este contexto puedes examinar expresiones relacionadas con el estado actual de la aplicación mientras la ejecución está detenida.
Barra de control de depuración
La barra de control de depuración en VSCode es una interfaz gráfica que te permite controlar y monitorear el proceso de depuración de tu programa.
Esta barra se encuentra generalmente en la parte superior del editor y se activa cuando estás en modo de depuración.
La explicación de cada una de estas opciones se realizará en orden de izquierda a derecha:
Play/Continue
Este botón permite que el programa continúe su ejecución después de haber sido pausado durante la depuración.
Si el programa ya está en pausa, avanzará hasta el próximo punto de interrupción donde se detendrá nuevamente.
Es útil para seguir la ejecución después de solucionar un problema y avanzar al próximo punto importante en el código.
Step Over
Este botón permite avanzar la ejecución del programa línea por línea, pero sin entrar en el código de las funciones que se llaman.
Si el programa alcanza una línea que contiene una llamada a una función, el comando “Step Over” ejecutará toda la función actual y detendrá la ejecución en la siguiente línea después de la llamada a la función.
Step Into
Este botón de depuración se utiliza para avanzar en la ejecución del programa, pero con una particularidad.
Si la línea actual de código contiene una llamada a una función, “Step Into” entra en el cuerpo de esa función y se detiene en la primera línea de código de esa función.
Step Out
Este botón se utiliza para avanzar en la ejecución del programa hasta que la función actual en la que te encuentras retorna, y luego se detiene en la línea siguiente a la llamada a esa función.
En otras palabras, “Step Out” te permite salir del contexto de la función actual y regresar al nivel superior de la pila de llamadas.
Restart
Reinicia la sesión de depuración desde el principio.
Stop All
Detiene todas las sesiones de depuración activas.
Breakpoints condicionales y logpoints
Haz clic derecho en cualquier breakpoint y selecciona “Edit Breakpoint” para añadir condiciones.
Los breakpoints condicionales permiten detener la ejecución únicamente cuando se cumple una condición determinada.
Los logpoints imprimen en la Consola de Depuración sin detener la ejecución.
Haz clic derecho en el margen y selecciona “Add Logpoint”.
Los breakpoints condicionales y logpoints reducen el ruido de depuración.
Esto resulta especialmente útil cuando una línea se ejecuta muchas veces o cuando solo necesitas observar un caso concreto sin interrumpir por completo la ejecución.
Depuración de JavaScript asíncrono con Node.js
La integración del depurador de Node.js en VS Code sobresale en la depuración asíncrona.
Establece breakpoints dentro de funciones async, cadenas de Promises o callbacks.
En lugar de console.logs dispersos, obtienes una vista completa del estado de tu aplicación en cualquier momento.
Si los breakpoints no se activan en funciones asíncronas, asegúrate de que tu código asíncrono realmente se ejecute y llegue a la línea del breakpoint.
Verifica que los source maps estén configurados correctamente para código transpilado.
A veces los breakpoints necesitan establecerse después de que el depurador inicie para módulos cargados dinámicamente.
Depuración de aplicaciones React
Para aplicaciones React, utiliza el JavaScript Debugger integrado de VS Code (la extensión Debugger for Chrome ahora está obsoleta).
Inicia tu servidor de desarrollo (npm start), luego presiona F5.
VS Code lanza Chrome y conecta el depurador.
Coloca breakpoints dentro de hooks useEffect, manejadores de eventos o funciones de componentes.
El panel Variables muestra los valores actuales de props, state y dependencias de hooks.
Habilita Auto Attach desde la Paleta de Comandos (Ctrl+Shift+P > “Toggle Auto Attach”).
Configúralo en modo “smart”.
La integración con el navegador trae la depuración frontend a tu editor.
Depuración del frontend y backend simultáneamente
¿Puedo depurar frontend y backend simultáneamente en VS Code? Sí, crea una configuración compuesta en launch.json que lance múltiples sesiones de depuración.
Esto te permite depurar tu frontend React y backend Node.js en paralelo, avanzando por operaciones full-stack sin problemas.
El soporte de VS Code para Node.js permite trabajar con el backend y utilizar el depurador junto con extensiones para servidores web, bases de datos y APIs.
Su potente depurador y las extensiones para servidores web, bases de datos y APIs lo convierten en la única herramienta que necesitas para construir una aplicación web completa.
Source maps y código JavaScript minificado
¿Puedo depurar código JavaScript minificado en VS Code? Sí, si los source maps están disponibles.
Establece sourceMaps en true en tu configuración de launch.json y asegúrate de que tu proceso de compilación genere archivos de source map.
VS Code mapeará automáticamente el código minificado de vuelta a tu código fuente original.
Antes de que pueda depurar sus componentes Vue desde VS Code, necesitará actualizar la configuración de Webpack generada para poder construir los sourcemaps.
Haremos esto para que nuestro depurador tenga una forma de correlacionar el código del archivo comprimido con la posición en el archivo original.
Lanzar una aplicación web desde VS Code
Haga clic en el icono Depurar en la Barra de Actividad para cargar la vista de Depuración.
Luego haga clic en el icono Engranaje para configurar el archivo launch.json, seleccione Chrome/Firefox: Launch como el entorno.
La opción “Debug URL” también permite depurar una URL específica en tu proyecto.
Esto es útil cuando estás trabajando en una aplicación web y deseas depurar el código que se ejecuta en una página web en particular.
Depuración de Node.js en Docker
¿Cómo depuro aplicaciones Node.js ejecutándose en contenedores Docker? Utiliza el tipo de configuración attach en launch.json con el puerto de depuración expuesto del contenedor.
Inicia tu contenedor con la bandera inspect y mapea el puerto 9229.
VS Code puede entonces conectarse al proceso en ejecución dentro del contenedor.
La integración con el control de versiones y la capacidad de ejecutar scripts de automatización hacen de VS Code un centro de control para flujos de trabajo de DevOps.
Alternativas y técnicas complementarias
Vue Devtools
Hay otros modelos de depuración, variando en complejidad.
El más simple y popular es usar el excelente Vue.js devtools para Chrome y para Firefox.
Algunos de los beneficios de trabajar con las devtools es que le permite editar las propiedades y ver los cambios reflejados en tiempo real.
Por favor tenga presente que si la página usa una compilación minificada de producción de Vue.js (como ser el link estándar del CDN), la inspección de devtools estará deshabilitada por defecto lo cual no mostrará el panel de Vue.
Sentencia debugger
El ejemplo anterior tiene un gran flujo de trabajo.
Sin embargo, hay una opción alternativa donde puede usar la sentencia nativa debugger directamente en su código.
Otras técnicas de depuración
- Impresiones en consola: Insertar declaraciones de impresión o logs en el código para mostrar información sobre el estado del programa en momentos clave.
- Puntos de ruptura (breakpoints): Establecer puntos en el código donde la ejecución del programa se detiene, permitiendo a los desarrolladores examinar el estado del programa en ese momento y analizar variables.
- Depuradores: Herramientas especializadas que permiten a los desarrolladores ejecutar el programa paso a paso, inspeccionar variables y realizar otras operaciones de análisis durante la ejecución.
- Análisis estático y dinámico: Herramientas que analizan el código en busca de posibles errores sin ejecutarlo (análisis estático) o que examinan el comportamiento del programa durante la ejecución (análisis dinámico).
- Pruebas unitarias: Desarrollar pruebas específicas para verificar el correcto funcionamiento de unidades individuales de código.
Estas pruebas pueden ayudar a identificar errores y a mantener la calidad del código.
Extensiones útiles para el desarrollo y la depuración
El vasto ecosistema de extensiones es, sin duda, el mayor punto fuerte de VS Code.
Este sistema modular te permite personalizar VS Code exactamente para tus necesidades, manteniendo el núcleo del editor ligero y rápido.
Es importante seleccionar y utilizar extensiones relevantes para tus necesidades.
Extensiones generales
- Prettier es un formateador de código ampliamente adoptado que impone un estilo de código coherente en todos tus proyectos.
- La extensión Remote - SSH para Visual Studio Code te permite trabajar en servidores remotos o máquinas virtuales utilizando el protocolo seguro SSH.
- Live share permite la colaboración en tiempo real con otros desarrolladores al permitirte compartir tu entorno de desarrollo.
- Better comments añade comentarios codificados por colores a tu código, para que sea más fácil distinguir los distintos tipos de comentarios.
- CodeSnap simplifica el proceso de hacer capturas de pantalla del código.
- La extensión Code Runner proporciona una forma cómoda de ejecutar rápidamente fragmentos de código o archivos completos en varios lenguajes de programación desde Visual Studio Code.
- Path intellisense simplifica la entrada de rutas de archivos ofreciendo autocompletado inteligente para las rutas de archivos en tu código.
- Live Server es una fantástica extensión que te permite crear un servidor de desarrollo local con recarga en tiempo real.
- GitLens es una potente extensión que integra las capacidades de Git directamente en tu editor.
Extensiones para desarrollo web
- Auto Rename Tag es una práctica extensión que renombra automáticamente las etiquetas HTML o XML cuando modificas la etiqueta de apertura o cierre.
- SVG Preview es una extensión útil para los desarrolladores web que trabajan con gráficos vectoriales escalables (SVG).
- La extensión HTML CSS Support proporciona soporte CSS mejorado dentro de los archivos HTML.
- La extensión IntelliSense for CSS class names en HTML proporciona sugerencias inteligentes y autocompletado para nombres de clases CSS.
- CSS Peek es una potente extensión que mejora el desarrollo CSS permitiéndote echar un vistazo a los estilos CSS asociados directamente desde el código HTML o JavaScript.
- Con sólo pasar el ratón por encima de una clase o ID CSS, CSS Peek muestra los estilos correspondientes en una ventana, eliminando la necesidad de cambiar entre archivos.
Extensiones para JavaScript
- Quokka.js es un bloc de notas en tiempo real para JavaScript que ofrece información y resultados de ejecución en tiempo real mientras escribes.
- npm Intellisense te ahorra tiempo y esfuerzo al proporcionar autocompletado inteligente para las importaciones de paquetes npm.
- Import Cost proporciona información en tiempo real sobre el tamaño de los módulos JavaScript o TypeScript importados.
Extensiones para otros lenguajes y entornos
Para depurar otros lenguajes y tiempos de ejecución (incluidos PHP, Ruby, Go, C#, Python, C++, PowerShell y muchos otros), busque Debuggers extensiones en el Código VS Marketplace o seleccione Instalar depuradores adicionales en el menú Ejecutar de nivel superior.
Hay extensiones que transforman VS Code en un entorno potente para C++, Java, C#, Go y Rust.
- La extensión Python para Visual Studio Code es una herramienta esencial para los desarrolladores de Python.
- Pylance es una potente extensión del servidor de lenguajes para Python en VS Code.
- La extensión Jupyter te permite trabajar con cuadernos Jupyter directamente dentro de VS Code.
- La extensión Django está diseñada específicamente para el desarrollo del framework web Django en VS Code.
- Flask Snippets es una práctica extensión que proporciona una colección de fragmentos de código para el framework web Flask en VS Code.
Buenas prácticas para investigar un bug
Las herramientas de depuración de VS Code transforman cómo comprendes y corriges el código.
Comienza poco a poco-reemplaza tu próximo console.log() con un breakpoint.
Avanza por el código.
Inspecciona variables.
Utiliza Watch para seguir las expresiones que cambian durante la ejecución.
Utiliza Call Stack para reconstruir la secuencia de llamadas que ha llevado al error.
Los breakpoints condicionales y logpoints reducen el ruido de depuración.
La depuración también puede complementarse con análisis estático, análisis dinámico y pruebas unitarias.
Una vez que experimentes la claridad de las herramientas de depuración adecuadas, te preguntarás cómo te las arreglabas sin ellas.
Visual Studio Code permite personalizar la apariencia de la interfaz y el resaltado de la sintaxis del código.
Ante todo VSCode es un editor ágil que funciona muy bien incluso en equipos con recursos limitados.
La verdad es que una de las ventajas de Visual Studio Code es que no requiere muchas configuraciones y su curva de aprendizaje es extremadamente suavizada.
Para instalar el editor, es importante acudir a la página oficial de Visual Studio Code.
Una vez instalado, ya tenemos lo suficiente para trabajar con muchos lenguajes y con unas personalizaciones que se adaptan a la mayoría de los gustos.
tags: #quiero #depurar #otro #programa #vscode #javascript
Publicaciones populares:
- Cómo se limpia el agua residual: explicación para niños
- Conoce las características de Agua destilada BonÀrea
- Consejos para la desinfección de piscinas de agua salada en Jávea
- Filtros de coche: clasificación y usos principales
- Guía para purificar el aire acondicionado Haier de manera eficaz