lunes, 24 de diciembre de 2012

[Windows] Sublime + PHP + XDebug en Windows

Anteriormente escribí como configurar un entorno de desarrollo en php en linux utilizando el editor Sublime, el servidor apache y el depurador XDebug. Ahora veremos como hacerlo pero en la plataforma de Windows.

Instalar Sublime

Comenzamos instalando el editor de textos que podemos descargar de la siguiente dirección:


Una vez descargado procedemos a ejecutarlo para instalarlo.


Instalar Servidor Web

Para los servicios web utilizaremos el potente servidor XAMPP que incluye Apache, MySQL, phpmyadmin, entre otros y podemos descarga desde esta dirección:


Cuando termine de descargar lo ejecutamos para instalarlo.
(Xampp requiera de ciertas librerias que de no estar instaladas abrirá el navegador para su respectiva descarga e instalación)

Cuando termine la instalación abrimos el panel de control de XAMPP y activamos los servicios Apache y MySQL. Podemos verificar que todo está correcto entrando en la dirección http://localhost


Habilitar XDebug

Para habilitar la extensión xdebug, abrimos el archivo php.ini que se encuentra en el directorio donde se instaló Xampp, generalemente sera C:\xampp\php\php.ini

Buscamos la sección [XDebug] y quitamos el comentario a las siguientes líneas:
zend_extension = “D:\xampp\php\ext\php_xdebug.dll”
xdebug.remote_enable = 1
xdebug.remote_handler = “dbgp”
xdebug.remote_host = “localhost”
xdebug.remote_port = 9000
xdebug.profiler_enable = 1
Por defecto las opciones xdebug.remote_enable y xdebug.profiler_enable vienen con el valor 0, así que simplemente las cambiamos a 1.
Re-iniciamos el servidor Apache, y comprobamos si la extensión xdebug ha sido cargada, observamos en la dirección:
debe estar presente el siguiente mensaje:
This program makes use of the Zend Scripting Language Engine:
Zend Engine v2.3.0, Copyright (c) 1998-2011 Zend Technologies

with Xdebug v2.1.1, Copyright (c) 2002-2011, by Derick Rethans
Si todo ha ido bien ya debemos tener configurado XDebug en nuestro entorno de desarrollo, ahora vamos a configurar Sublime para que trabaje con el depurador:


Instalando Package Control

Añadiremos a nuestro editor un plugin que nos permite gestionar a los demás plugins, para ello abrimos sublime y luego en View > Show Console, pegamos en la consola lo 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 y ya tenemos Package control instalado


Instalar SublimeXDdebug

Lo siguiente es instalar el plugin de xdebug, para ello presionamos CTRL+SHIFT+P, escribimos Install, escribimos xdebug y presionamos enter. Luego veremos el progreso de la instalación en la barra inferior del programa. Cuando haya terminado reiniciamos 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, que deberia ser C:\xampp\htdocs\ y se accede en http://localhost/ 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!


8 comentarios:

  1. Buena publicación xD
    para quienes queremos compilar código php

    ResponderEliminar
  2. Algo para trabajar .net no hay.. solo en windows??

    ResponderEliminar
  3. mmm por lo que mi escaso conocimiento sabe, xdebug solo aplica para php :( pero lo podes preguntar a don google a ver si sabe algo

    ResponderEliminar
  4. Hay que explicar con más detalle:
    - Cuando pulsas Ctrl+Shift + P y escribes Install, salen varios en la lista. Supongo que hay que seleccionar Package control: install Package.
    - Después, cuando escribes xdebug y pulsas enter, será porque hay algo seleccionado. ¿y si no sale nada? que hago
    - Para que funcion el debug helper hay que pulsar en el icono (esquina superior derecha) y seleccionar 'debug' y se pondrá de color verde

    aún así, a mi no me funciona

    ResponderEliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Como puedo conectar localhost con sublime???????

    ResponderEliminar

Powered By Blogger · Designed By Seo Blogger Templates