UPDATE* If you want to save yourself a lot of hassle, I would recommend using Ghostlab for this. It works incredibly and there’s no real setup involved.
This one has had me really stumped for the last few weeks. I have been going through the process of making this site responsive, and I was trying to test my local WordPress site on my iPhone and the virtual PC on my Macbook. It is easy enough if your site is non-Wordpress – you simply replace “localhost” in the URL with your machines IP address. WordPress is quite a bit more tricky because of all the absolute paths for images / stylesheets etc. Basically, your phone or virtual machine will still be trying to find styles and images at “localhost” rather then the IP address, and this obviously doesn’t have amazing results.
Here are the steps that I found worked for me:
1. Find your IP address
Just land on this site and it will tell you what it is – http://www.whatismyip.com
*A more accurate way to do this would be to go to the root of your terminal and type ‘ifconfig’. Under ‘en1’ you will see ‘inet’, and this is the best IP to use.
2. Make sure your computer and mobile device are connected to the same WI-FI (for mobile testing)
3. Add the following to your wp-config file (before the include to wp-settings.php):
This just changes the “root” of your site from “localhost” to whatever your IP is.
Just remember to use your own IP address and site folder here. This snippet must come before the include to wp-settings.php.
var newImgSrc = $(this).attr('src').replace(/\localhost/, '18.104.22.168');
This looks for all images that have “localhost” in their src, and replaces “localhost” with whatever your IP address is. Again just remember to use your own IP address here.
Lastly, just remember to remove the snippets from steps 3 & 4 after you are finished testing!
And that’s it!