Depuración Profesional con las Herramientas Integradas de VS Code

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. Terminas llenando tu código de sentencias de log, reconstruyendo constantemente y aún así perdiendo la imagen completa.

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. Este artículo te muestra cómo aprovechar estas potentes herramientas para la depuración de JavaScript, TypeScript, React y Node.js—convirtiendo horas de frustración en minutos de resolución enfocada de problemas.

Configuración de la Depuración en VS Code para JavaScript y TypeScript

Creación de tu Configuración 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. Aquí tienes una configuración básica para depurar JavaScript en VS Code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current File",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Para TypeScript, añade soporte de source maps a tu configuración:

{
  "type": "node",
  "request": "launch",
  "name": "Debug TypeScript",
  "program": "${file}",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "sourceMaps": true,
  "skipFiles": ["<node_internals>/**"]
}

Controles Esenciales de Depuración

Una vez configurado, la depuración se vuelve sencilla:

• Establece breakpoints haciendo clic a la izquierda de cualquier número de línea (o presiona F9)
• Inicia la depuración con F5
• Step over (saltar) código con F10 (ejecuta la línea actual)
• Step into (entrar en) funciones con F11 (profundiza en llamadas a funciones)
• Step out (salir) con Shift+F11 (completa la función actual)

El panel Variables muestra todas las variables locales y globales en el ámbito actual. El panel Watch te permite rastrear expresiones específicas. El Call Stack (pila de llamadas) muestra tu ruta de ejecución—invaluable para entender cómo llegaste a un punto particular.

Técnicas Avanzadas de Breakpoints

Breakpoints Condicionales

Haz clic derecho en cualquier breakpoint y selecciona “Edit Breakpoint” para añadir condiciones. El depurador solo se pausa cuando tu condición se evalúa como verdadera:

// Condición del breakpoint: user.role === 'admin'
// Solo se detiene para usuarios administradores

Logpoints: El Mejor Console.log

Los logpoints imprimen en la Consola de Depuración sin detener la ejecución. Haz clic derecho en el margen y selecciona “Add Logpoint”. Usa llaves para expresiones:

User {user.name} triggered action at {new Date().toISOString()}

No más eliminación de console.logs antes de hacer commit—los logpoints existen solo durante tu sesión de depuración.

Depuración de React con Integración de Navegador

Configuración de Depuración de Navegador para React

Para aplicaciones React, utiliza el JavaScript Debugger integrado de VS Code (la extensión Debugger for Chrome ahora está obsoleta). Configúralo para aplicaciones React usando Vite o Create React App:

{
  "type": "pwa-chrome",
  "request": "launch",
  "name": "Debug React App",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true
}

Inicia tu servidor de desarrollo (npm start), luego presiona F5. VS Code lanza Chrome y conecta el depurador. Establece breakpoints directamente en tus componentes React, inspecciona props y state, y avanza por los renders—todo desde VS Code.

Depuración del Estado de Componentes React

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. Usa la Consola de Depuración para probar expresiones contra el contexto actual de tu componente.

Características del Depurador de Node.js en VS Code

Auto Attach para Depuración Rápida

Habilita Auto Attach desde la Paleta de Comandos (Ctrl+Shift+P > “Toggle Auto Attach”). Configúralo en modo “smart”. Ahora cualquier proceso de Node.js iniciado desde el terminal de VS Code se conecta automáticamente al depurador—sin necesidad de configuración.

Depuración de Operaciones Asíncronas

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. El Call Stack muestra claramente la ruta de ejecución asíncrona, facilitando el rastreo a través de flujos asíncronos complejos.

Optimización de tu Flujo de Trabajo de Depuración

Uso Efectivo de la 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. Prueba correcciones, inspecciona objetos o llama funciones directamente:

// Mientras está pausado en un breakpoint:
// > user.permissions
// ['read', 'write']
// > calculateTotal(cart.items)
// 45.99

Omitir Archivos para Enfocarte en tu Código

Añade esto a tu launch.json para omitir código de bibliotecas:

"skipFiles": [
  "<node_internals>/**",
  "node_modules/**"
]

El depurador no entrará en estos archivos, manteniéndote enfocado en la lógica de tu aplicación.

Conclusión

Las herramientas de depuración de VS Code transforman cómo comprendes y corriges el código. En lugar de console.logs dispersos, obtienes una vista completa del estado de tu aplicación en cualquier momento. Los breakpoints condicionales y logpoints reducen el ruido de depuración. La integración con el navegador trae la depuración frontend a tu editor. Auto Attach hace que la depuración de Node.js sea sin esfuerzo.

Comienza poco a poco—reemplaza tu próximo console.log() con un breakpoint. Avanza por el código. Inspecciona variables. Una vez que experimentes la claridad de las herramientas de depuración adecuadas, te preguntarás cómo te las arreglabas sin ellas. El tiempo invertido en aprender estas características se recupera inmediatamente en correcciones de bugs más rápidas y una comprensión más profunda del código.

Preguntas Frecuentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.