Debug WordPress with Sublime Text 2 and XDebug

XDebug installation

1. Run the Xdebug wizard and follow the instructions.I develop on Mac OS X Mountain Lion, and phpize complained that autoconf is missing.

   Cannot find autoconf. Please check your autoconf installation and the $PHP_AUTOCONF environment variable is set correctly and then rerun this script.

   Luckily Sebastien has the recipe on how to add autoconf to Mountain Lion

2. When you’re editing php.ini, add the following to the [xdebug] section

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

3. Save php.ini and restart your webserver. I do sudo apachectl restart

Debug your WordPress plugin in Sublime Text 2

1. If you haven’t allready, add the SublimeXdebug package using Sublime Package Control
   • Shift-Cmd P and select Package Install
   • Find Xdebug and install it
2. Open the folder with the plugin you want to debug in Sublime Text and save as project (Project -> Save Project As…)
3. Edit project properties (Project->Edit Project) and add the “settings”: {“xdebug” : url-to-your-test-site}. Mine is:
   

   {
   	"folders":
   	[
   		{
   			"path": "/Users/<user>/Sites/wp.local/wp-content/plugins/acf-field-date-time-picker"
   		}
   	],
   	"settings": {
   		"xdebug": { "url": "http://wp.local/" }
   	}
   }

4. Now you’re ready to debug:
   • Select the line where you want a breakpoint. Shift + F8 opens the debug menu. Select Add Breakpoint
   • Shift + F8, and choose Start debugging. Your default broweser will open with the url you set in project properties. Browse to the page where you know the plugin will be triggered, and go back to Sublime Text.
   • Use the following shortcut keys to step through the code:
     • Ctrl+Shift+F6 – Step over
     • Ctrl+Shift+F7 – Step into
     • Ctrl+Shift+F8 – Step out from
     • Ctrl+Shift+F5 – Continue (until next breakpoint)