WordPress debugging in phpStorm

While working with WordPress after a while, the first problem I encountered is that I can’t debug it easily as I could do it directly from PyCharm (for python/django), RubyMine (for ruby/rails). So, I wanted to figure out how to do it in phpStorm for WordPress. I found it is quite easy to get it done with a few easy to follow steps.

phpStorm 8 (currently available in EAP) has support for WordPress development. Follow the official doc to configure phpStorm for WordPress.

Enable Remote Debugging using xdebug

Check the official document on how to install xdebug extension for PHP and enable it. Once the extension is installed, you need to enable it and also enable remote debugging.

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php5.5.10/lib/php/extensions/no-debug-non-zts-20121212/xdebug.so"
xdebug.remote_enable=1

The above is my configuration. However, you may need to change the path of xdebug.so based on your extensions path.

Once installed, restart your web server. To make sure xdebug is activated, run

php -v

This should output something like:

$ php -v
PHP 5.5.10 (cli) (built: Apr 10 2014 17:49:22)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies
with Xdebug v2.2.4, Copyright (c) 2002-2014, by Derick Rethans

Notice that Xdebug 2.2.4 is activated. You can also see this using phpinfo().

Configuring phpStorm

As we’ve installed Xdebug, let’s link it with phpStorm. Open phpStorm’s preference and

Screenshot 2014-08-07 21.08.55

Select version from PHP language level and interpreter where you’ve just configured the xdebug. If it’s not listed, click on the Screenshot 2014-08-07 23.01.03 button.

Screenshot 2014-08-07 21.09.54

Give your interpreter a name. For PHP home, click the Screenshot 2014-08-07 23.01.03 button next to the field and locate your php interpreter. If you don’t know where it is go to your shell and run the following command to get the location.


which php

It should detect that Xdebug is installed in this interpreter. Press Ok buttons.

Now, you need to tell phpStorm to listen for the Debug connections. In the toolbar, you will notice the button shown in the following screenshot. Click there and phpStorm will start listening for debugger connections.

Screenshot 2014-08-07 21.11.45

Triggering the debugger

We’re in the last part of our configuration. Everything is done except triggering the xdebug. There are several ways of triggering the debugger. Easiest way is probably using browser extensions. Install extension for your browser as listed below. I will show for Chrome.

Firefox

Chrome

Safari

Opera

After installing the extension, you’ll notice a new button at the right side of your address bar.

Screenshot 2014-08-07 23.07.44

Click on it and choose Debug option.

That’s all*. Now set a breakpoint in your IDE and the execution will be paused there when you refresh your page.

Screenshot 2014-08-07 23.12.23

You can now step into different levels, evaluate expressions on current context, see all scope variables and so on. Your WordPress development will never be painful like earlier. Follow this link to learn more about debug toolbar.

Screenshot 2014-08-07 23.14.34 * First time, you will receive a prompt in your IDE to accept the incoming connection.