10 Magento developer tips | Episode 1 : Xdebug

Install, configure and USE Xdebug :

Step 1: Installing Xdebug

First things first, let's install Xdebug. Open up your terminal (you can find it by searching in the applications menu) and type in the following command:

sudo apt-get install php-xdebug

This command will download and install Xdebug for you. Easy peasy!

Step 2: Configuring Xdebug

Now that Xdebug is installed, we need to configure it. Open up your favorite text editor (like VSCode or Gedit) and open the Xdebug configuration file. You can find it in /etc/php/<your_php_version>/mods-available/xdebug.ini.

If it doesn't work for you or the xdebug.ini file is nowhere to be found, you can write this directly at the end of the php.ini file which should be in the parent directory.

Add the following lines to the file:

xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.mode = debug
xdebug.discover_client_host = 1

Save the file and close it.

Step 3: Setting Up PHPStorm

Time to jump into PHPStorm! Open up PHPStorm and navigate to File > Settings > Languages & Frameworks > PHP > Debug.

Check the box that says "Can accept external connections" and make sure the debug port is set to 9000.

Then jump into Run > Edit Configurations.

Click '+' on the top left, then select "PHP Remote Debug".

Give it a name let's say "Dev" and check the "Filter debug connection by IDE key".

Type in the IDE key "PHPSTORM" and click on the "..." button on the right of the "Server" field to add a new one.

In the Server configuration popup click "+" again then give it a name let's say "Dev" again.

Type in the host of the current local magento installation like http://magento.local for example, and the port on which your apache or nginx is listening.

Click OK to close the popup, and now you can Validate your configuration by clicking on the "Validate" word in the "Pre-configuration" area.

Don't forget to restart apache or nginx before you proceed.

In the validation popup check the "Local Web Server or Shared Folder" and type in the /path/to/magento/root/pub directory and the url of your local installation like http://magento.local:80 for example.

If everything is correctly configured all the lines should be green, otherwise try to add the missing configuration that PhpStorm is asking for.

Step 4: Configuring Magento 2

For Magento 2 specifically, we need to make sure that Xdebug is being used by our PHP CLI. Open up your terminal and run the following command:

sudo nano /etc/php/<your_php_version>/cli/php.ini

Add the same Xdebug configuration lines that we added earlier to this file as well. Save and close the file.

Step 5: Configure Chrome

To make sure Chrome is sending the right IDE key in every request made to your local Magento installation we will use the Xdebug Helper extension which exists on both Chrome and Firefox.

Once installed make sure to configure it to send the "PHPSTORM" key we typed earlier in the PHPStorm debug configuration popup, then click on the extension to activate it while you're browsing your website.

Step 6: Testing

To make sure everything is working smoothly, restart your web server:

sudo service apache2 restart

Now, set a breakpoint in your Magento 2 code using PHPStorm. Run your Magento 2 application in the browser, and if everything is set up correctly, PHPStorm should catch the breakpoint and allow you to debug your code!

And that's it! You're all set up with Xdebug for Magento 2 development. Happy coding, friend! If you run into any issues, feel free to reach out.