jueves, 13 de diciembre de 2012

Tutorial PHP: Debian + Sublime + XDebug

Un editor que conocí hace poco y la verdad me ha encantado es Sublime, tanto que he decidido cambiarlo por Netbeans, posee autocompletado de texto, atajos útiles, una agradable interfaz y es posible añadirle funcionalidad por medio de plugins.
Hoy te voy a enseñar a configurar un entorno de desarrollo para php en linux, usando sublime como editor y xdebug como depurador.

Instalando Sublime
Lo primero seria pues instalar esta fabulosa aplicación, puedes descargarlo desde aqui:
http://www.sublimetext.com/2

Para instalarlo simplemente descomprime el archivo y copia la carpeta a cualquier ubicación por ejemplo la carpeta personal y ejecuta el archivo sublime_text que está dentro de la carpeta.

Instalar el servidor LAMP
Una vez está instalado nuestro editor, habría que instalar nuestro servidor, si es que no lo hemos hecho aún. En debian esto se logra fácilmente de la siguiente manera:

Desde una terminal:
sudo apt-get install tasksel
sudo tasksel install lamp-server
(opcional) Podemos también crear una enlace para acceder a la carpeta del servidor asi
mkdir ~/htdocs
sudo ln -s /home/$USER/htdocs/ /var/www/$USER
En este último comando puedes dejarlo como está o poner tu nombre de usuario, ahora puedes guardar tus aplicaciones en la carpeta htdocs que acabas de crear y para acceder a ellos los haces asi:
http://localhost/tuusuario

Instalar XDebug
Instalaremos XDebug de la siguiente forma

sudo apt-get install php5-xdebug
Luego editamos el siguiente archivo:
gksu geany /etc/php5/conf.d/xdebug.ini
y añadimos los siguiente:

xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost 
xdebug.remote_port=9000 


Ahora reiniciamos el servidor:
sudo service apache2 restart
Para comprobar que todo está correcto, crea un archivo php en tu carpeta del servidor con el nombre que quieras y escribe el siguiente codigo

<? phpinfo(); ?>

Luego verifica el archivo desde el navegador y asegurate que ya aparezca la configuración de xdebug. Está casi al final.

Descargar y descomprimir Python2.6
El plugin que usaremos para añadir XDebug a Sublima utiliza las librerías de python2.6, específicamente la que se incluía en la versión 10.04 de ubuntu. Así que la descargaremos desde aquí:

http://packages.ubuntu.com/lucid/python2.6

Luego descomprimiremos el paquete descargado asi:
dpkg-deb -x nombredelpaquete.deb python2.6
Finalmente copiamos la carpeta /usr/lib/python2.6 de la carpeta que acabamos de descomprimir y lo pegamos en la carpeta lib de donde esta instalado sublime

Instalar Package Control
Ahora instalaremos un plugin que servirá para poder añadir nuestro plugin de xdebug.
Desde sublime abrimos la consola en View > Show Console y pegamos los siguiente:


import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Luego reiniciamos Sublime

Instalar SublimeXDebug
Desde sublime presionamos CTRL + SHIFT + P, escribimos Install y seleccionamos Package Control: Install Package.

Buscamos XDebug y los seleccionamos. Volvemos a reiniciar Sublime

Instalar un ayudante de depurador
Necesitaremos instalar un ayudante de depurador para que el navegador sepa que programa se encargará de la depuración (en este caso sublime). Yo uso el Google Chrome y ahí está el XDebug Helper, se instala y se configura de la siguiente manera en Herramientas > Extensiones. Debe quedar como en la imagen:

chrome-xdebug-settings
Y ahora ya podemos comenzar a depurar :D

Atajos de SublimeXDebug


  • Shift+f8: Open XDebug quick panel
  • f8: Open XDebug control quick panel when debugger is connected
  • Ctrl+f8: Toggle breakpoint
  • Ctrl+Shift+f5: Run to next breakpoint
  • Ctrl+Shift+f6: Step over
  • Ctrl+Shift+f7: Step into
  • Ctrl+Shift+f8: Step out 

Ejemplo
En sublime crea un archivo con el siguiente código y guárdalo en tu carpeta del servidor con el nombre de prueba.php

<?
$i=2;
$j=2;
$k=2+2;
echo $k;
?>

Añade un breakpoint en la linea 2 presionando CTRL+F8

Presiona SHIFT + F8 y selecciona Start Debugging

En el navegador ingresa accede a tu archivo prueba.php, asegurate de que XDebug Helper esté activado (estará de color verde)

Presiona F8 en sublime para ver las acciones disponibles o CTRL+SHIFT+f6, f7 u f8 para avanzar por las lineas de código, o presiona F8 para obtener un menú con las opciones disponibles (para mas info. ver los atajos que están más arriba)

Con esto podemos ir ejecutando nuestro código fuente linea por linea

Share This!


5 comentarios:

  1. Cuendo hago Ctrl+Shift+f5 sublime muestra :"waiting for executing to start" y de ahi no pasa

    ResponderEliminar
  2. Primero asegurate que la depuracion esta activada, para elo presiona F8 y te deberia salir un menu con todas las opciones: Step Over, Step Into, etc. ahi podes seleccionar una de esas.

    Tambien asegurate que hayas añadido un breakpoint, este es una chibolita que aparece al lado izquierdo de la linea de codigo.

    Otro detalle a tener en cuenta es que cuando depuras tenes que abrir en el navegador exactamente el archivo en el que esta el breakpoint

    ResponderEliminar
  3. Hola, he hecho los pasos y me ha pasado lo mismo que a "heislersin"
    Ctrl+Shift+f6, Ctrl+Shift+f7, Ctrl+Shift+f8 y me sale lo mismo "waiting for executing to start" en la barra inferior.
    Luego no hace nada mas..

    he apretado F8 como recomiendas pero me sale lo mismo y no pasa nada.
    Que podría ser?

    ResponderEliminar
  4. Misma recomendacion, hay que asegurarse que el plugin de depuración del navegador tenga activada la depuración y debe ejecutarse la pagina que contiene el breakpoint

    ResponderEliminar

Powered By Blogger · Designed By Seo Blogger Templates