View Comments

Hoy configuraremos nuestro Ubuntu para empezar a hacer debug de PHP con  Sublime Text 2 y Xdebug.

El proceso es bastante simple y en su mayor parte se ha extraído del README del proyecto SublimeXdebug en github.

1Instalar xdebug

Instalaremos el paquete estándar con:

sudo apt-get install php5-xdebug

Tras la instalación ajustaremos la configuración de Xdebug:

sudo gedit /etc/php5/conf.d/xdebug.ini

En ese archivo agregaremos si aún no están las siguientes líneas:

xdebug.remote_enable=On
xdebug.remote_host="localhost"
xdebug.remote_port=9000
xdebug.remote_handler="dbgp"

Eso activará el debug remoto para localhost en el puerto 9000. Por último reinicia apache:

sudo service apache2 restart

2Descargar y descomprimir Python 2.6

En los últimos sistems Ubuntu no puedes instalar el antigua versión 2.6 de Python. Necesitaremos descargarla y descomprimirla en el directorio de Sublime Text 2.

Descargamos el paquete python 2.6 para desde el repositorio de Ubuntu Lucid. Hay que descargar la versión que se ajusta a nuestro sistema (amd64 para sistemas 64bits y i386 para sistemas de 32bits). Yo he descargado la versión amd64 en mi directorio de usuario:

cd ~
wget http://ubuntuarchive.eweka.nl/ubuntu//pool/main/p/python2.6/python2.6_2.6.5-1ubuntu6_amd64.deb

Ahora extraeremos el contenido del archivo en un directorio llamado python2.6.

Para la versión amd64:

dpkg-deb -x python2.6_2.6.5-1ubuntu6_amd64.deb python2.6

Para la versión i386:

dpkg-deb -x python2.6_2.6.5-1ubuntu6_i386.deb python2.6

Finalmente copiaremos el directorio usr/lib/python2.6 desde el directorio que acabamos de crear al directorio donde tenemos Sublime Text 2 (en mi caso ~/programas/sublime_text2 ):

cp -R python2.6/usr/lib/python2.6/ ~/programas/sublime_text2/lib/

3Instalar el paquete SublimeXdebug

Instalaremos SublimeXdebug desde el Package Control de Sublime. Si necesitas ayuda para instalar Package Control puedes leer nuestro artículo:

Sublime Text 2 for Joomla development

Con Package Control instalado instalaremos SublimeXdebug con: 

Ctrl + Shift + P > install > Xdebug

Ahora reinicia Sublime Text 2. Tu sistema ya está listo para empezar a hacer debug.

4Instalar y configurar un debugger remoto

Ahora sólo necesitamos una herramienta para poder hacer debug remoto. He probado sin problemas Firefox easy Xdebug y Chrome Xdebug Helper .

En este artículo usaremos la extensión Chrome Xdebug. Tras descargarla e instalarla tienes que reiniciar Chrome. Tras reiniciarlo verás un nuevo icono junto a la barra de direcciones:

chrome-xdebug

 

Haciendo click en el activarás/desactivarás el debug remoto. Pero primero necesitamos ajustar la extensión para que use la sessionkey de Sublime Text.

En Chrome ve a Herramienras > Extensiones

Y abre las opciones de Xdebug Helper:

chrome-xdebug-settings

Como ves sólo hemos agregado la sessionkey "sublime.xdebug" y activado el debug sólo para localhost.

Listo. Podemos empezar el debug!

5Debug de ejemplo

En Sublime hemos creado un archivo test.php en el directorio www/test con este contenido PHP:

for ($i=0; $i < 50; $i++) { 
	echo 'This is the line: ' . ($i + 1) . '
';
}

Pon el cursor en la línea del "echo" y presiona Ctrl + F8. Aparecerá un punto junto al número de línea que indica la creación de un punto de ruptura (breakpoint).

st2-debug

Ahora empieza el debug con Shift + F8 > Start debugging. Sublime empezará a esperar una conexión de debug remota .

En Chrome navega hasta http://localhost/test/test.php y haz click en el botón del Xdebug Helper hasta que se ponga verde. Entonces recarga la página y notarñas que se queda como congelada. Esto es porque está capturada por Sublime.

En Sublime empieza a recorrer el bucle for con Ctrl + Shift + F5. Verás que los valores de las variables cambian en la pestañaXdebug Context.

6Combinaciones de teclas de SublimeXdebug

  • Shift+f8: Abrir el panel rápido de XDebug
  • f8: Abrir el panel rápido de XDebug cuando el debugger está conectado
  • Ctrl+f8: Activar/desactivar punto de ruptura
  • Ctrl+Shift+f5: Run to next breakpoint
  • Ctrl+Shift+f6: Paso hacia delante
  • Ctrl+Shift+f7: Paso hacia dentro
  • Ctrl+Shift+f8: Paso hacia fuera

7Referencias

https://github.com/Kindari/SublimeXdebug
http://stackoverflow.com/questions/11779284/xdebug-sublime-text-2-and-kindarisublimexdebug