It’s really easy to get an iPhone, iPad or other iOS device to access a local web server running on your development machine. All you need is Charles Proxy running on your development machine (which you should have anyway, as it’s invaluable). Once that’s running:
Make sure your iOS device is connected to the same network as your development machine. Go into the Settings -> Wi-Fi menu on your iOS device and click the arrow next to your network. From there switch the HTTP proxy setting to manual and enter your development environment machine’s network IP address (eg. 192.168.0.4) as the server, and 8888 as the port (Charles’ default port unless you’ve changed it).
Voila. All your HTTP traffic from your iOS device will now route through Charles running on your desktop (Charles will prompt you to allow access first) and you’ll have access to your local development server. Awesome!
Aside: Android users, you’ve not got it as easy. There aren’t any HTTP proxy settings in Android (who said Android was an open platform?) so unless you’re willing to jailbreak your Android you’re out of luck. There may well be similar proxy settings for other mobile OSes. A quick Google will usually give you the answer.
Pro Tip: Are you still editing your hosts file in order to manage the host name mapping for sites on your development environment? Stop it. Just use the Tools -> DNS Spoofing menu in Charles and make life easier for yourself.
Good tips! It’s worth noting that if you’re on Windows and want a free alternative to Charles there is Fiddler. The interface isn’t as pretty but it’s just as powerful (if not more so) and it’s much faster (i.e. it’s not Java like Charles).
Re: Android – it’s easy enough to get devices working through Fiddler or Charles. You can install the ‘HTTP Proxy Settings’ app (see here for details). As of Android 3.1 it doesn’t even require this app as the setting as built-in.