If you have a VM server like for example drupal vm and want to make use of xdebug so you can then debug your code on of the first things you need to do is to enable xdebug on config.yml file which you can just uncomment line for xdebug.
On phpstorm you need you need to set it up for the debug to listen to a specific port as well as file mapping. Here are the brief steps.
1) Go to phpstorm preferences->languages & framworkes->php->debug then enter the port number, normally this is 9000
2) Then under phpstorm preferences->languages & framworkes->php->servers you need to enter server name e.g. example.local then you need to add the file mapping e.g. map drupal root folder of the host with the drupal root of VM.
3) On the toolbar near to phone hand you need to configure the remote debug for example if oyu are debuging php code then you need to choose php remote debug and under ID Key you need to put
4) On the last step you would need to download phpstorm bookmarklets once that done you can then add to your bookmarks and when you need to debug a drupal page then you can click on strat debugger then back on the php storm click on play button on the toolbar which is near to phone hand. Like in image below:
In addition to that on the code you need to put breakpoints on deffernet variables, function that you want to watch.
But when you clikng on the icon above you need to make sure that that piece of code is resposible for the page that you started debuging on the browser otherwise you wouldn't see any debuging information.
In brief here are the steps to debug once setup is done:
1) start receiving connection by clicking phone icon on phpstorm
2) start debug on the browser using phpstorme browser generations plugin for chrome
3) click on start debug on the chrome addons (bookmarked)
refresh page, at this point it will redirect to the phpstomre with your breakpoint then just step over to go through different breakpoints and variables.
Fixing Potential Errors
You may be facing probles while you are doing this.
The way it works in brief is virtual server is the one that connects to host (mac) on the port that you specify for xdebug default is 9000 it is important that you look at the /tmp/xdebug.log for clues, so if your virtual box can't connect to host machine on the IDE then what you need to do is set up the ssh tunneling, and this need to be done on host machine i.e. mac machine not virtual server.
On my mac I typed the following command:
ssh -R 9000:localhost:9000 user@hostname
Then also while on mac I checked if port 9000 is opened like so:
sudo lsof -i :9000
You can also check on virtual machine if port 9000 of host machine is opened,
telnet 10.0.2.2 9000
10.0.2.2 is the host ip to mac So in this way we know that mac is listening on port 9000 and then we can test on phpstorm if this work.
The other helpful command to view route on virtual box is as followed.
netstat -an | grep 9000
It is important that you do a correct directory mapping as this may cause for the debug not to work.
If everythign is set up correctly and still getting an error try adding this at the end of the url:
after that you wouldn't need to add that at the end of url that you are trying to debug.
To validate xdebug create a file and put a script example:
<?php echo 'test works';
and then put this file on a directory where you can specify the path on debug validation window like in the below image:
then go run->web server debug validation.