🐞 Cómo Configurar Debug en VS Code para Python, Java, JavaScript y PHP (Xubuntu 24.04)
⚙️ Una guía paso a paso para tener un entorno de desarrollo moderno
y funcional en VS Code con depuración incluida para los lenguajes
más usados.
📦 Requisitos previos
- Tener VS Code instalado
- Tener los lenguajes configurados en tu sistema:
- ✅ Python 3.x
- ✅ Java (OpenJDK 17 recomendado)
- ✅ Node.js (v18 o superior)
- ✅ PHP (8.2 con Xdebug)
- Sistema base: Xubuntu 24.04
🐍 Debug en Python
🧩 Extensión necesaria
📦 Python (de Microsoft)
🔧 Configuración launch.json
{
"name": "Python Debugger: Current File",
"type": "debugpy",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
}
✅ Uso
- Abrí un archivo .py
- Colocá un breakpoint
- Ejecutá con F5 o desde el menú "Run and Debug"
☕ Debug en Java
🧩 Extensiones necesarias
Java Extension Pack
Language Support for Java (Red Hat)
🔧 Configuración automática
Cuando VS Code detecta un archivo .java con método main(), ofrece configurar automáticamente launch.json.
{
"type": "java",
"name": "Debug Java",
"request": "launch",
"mainClass": "mi.paquete.Main",
"projectName": "MiProyecto"
}
⚠️ Asegurate de tener configurado un proyecto Java
(puede ser Maven o carpeta simple con src/)
🟨 Debug en JavaScript (Node.js)
🧩 Extensión necesaria
📦 JavaScript Debugger (viene por defecto desde VS Code 2023)
🔧 Configuración launch.json
{
"type": "node",
"request": "launch",
"name": "Debug Node.js",
"program": "${workspaceFolder}/archivo.js"
}
✅ Alternativa con package.json
"scripts": {
"start": "node archivo.js",
"debug": "node --inspect-brk archivo.js"
}
Luego corré:
npm run debug
Y conectate desde VS Code con F5.
🐘 Debug en PHP con Xdebug
🧩 Extensión necesaria
📦 PHP Debug de Felix Becker
🔧 Instalar Xdebug
sudo apt install php-xdebug
🔧 Configurar /etc/php/8.2/cli/php.ini
; Xdebug para debug con VS Code
[xdebug]
zend_extension=xdebug.so
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003
xdebug.client_host=127.0.0.1
🔧 Configuración launch.json
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003
}
✅ Uso
- Colocá un archivo .php en la ruta del servidor (ej: /home/anthony/server/php/)
- Colocá un breakpoint
- Ejecutá con php archivo.php o por navegador
- Presioná F5 en VS Code
🧪 Consejo final
Podés tener todas las configuraciones en un solo launch.json con varias entradas. Ejemplo:
{
"version": "0.2.0",
"configurations": [
// Python
{
"name": "Python Debugger: Current File",
"type": "debugpy",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
},
// Node.js
{
"type": "node",
"request": "launch",
"name": "Debug Node.js",
"program": "${workspaceFolder}/archivo.js"
},
// PHP
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003
},
// Java
{
"type": "java",
"name": "Debug Java",
"request": "launch",
"mainClass": "paquete.ClasePrincipal",
"projectName": "MiProyecto"
}
]
}
🎯 Conclusión
VS Code te permite trabajar de forma profesional en múltiples lenguajes con una sola herramienta. Tener configurado el debugger te da una ventaja enorme para aprender y desarrollar mejor.
✍️ Escribí, rompé, debugueá... y aprendé!