Tema 10 · Debugging

10. Depuración Profesional (Debugging): Breakpoints, Watch, Call Stack y launch.json

Reemplaza el uso rudimentario de var_dump y console.log por puntos de interrupción condicionales, Logpoints e inspección de memoria en vivo.

9. Git y GitHub Integrado en VS Code: Stage, Diff Visual, Ramas y Conflictos 11. Espacios de Trabajo Multi-Root (.code-workspace), Remote SSH y Live Share

¿Por qué Dejar Atrás el Abuso de var_dump() y console.log()?

Cuando ocurre un error lógico en un cálculo de carrito de compras o en una llamada a la base de datos, el hábito de principiante es llenar el archivo de var_dump($variable); die(); o console.log(), guardar, recargar y luego olvidar borrarlos antes de subir a producción. El Depurador Integrado de VS Code (Ctrl+Shift+D) te permite pausar el programa en el instante exacto del fallo y explorar todas las variables en memoria en tiempo real.

Diagrama Técnico: Flujo de Depuración Profesional en VS Code

Diagrama 10.1: Las 4 etapas del debugging: Breakpoint (F9) ➔ Iniciar sesión (F5) ➔ Controles de paso (F10/F11) ➔ Inspección de Variables y Call Stack.

Los 3 Tipos de Puntos de Interrupción (Breakpoints)

Tipo de Breakpoint Cómo Crearlo Cuándo Utilizarlo
Breakpoint Estándar (Punto Rojo) Clic izquierdo a la izquierda del número de línea o tecla F9. Detiene la ejecución siempre que el programa pase por esa línea.
Conditional Breakpoint (Condicional) Clic derecho en el margen ➔ Add Conditional Breakpoint... En un bucle de 1,000 iteraciones, detiene el código únicamente cuando se cumple una condición (ej. $id === 482 o precio < 0).
Logpoint (Diamante Rosa) Clic derecho en el margen ➔ Add Logpoint... Imprime un mensaje como Usuario: {$userId} en la consola de depuración sin pausar el programa y sin tocar el archivo original.

⚡ Configuración de Depuración para JavaScript (Chrome) y PHP (Xdebug) en launch.json

Archivo .vscode/launch.json que permite iniciar la depuración presionando F5 tanto en el navegador como en el servidor PHP.

.vscode/launch.json
Solo lectura 
{
  // Guarda este archivo en .vscode/launch.json y presiona F5 para iniciar el depurador
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Depurar Frontend en Google Chrome",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:8000",
      "webRoot": "${workspaceFolder}/public"
    },
    {
      "name": "Escuchar Xdebug para PHP (Puerto 9003)",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/html": "${workspaceFolder}"
      }
    },
    {
      "name": "Ejecutar y Depurar Script PHP Actual en CLI",
      "type": "php",
      "request": "launch",
      "program": "${file}",
      "cwd": "${fileDirname}",
      "port": 0,
      "runtimeArgs": [
        "-dxdebug.start_with_request=yes"
      ],
      "env": {
        "XDEBUG_MODE": "debug,develop"
      }
    }
  ]
}
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
Durante una sesión de depuración activa en VS Code (cuando la ejecución está pausada en un Breakpoint), ¿cuál es la diferencia entre presionar F10 (Step Over) y presionar F11 (Step Into)?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Visual Studio Code & GitHub Copilot Profesional y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.