Tabla de contenido

Muchos desarrolladores cuando algo falla hacen lo mismo: añaden console.log() por todos lados, ejecutan, leen el output, añaden más console.log(), y así hasta encontrar el problema. Es funcional, pero el debugger integrado de VS Code es incomparablemente más poderoso y no toma mucho más tiempo configurarlo.

¿Por qué usar el debugger en lugar de console.log?

Con console.log puedes ver valores, pero no puedes:

  • Pausar la ejecución en un punto exacto y explorar el estado completo del programa
  • Modificar variables en tiempo real para ver cómo responde el código
  • Ver el call stack completo (qué funciones llamaron a qué)
  • Ejecutar el código paso a paso, línea por línea

El debugger te da todo eso. Una vez que lo usas, los console.log de depuración quedan para casos muy simples.

Configurar el debugger para Node.js

VS Code incluye soporte nativo para depurar Node.js sin instalar nada extra.

Método rápido — sin configuración:

  1. Abre tu archivo JavaScript
  2. Presiona F5
  3. Selecciona “Node.js” en el menú desplegable

VS Code ejecuta el archivo actual y entra en modo debug.

Método con launch.json (para proyectos más complejos):

  1. Ve al panel de Depuración (Ctrl+Shift+D o Cmd+Shift+D)
  2. Haz clic en “create a launch.json file”
  3. Selecciona “Node.js”

Ejemplo de launch.json para un proyecto Node:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Depurar programa",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Depurar con nodemon",
      "runtimeExecutable": "nodemon",
      "program": "${workspaceFolder}/server.js",
      "restart": true
    }
  ]
}

Breakpoints: pausar la ejecución

Un breakpoint es un marcador que le dice al debugger “pausa aquí”. Cuando el programa llega a esa línea, se detiene y puedes inspeccionar todo el estado.

Agregar un breakpoint:

  • Haz clic en el margen izquierdo del editor (a la izquierda del número de línea)
  • O posiciona el cursor en la línea y presiona F9

Aparece un punto rojo. Cuando ejecutas en modo debug y el código llega ahí, se pausa.

Tipos de breakpoints:

Conditional breakpoint (clic derecho sobre el punto rojo → Edit breakpoint):

// Solo pausa cuando i es mayor a 50
i > 50

Muy útil en bucles donde quieres pausar solo cuando algo está mal, no en cada iteración.

Logpoint (registra sin pausar):

// En lugar de console.log(), escribe en el mensaje:
"El usuario es: {usuario.nombre}, edad: {usuario.edad}"

Es como un console.log que desaparece del código cuando terminas de depurar.

El panel de depuración

Cuando el código está pausado en un breakpoint, el panel lateral muestra:

Variables: todas las variables en el scope actual con sus valores. Puedes expandir objetos y arrays para ver sus propiedades.

Watch: variables o expresiones que quieres vigilar (las añades manualmente).

Call Stack: la pila de llamadas. Muestra qué función llamó a cuál, de arriba a abajo. Haz clic en cualquier frame para ver el estado en ese punto.

Breakpoints: lista de todos tus breakpoints activos.

Controles de depuración (barra flotante):

BotónAtajoQué hace
ContinueF5Continúa hasta el siguiente breakpoint
Step OverF10Ejecuta la línea actual y pasa a la siguiente
Step IntoF11Entra dentro de la función actual
Step OutShift+F11Sale de la función actual
RestartCtrl+Shift+F5Reinicia la sesión de depuración
StopShift+F5Detiene la depuración

Watch expressions: vigilar variables

En el panel “Watch”, puedes agregar expresiones que se evalúan continuamente mientras depuras:

// Añade estas expressions en el panel Watch:
usuario.email
pedidos.length
total > 0
JSON.stringify(carrito)

Cada vez que el código se pausa, ves el valor actualizado de todas estas expresiones. Mucho más cómodo que buscar la variable en el árbol de Variables.

También puedes evaluar expresiones en la Debug Console (la pestaña en la parte inferior). Mientras el código está pausado, escribe cualquier expresión JavaScript y la evalúa en ese contexto:

// En la Debug Console mientras estás pausado:
usuario.nombre.toUpperCase()    // "ABRAHAM"
pedidos.filter(p => p.total > 100)  // filtra en tiempo real

Depurar JavaScript en el navegador

Para depurar JavaScript que corre en el navegador, añade esta configuración al launch.json:

{
  "type": "chrome",
  "request": "launch",
  "name": "Abrir Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

Requiere tener instalada la extensión “JavaScript Debugger” (viene preinstalada en VS Code moderno).

Presiona F5 y VS Code abre Chrome con el debugger conectado. Los breakpoints que pongas en VS Code funcionan directamente en el código que se ejecuta en el navegador.

Depurar PHP con Xdebug

Para PHP necesitas instalar Xdebug y la extensión “PHP Debug” de VS Code.

Instalar Xdebug:

# En Ubuntu/Debian
sudo apt install php-xdebug

# En Mac con Homebrew
pecl install xdebug

Configurar php.ini:

[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003
xdebug.client_host=localhost

launch.json para PHP:

{
  "name": "Listen for Xdebug",
  "type": "php",
  "request": "launch",
  "port": 9003
}

Presiona F5, VS Code empieza a escuchar. Abre tu aplicación PHP en el navegador y el debugger se conecta automáticamente.

Una vez que incorporas el debugger a tu flujo de trabajo, encontrar bugs se vuelve mucho más sistemático y rápido. Ya no es adivinar dónde está el problema: pausas el código justo donde sospechas y ves exactamente qué está pasando.