Debugging with PhpStorm

In order to set up debugging in PhpStorm, you need to allow Xdebug running on your Frontastic sandbox to connect to PhpStorm.

🚧

For this to work, you need to have PHP unit tests set up in your project.

If you're using Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development., you can do this by using frontastic xdebug. Alternatively, you can set up the port forwarding yourself by using ssh <user>@<host> -R 9003:localhost:9003.

Optionally, you can set the debug connection to start automatically when you make a request. To do this, open the Xdebug config file and update the config setting to set xdebug.start_with_request to 1. Then SSH into your development machine and use vi /etc/php/7.4/fpm/conf.d/20-xdebug-host.ini to edit it. If you do this update, remember to restart php-fpm using sudo service php7.4-fpm restart.

If you run into any problems you can have a look at the Xdebug log at /tmp/xdebug

Now, your PHP should be configured and you can set up PhpStorm. You'll also need to follow the below steps to run the configuration:

  1. Go to the menu and select Run, then select Debug, and click Edit configurations
  1. Click on the add icon button on the upper left corner, and select PHP Remote Debug

🚧

Don't go to the PHP Remote Debug in the Template section, as you'll need to create a new one via the add button.

  1. Name the configuration "Frontastic Debugging".

You don't need to configure anything else in this window. Don't set a filter for IDE connections. You need to install one of the browser toolbars/extensions/bookmarklets linked in the configuration dialog.

  1. Ensure PHPStorm is configured on the right port for Xdebug.

Go to Menu, then Preferences, then Languages & Frameworks, then PHP and select Debug. On Debug port input 9003 if it's not already specified.

Then you can start debugging, to do this you'll need to follow the below steps:

  1. Activate your new debug run configuration in PhpStorm by clicking the debug button on the bottom right of the window you currently have open or activate it from the menu, (open the Run menu again, select Debug, and then select your debug configuration).

PhpStorm is now listening to debug connections from your Frontastic sandboxFrontastic sandbox - A virtual machine hosted in the cloud that you can use for backend and some frontend development. They're provisioned from the developer area of the Frontastic studio..

You need to tell PhpStorm where you want to start debugging by setting a breakpoint. In the below example, we're just using the index.php for this (go to Run menu and select Break at first line in PHP scripts), but you could set it up for any PHP code in the Frontastic platform, including your custom PHP code.

  1. Open your browser on the Frontastic page that you want to debug, for example, 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.

You need to do this because xdebug tells PhpStorm the paths to files within the Frontastic sandboxFrontastic sandbox - A virtual machine hosted in the cloud that you can use for backend and some frontend development. They're provisioned from the developer area of the Frontastic studio.. For instance, the index.php is located under /var/www/frontastic/project/public/index.php, and on your computer, it's in a completely different location.

  1. File Path on Server contains the path within your Frontastic sandboxFrontastic sandbox - A virtual machine hosted in the cloud that you can use for backend and some frontend development. They're provisioned from the developer area of the Frontastic studio.. 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.

If you're still having issues, contact our Support team by clicking the Submit a ticket button at the top of the page.


Did this page help you?