Debugging in PHPStorm

Setup xdebug in php.ini

In order to setup Debugging in PHPStorm, you need to tell xdebug your VM how to connect to PHPStorm. For this, you should add a new file in /etc/php/7.2/fpm/conf.d/ within yor VM called 21-xdebug-host.ini, and add your host IP address to that. Also activate xdebug remote debugging in it.

For all: echo xdebug.remote_enable=on | sudo tee -a /etc/php/7.2/fpm/conf.d/21-xdebug-host.ini

Vagrant with Virtualbox: echo xdebug.remote_host=10.0.2.2 | sudo tee -a /etc/php/7.2/fpm/conf.d/21-xdebug-host.ini

Vagrant with Docker on Linux: echo xdebug.remote_host=127.0.0.1 | sudo tee -a /etc/php/7.2/fpm/conf.d/21-xdebug-host.ini

Vagrant with Docker for Mac:

echo xdebug.remote_host=docker.for.mac.localhost | sudo tee -a /etc/php/7.2/fpm/conf.d/21-xdebug-host.ini
echo xdebug.remote_connect_back=0 | sudo tee -a /etc/php/7.2/fpm/conf.d/21-xdebug-host.ini

After that, you need to restart php-fpm: sudo service php7.2-fpm restart

Your PHP is now configured.

(These steps will be simplified in the future)

Setup PHPStorm

First, you need to setup a run configuration for PHPStorm. For that, go to the menu to Run -> Debug, and setup a new configuration.

Image of Menu

Image of Popover

In the window for setting up configurations, click on the plus on the upper left corner, and select "PHP Remote Debug" (be sure not to go to "PHP Remote Debug" in the template section, but to actually add a new one using the plus).

Image of Window for adding a new configuration

Call the configuration "Frontastic Debugging".

You do not need to configure anything else in that window. Do not set a filter for IDE connections. You need to install one of the browser toolbars/extensions/bookmarklets linked in the configuration dialog.

Image of the debug configuration.

Start debugging

In PHPStorm, activate your new debug run configuration. You can just click the "debug" button on the bottom right of the window you currently have open, or activate it from the menu. For that, open the Run -> Debug menu entry again, and select your debug configuration.

Image of the debug configuration

PHPStorm is now listening to debug connections from your VM.

You just need to tell PHPStorm where you want to start debugging by setting a breakpoint. In this example, we are just using the index.php for this, but you could set it up for any PHP code in the Frontastic platform, including your custom PHP code.

Image of an active breakpoint

You now need to open your browser on the Frontastic Page that you want to debug, e.g. http://demo-english.frontastic.io.local/, and use the browser extension/toolbar/popver… to activate xdebug. Refresh that page, and in your PHPStorm there should be a new window asking you to configure your mappings.

Configuration of mappings This is required because xdebug tells PHPStorm paths to files within the Virtual Machine. For instance, the index.php is located under /var/www/frontastic/project/public/index.php, and on your computer it is in a completly different location.

"File Path on Server" contains the path within your Vagrant machine. Select the corresponding file on your host below - probably the first preselected file is correct.

You should now be able to debug your php code in phpstorm. Configuration of mappings