How to configure Atom’s php-debug package to work with Xdebug on a Pressmatic site

Xdebug is a very useful tool for debugging php problems when they arise. Getting it setup and working on your local environment can be a little tricky at times, but hopefully this guide makes things easier for you.

Pressmatic is a MacOS application that allows you to create local development environments specifically for WordPress installations. If you’d like to learn more about it’s features and capabilities you can check out them out on their site. If you use IntilleJ’s PHPStorm as your IDE and want to use Xdebug you’re in luck because with Pressmatic you can configure your site and PHPStorm to work together with a simple click of a button.

Configure-PHPStorm — Configuring PHPStorm and IntelliJ IDEs is dead simple, just click the button and you’re good to go.

I personally use the Atom Editor editor for most of my day to day work so the handy button wouldn’t work for me, however it’s still possible to make use of Xdebug if you’re an Atom fan like me.

So to begin with if you’re just starting out with using Xdebug with the Atom editor the first thing you’ll want to do is install the PHP-Debug package. The easiest way to do this is to just open up a terminal window and enter the following command…

apm install php-debug

After running that command you’ll need to restart Atom before php-debug will show up. After this there’s a few pieces of information we’re going to need to collect to configure things.

The IP Address of your virtual machine
The Path to your site’s public directory from the perspective of your local machine i.e. Local Path
The Path to your site’s public directory from the perspective of your virtual machine i.e. Remote Path

To find the ip address of your VM simply open up a terminal and ping it like you would any other site.

ping test — As you can see in the image my site’s ip address is 192.168.55.100

Most of your local path can be found by simply looking at the ‘Site Setup’ page for you site within Pressmatic.

This gets us most of the way there, the actual path that we’ll want to use is the site path as shown above with ‘/app/public’ appended to the end of it. Lastly our remote path will simply be ‘/app/public’.

So to recap here’s what I have for this site’s setup.

Remote IP Address = 192.168.55.100
Local Path = /Users/mkokes/Sites/examplesite/app/public
Remote Path = /app/public

Now let’s use this information and configure Xdebug and php-debug. First up we’ll tackle Xdebug, this requires modifying the php.ini file within your VM the location of the php.ini file is going to vary slightly depending on the version of php you’re currently set to. To begin with from within Pressmatic you’ll want to right click on the site you wish to configure and select ‘Open Site SSH’. This will pop open a terminal window that’s remotely connected to your virtual machine.

Open SSH

By default Pressmatic sites have the nano editor install, but no vim, so if you’re like me and loath nano you’re probably going to want to install vim.

apt-get update apt-get install vim

Now we can navigate to the php.ini file.

 cd /conf/php

Within the php folder if you run the ls command you’ll see a folder corresponding to the version of php you’re using. In my case I’m just using the default version 7.0.3. cd into that folder and you’ll see the php.ini file. Go ahead and edit it using Vi.


vi php.ini

Once you have it opened up towards the very bottom of the file you’ll see the section that corresponds to Xdebug. it’ll look something like this…


[Xdebug]
zend_extension = /opt/php/7.0.3/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so
xdebug.remote_enable=1
xdebug.remote_connect_back=On
xdebug.remote_port="9000"
xdebug.profiler_enable=0

You’ll want to change it so that it looks like the example below, note that I’m using the remote IP that we found earlier.


[Xdebug]
zend_extension = /opt/php/7.0.3/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so
xdebug.remote_enable=1
xdebug.remote_connect_back=On
xdebug.remote_port="9000"
xdebug.profiler_enable=0
xdebug.remote_host=192.168.55.100
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=true

Now to make sure our new settings are loaded into the configuration you’ll want to right click on your site and select restart.

restart

Let’s go ahead and configure Atom/PHP-Debug now, click on Atom in the top menu and go to config. This will open up Atom’s config.cson file.

open config

Find the section of the config file that contains the php-debug. We’re going to need to specify the port that xdebug is running on along with the paths to the local and remote directories.


"php-debug":
ServerPort: 9000
PathMaps: [
"/remote/path;/local/path"
"/app/public;/Users/mkokes/Sites/examplesite/app/public"
]

As seen above the remote path comes first followed by a semicolon then your local path. That’s it! You should now be up and running with Atom+Xdebug!

A few things I think I should mention in closing, you’ll need to perform this setup for each of your Pressmatic sites separately. Essentially they’re all separate machines so they each have their own separate php configurations. Within your Atom config.cson file you’ll want to add a line to you PathMaps for each of the sites you’re wanting to use xdebug on. Lastly when you change php version on a site you’re also changing php.ini files and if you change back to a version you were previously using your xdebug changes will be overwritten, so as a rule of thumb anytime you change php versions you’re going to need to reconfigure xdebug.

Tim Cimbura – CEO, CFO and Software Engineer

Tim is an expert in creating custom business solutions that make businesses more effective, productive, and profitable. He specializes in rapid application development with Claris FileMaker, Laravel, and WordPress. He also knows Apple macOS technology inside and out.

Tim Cimbura – CEO, CFO and Software Engineer

Providing Brilliant Solutions Since 1986