Firstly, we want to use the Validating Your Debugging Configuration to check that that PhpStorm can speak to the remote server, and that our settings so far are up to date:
You can see that we've used the public directory as the path to create the validation script, and the ip address of our Vagrant web server as the url (you should replace these with the relevant settings for your configuration).
The yellow triangle is telling us that we have no debugger installed on our VM. If you are using Puphpet or similar then you can instruct that Xdebug is installed in the files you downloaded from them; this is by far the easiest way to get Xdebug installed. If not, follow the instructions in the Xdebug Installation Guide tutorial to install and configure Xdebug on your VM.
On Ubuntu, we can usually do this very easily, by installing the PEAR extension, and then using PECL to install Xdebug. We then need to enable the extension as described in the Xdebug Installation Guide tutorial, in your Vagrant VM run:
sudo apt-get install php-pear
sudo apt-get install php5-dev
sudo pecl install xdebug
Once PECL has installed Xdebug, it will tell you the location it has added the file and the directive you need to add to your php.ini tool in order to load the extension.
Copy that directive to your clipboard, we need to add it to our php.ini file. The results of the debug validation tool (screenshot above) tells us the location of our php.ini file. Open that file in your favourite text editor, and paste the zend_extension at the end of your file. We'll also need to add the directives from the Xdebug Installation Guide. In my case, I added the following to my php.ini file.
We then need to restart php-fpm or apache - in my case on my Ubuntu/Nginx install I used
sudo service php5-fpm restart.
Now, when we run the Debug Validation Tool, we should see:
Success! All blue means everything is working, and you are ready to start debugging using PhpStorm and your Vagrant VM.