Testing responsive websites using Google Chrome DevTools is pretty quick and easy. If you have a website that serves a mobile-only version based on device detection though, Chrome’s tools aren’t going to work reliably.
I’ve always been a fan of Adobe Edge Inspect for developing mobile sites, because it allows you to inspect the underlying styles, just as you can do with Chrome’s or Firefox’s developer tools, while viewing the website on the actual physical device you are testing for. Unfortunately, if you are working on a local development site, viewing it on your iPhone with or without Edge Inspect can be a problem. The problem is made more difficult if your local development server is hosting multiple sites under a single IP address. Unless you have a jailbroken iPhone, you won’t be able to edit the hosts file and let your phone know where to find the hostname of your local development website.
The solution is to point your iPhone to a proxy server running on a local desktop machine (Windows in my case) that has a host file pointing to your local development website. I use Fiddler 4.
The set up is pretty easy. You just need make a couple of changes in Tools > Fiddler Options > Connections
Next, you need to set your iPhone’s wifi connection to user your new proxy server. Go to Settings > WiFi > Your Connection, and at the bottom set HTTP Proxy to Manual. Then enter in the IP Address of the machine that has access to your local development website, and the port number 8888 you specified in Fiddler.
Now you should be able to see your local website on your iPhone. Next, just set up Adobe Edge Inspect as usual, and test away!