JH Tech Services

A knowledgebase

Notes on Setting up Scotch-box, PHPStorm, WordPress for Remote PHP Debugging

by

Final Config

  • BOX 1: Web server with WordPress – Vagrant – linux (Scotch-box)
  • BOX 2: HOST Computer (windows 10)- hosting the vagrant box(BOX 1) and a virtual development box (BOX 2)
  • BOX 3: Virtual Linux development station running Linux Mint and PHPStorm

Setup BOX 1 – vagrant Scotch-box

  • Following instructions from scotch.io
  • updated vagrant on BOX 2
  • MySql not connecting. Had to use MySql workbench (tools they mention were either at cost or for Mac only). Had to configure connection using SSH for it to work. 
SSH Hostname: 127.0.0.1:2222
SSH Username: vagrant
SSH pass: vagrant

MySQL Hostname: localhost
Port: 3306
username: root
pass: root
  • Install xdebug

  • Using https://confluence.jetbrains.com/display/PhpStorm/Configuring+a+Vagrant+VM+for+Debugging to install xdebug

  • Used the following in Vagrant terminal (vagrant ssh):

sudo apt-get update
sudo apt-get install php5-dev
ERror need new PPA.  Said to run this
    sudo LC_ALL=C.UTF-8 add-apt-repository ppa:ondrej/php
    sudo apt-get update
    sudo apt-get install php7.0 # for PHP 7.0

    sudo apt-get install php5.6 # for PHP 5.6

    sudo apt-get install php5.5 # for PHP 5.5
Ended up not doing those installs as it still completed
sudo pecl install xdebug
    • vagrant up, vagrant ssh
      sudo vi /etc/php5/apache2/php.ini
      added the following section
[xdebug]
zend_extension=/usr/lib/php5/20131226/xdebug.so
xdebug.remote_enable=1
xdebug.remote_host=192.168.3.201  <- IP address of BOX 3
xdebug.remote_port=9000

In vi press i to enter INSERT mode. Scroll to bottom and type in the above. Press ESC to exist INSERT mode. Press colon : and then w and q and then ENTER to write and quit.

  • Restart

  • Need to be able to access this vagrant box not from my Host machine but from another virtual machine, BOX 3, so I changed the network from a private network to my local network. Be sure to read the security implications on vagrant’s website

  • In vagrantFile replaced the line that setup the network to a private network to this one. Replace 192.168.3.111 with your available local ip address:
    config.vm.network "public_network", ip: "192.168.3.111"

BOX 2

This is a linux box with PHPStorm installed
* In PHPStorm: Settings -> Language -> PHP -> Set Interpreter -> + -> Remote ->

Use SSH Credentials
Host: 192.168.3.111
user: vagrant
password: vagrant
PHP executable: /usr/bin/php  (confirm this for your vagrant box)
  • When I click open php.ini in editor, it’s different from the one in /etc/php5/apache2/ so added this but not sure if needed:
Configuration options: 
-dxdebug.remote_enable=1 -dxdebug.remote_host=192.168.3.201 -dxdebug.remote_port=9000
  • I copied the /var/www/public directory from the vagrant box to a local directory so that the php files (wordpress, themes, plugins) could be accessed via PHPStorm. They were included in the project’s Includes path. I believe this is automatically added when you tell it that it is a WordPress project and you tell it this path.

  • Then under Languages -> PHP -> Servers. Created a server with the host being the vagrant box, port 80, debugger: Xdebug.

  • Then check “use path mappings”: mapped my plugin project so typed out the absolute path of it on the vagrant box: /var/www/public/wp-content/plugins/pluginname
  • in Include paths: the local path to the directory I copied from /var/www/public, the absolute path is /var/www/public
  • Then Run -> Edit Configuration, hit the + sign and choose PHP Remote Debug. Select the server you created above and give the ide key as PHPSTORM
  • In your browser (can be on the Host (box 2)) too. Install an PHP debugger extension and in its settings configure the ide key to be PHPSTORM.

To Debug

Set a breakpoint in your code.
Under Run – Make sure it is Listening to PHP debug connections.
Access your wordpress site with the browsers debug extension you installed turned on

  • Knowledgebase
  • PHP
  • Wordpress