MAMP + WordPress + xip.io: cannot get linked assets to load

Question

I managed to get Mamp Pro virtual host domains (example: http://mysite.dev) working with some help from the stackoverflow link above ( http://stackoverflow.com/questions/11546356/xip-io-with-mamp-pro-doesnt-work ), however I still cannot get things to work properly with local WordPress installs.  I get the same old issue of content loading, but linked assets (CSS, JS, images, etc) do not load. When I used to use http://localhost/ urls I got the same issue unless I set each WordPress install to use the machine’s IP address, which was annoying when working from different locations.  Now that I’ve set up virtual hosts and am using .dev domains, which I really like for a variety of reasons, I’m back to square 1, where Edge Inspect becomes useless.

Answer 1

Hi Gabe, the heart of this issue is caused by a feature of Wordpress, not because of some issue with Edge Inspect. For some reason Wordpress refers refers to all linked assets with a full URL rather than a relative URL, and that causes a variety of problems including the one you're seeing.
You should be able to work around this. It's not clear to me from your message above where you are in the process, so I'll just try to cover all the steps in a general way. Plus, this may help others trying to do the same thing:
Your basic first step is that you have to get virtual hosts working in MAMP. That means, if you've setup actualgabe.dev as a virtual host, that without Edge Inspect or xip.io you should be able to type in (for example) http://actualgabe.dev/index.html into your browser and view a simple web page running on your machine.
You've got to get Wordpress working with that virtual domain you've got set up. That means that all of the assets that Wordpress is referring to with a full URL should properly reference back to your machine and be viewable in your browser. Since Wordpress may refer to those assets with a localhost URL, you'll have to inspect the page to ensure that Wordpress is actually referencing the assets with your actualgabe.dev virtual host definition.
Now make sure that MAMP, Wordpress, and xip.io all function correctly together without Edge Inspect involved. Assuming that you've got the actualgabe.dev virtual host configured as in steps one and two, then go ahead and take one of your devices and type in a URL of http://actualgabe.dev.<YOUR_MACHINE_IP_ADDRESS>.xip.io/index.html. So if the IP address of the computer you're hosting the site from is 10.0.0.1, you'd enter http://actualgabe.dev.10.0.0.1.xip.io/index.html. You should be able to see your local Wordpress site from your computer with all of it's associated local assets.
Once you have those previous 3 steps working and fully tested, you should be able to start Edge Inspect, connect your devices up, and use that same URL from step 3 (e.g. http://actualgabe.dev.10.0.0.1.xip.io/index.html) in Chrome and see your Wordpress page and all of its assets.
Let me know if you have any questions,
Mark