Setting up Xdebug for PHPStorm

Debugging WordPress plugins, themes and PHP in general isn't simple. We can setup Xdebug for PHPStorm to add a single-step debugger to our IDE.

You first need to install the latest versions of both PHPStorm and WAMP.

WAMP configuration

We’ll first add the Xdebug extension to the PHP engine in WAMP. First, we need to download the xdebug.dll file, move it to the target folder and edit the php.ini file from the web server.

This page can be used to check the phpinfo() results from WAMP – https://xdebug.org/wizard.php - and get detailed instructions on how to proceed.

Once all instructions have been completed, re-run their test. xdebug.org should now state that “you’re already running the latest Xdebug version”.

PHPStorm configuration

Official instructions to integrate Xdebug with PHPStorm can be found here - https://www.jetbrains.com/help/phpstorm/configuring-xdebug.html.

First, we need to configure the CLI interpreter. Go to Settings > Preferences > Languages & Frameworks > PHP and add a CLI interpreter for the PHP version that’s actively being used by WAMP (e.g. PHP 7.2.14). Make sure to also link to the Xdebug .dll file.

Each time a new project is opened/created, it is important to make sure that the WAMP PHP engine is set as the active CLI interpreter.

Now click the "Open in Editor" link on the same screen. Note that this isn’t the php.ini file in the Apache subfolder, but the one that’s in the active PHP version folder. The php.ini file should now be opened by your default text editor. In this file, there’s two things we need to do:

1. If needed, disable the Zend Debugger (which blocks Xdebug) by commenting out the following lines: zend_extension=<path_to_zend_debugger> zend_extension=<path_to_zend_optimizer>
2. To enable Xdebug, locate the [Xdebug] section (or add it if needed) in the php.ini file and update it as follows:

• zend_extension="<path to php_xdebug.dll>"
• xdebug.default_enable=1
• xdebug.remote_port="9000" (this is the default port)
• xdebug.idekey=PHPStorm

If we now run the php -–version (php -v) command in the CLI (Terminal tab) within PHPStorm, we should see that Xdebug is enabled.

If nothing is showing up, then you most likely still need to add the path of the active PHP engine (e.g.: C:\wamp64\bin\php\php7.2.18) to your system variables. If you're not sure how to do this, then refer to this tutorial.

In order to connect to the "remote" site and debugger, we now only need to add a Debug Configuration. There's two options here:

1. The "remote" site's debugger tries to connect to PHPStorm. In this case, we need to add a PHP Remote Debug Configuration and start listening to remote connections (look for the phone icon in the toolbar).
2. PHPStorm connects to the "remote" site's debugger. In this case, we need to add a PHP Web Page configuration.

On the "Server" screen, we need to set the (virtual) host. This should be the virtual host for the website. For remote configurations, we also need to set the IDE key as "PHPSTORM" and install the Chrome Xdebug extension.

Once all that’s done, you should be able to debug All in One SEO Pack by running the Debug Configuration we've just added.