When developing Web Applications for the Mobile Web Experience it is often useful to have a clear view into all HTTP requests and responses sent between the client and server. This is quite simple to accomplish when developing Web Applications for the Desktop as, the browser is running locally so any standard HTTP Monitor will suffice. And, while it is a normal part of a typical development workflow to run an application locally the majority of the time, testing on each target device is obviously an essential part of the process as well.
Luckily, with Charles, on iOS this is quite simple to accomplish.
To configure Charles to proxy all requests from an iOS device, simply follow these basic steps:
- From your iOS Device, open Settings.
- Go to Wi-Fi, select your Network and select the Blue “arrow” icon.
- Scroll to HTTP Proxy and select the Manual Button.
- In the Server field, enter the IP address of your development machine.
- In the port field, enter port 8888 (the default port to which Charles binds).
- Leave Authentication set to Off.
And that’s all there is to it. Now, open Mobile Safari and go to your Web Application’s URL (or any page on the web for that matter). On your development machine, in Charles you will receive a prompt with the IP Address of your Mobile Device, click “Allow” and you are all set. When you are done working, make sure to turn off HTTP Proxy on your device.
While this article may be focused on Mobile Web Applications, these same configurations apply to all HTTP traffic from any application on your device that requires resources over the web.