Debug WordPress with XDebug

WordPress development processes are different from developer to developer, but one thing we all have in common. The need to debug fast and reliable.

Debugging PHP applications can be done in several ways, but most of the developers are just doing some die or print_r or var_dump commands, maybe some developers use logging. That is all handy, but if you want to improve your development and debugging process, you will certainly need Xdebug.

Xdebug is a PHP extension which gives us debugging and profiling capabilities. It’s pretty fast and reliable.

Xdebug installation

Probably the most difficult part of this tutorial is to actually install Xdebug. There are some guidelines in Xdebug documentation, and that looks scary, but don’t worry.

The best way is to paste the contents of your phpinfo() output into Xdebug wizard and follow the instructions.

So, create a file info.php and paste this in:

[code lang=”php”]
phpinfo();
[/code]

Save the file, open it in browser, select all, copy and paste that into Xdebug wizard.

You will get instructions similar to this:

• Download php_xdebug-2.2.2-5.3-vc9.dll
• Move the downloaded file to c:\wamp\bin\php\php5.3.22\ext
• Update C:\wamp\bin\apache\Apache2.2.14\bin\php.ini and add/change the line zend_extension = c:\wamp\bin\php\php5.3.22\ext\php_xdebug-2.2.2-5.3-vc9.dll
• Restart the webserver

For using Xdebug in Eclipse, add this lines in your php.ini file as well:

[code lang=”html”]
[xdebug]
xdebug.default_enable=1
xdebug.remote_enable=1
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost
xdebug.remote_port=9000
xdebug.remote_autostart=1
zend_extension="/PATH/TO/YOUR/XDEBUG"
[/code]

Restart the web server.

Now, to check that everything is working, open info.php and try to find Xdebug. If everything went well, you should see something similar to this:

Debug WordPress with Xdebug and Eclipse

Xdebug is working already and if you have set WP_DEBUG to true in your wp-config.php file, it will intercept all errors, warnings and notices and present them in a easy to read manner.

But, we are going further and setup Eclipse IDE so we can debug WordPress like a sir.

Open Eclipse and go to Window — Preferences — PHP — Debug and set preferences like this:

After that, go to Window — Preferences — PHP — Installed debuggers, click Xdebug and click Configure, then set it like this:

Technically, you are ready to debug your WordPress like never before.

Debug WordPress with Xdebug

Ok, first create a breakpoint for example somewhere in the index.php file of your theme. To add a breakpoint, right click on the line number and click on Toggle breakpoint.

Now, we are ready to add our debug configuration. In Eclipse toolbar click on an arrow beside a small bug and then click on Debug configurations:

Create debug configuration for web page similar to this:

Click Apply and click Debug.

Your browser will open and start a new debugging session and Eclipse will tell you that a breakpoint is reached. Eclipse will also give you a choice of using a Debug perspective, which you will confirm. It looks similar to this image below:

On the right, you have all the variables, which you can expand and see their respective values.

Now you can use debug toolbar to step into code or step over which looks like this:

When you hover the icons in debug toolbar, you get a tooltip on what it does:

• Remove All Terminated Launches – Clear sessions
• Resume – Resumes execution
• Terminate – Stop execution of the program and debugging.
• Disconnect – Stop debugging, but continue executing the program.
• Step Into – Follow code as it executes line-by-line, including going into function calls.
• Step Over – Skip showing execution of a particular function call.
• Step Return – If inside a function, this will skip to where it returns.

WordPress autosave

WordPress autosave feature can sometimes interrupt debugging process as it opens new debug sessions, so it is best to disable it or set it to longer intervals.

You can do that by entering something like this into your wp-config.php file:

[code lang=”php”]
define(‘AUTOSAVE_INTERVAL’, 600 ); //seconds
[/code]

And this concludes today’s debugging session. Xdebug can also be used for profiling, but that will be a theme for some next tutorial, but if you need it, here is the Codex article on it.