Debug WordPress with XDebug

D

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:

    phpinfo();

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:

[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"

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:

phpinfo

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.

debug wordpress like a sir

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

eclipse-xdebug-setup

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

debugger-settings

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:

debug-config

Create debug configuration for web page similar to this:

our-debug-config

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:

eclipse-debug-perspective

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:

debug-toolbar

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:

define('AUTOSAVE_INTERVAL', 600 );  //seconds

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.

About the author

Zvonko Biškup

A passionate web developer with more than 13 years experience in PHP and other web related technology. My main interest is WordPress and new PHP frameworks.
Owner of Influendo Programming.
Enjoys exploring new stuff and possibilities, using new technologies and just having fun developing awesome stuff.

  • Any luck getting debugging going on something like Sublime Text? I’d hate to have to set up a whole project on something like Eclipse when I’m already working in Sublime.

    • You can see how to debug in Sublime Text 2 on Debug PHP with Xdebug and Sublime Text

  • Saša

    Great tutorial and it works perfectly!

    Hvala puno 😉

  • clod

    Codelobster PHP Edition has internal very good free debugger: http://codelobster.com/php_debugger.html

Tags