Friday, December 16th, 2011
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.
Monday, August 22nd, 2011
Of the many Network Debuggers available, for years I have, and continue to find, Charles to be a choice Web Debugging Proxy by all standards. This is largely due to its capabilities and many useful features, some of which are a bit less obvious than others.
One such example is the Map Remote feature which allows for the mapping of local URLs to remote URLs. This can be extremely useful as it allows for testing against many different environments without the need to change URLs or Endpoints in code.
As the name implies, Map Remote allows for mapping requests made to a local resource to be forwarded (transparently) to a Remote resource. So, for example, a local service at
http://localhost:8080/some-app/some-service could be mapped to a remote service at
http://dev.somedomain/some-app/some-service via a simple configuration using Map Remote. Moreover, Map Remote can be configured to map an individual resource (such as the previous example), all resources within a sub directory, all resources in a domain, all resources in a local subdirectory to a completely different remote subdirectory or all resources for a given suffix.
To configure the mapping of a local resource to a remote resource, in Charles, from the Main Menu select:
- Map Remote
- Click “Enable Map Remote” from the Map Remote Dialog
- Paste the Local resource URL in the top “Map From” section (Charles will parse and auto-fill the protocol, port etc. from the host value provided)
- Paste the Remote resource URL in the bottom “Map To” section
Once completed you will see the mapping in the resulting dialog and the mappings will be made when using Charles until they are removed or the “Enable Map Remote” setting is turned off. Additional Mappings can be added following the same steps and existing mappings can be removed or edited by double clicking on them. The only improvement I would like to see added is the ability to “clone” an existing mapping so as to quickly configure a slightly different mapping without the need to start from scratch.
There is also a Map Local Feature in Charles which is essentially the inverse operation of Map Remote and can be quite useful as well.
If you regularly test against different environments and use Charles then I highly suggest trying Map Remote. For more information, check out the Charles Documentation.