Debug IOS applications with Charles Web Proxy

When you are doing (naughty) stuff with the Internet, Charles Web Proxy is probably the most valuable thing a developer could have!

Normally I just use Firebug’s Net panel to see what my request/responses are, but since I’ve discovered Charles it took debugging and inspection to a whole new level. Especially now I can hook it up to inspect the traffic sent to and from my iPhone.What is it exactly?

Charles is a proxy. Don’t worry, proxy is a scary word for ‘a (wo)man in the middle’.

A regular HTTP request goes like this:

  • You perform a request to fetch a webpage (e.g. http://www.google.be).
  • Google accepts the request and sends back a response.
  • Your receive the response.

When you put a proxy in the middle it goes like this:

  • You perform a request to fetch a webpage (e.g. http://www.google.be).
  • Your request goes through the proxy and then goes to Google.
  • Google accepts the request and sends back a response.
  • The response passes through the proxy.
  • You receive the response.
You actually re-route your request and with Charles you can intercept and change/inspect your HTTP response/request.

How do I put it between my iPhone and my computer?

  1. Download Charles
  2. Launch Charles
  3. Connect your iPhone to a wireless hotspot
  4. Click on the little blue arrow of your selected network
  5. Scroll down to the HTTP Proxy section
  6. Select Manual and fill in the following details
    Server: IP address of your computer (go to Network Settings on your computer to find out)
    Port: 8888
    Authentication: Off
  7. Surf to a website on your iPhone
  8. You should see a popup on your computer that Charles detected a request
  9. Accept
  10. And done 🙂
When you stop debugging or you close your computer, you have to turn off the HTTP Proxy again!

So … what can I do with it?

1. You can use it for debugging purposes, when you are developing an app on your iPhone

2. You can use it to see what http requests happen when you work with certain apps. A while back I posted on Twitter how the ‘scan-movie-poster-image-recognition’  thingie of the Kinepolis app by In The Pocket worked. As I was working on my face recognition app I was convinced they were also using a cloud service. If you want to find out for yourself:
Just launch the Kinepolis app, while Charles is running and scan a poster. You’ll see that sevaral requests to api.moodstocks.com are made. So then take a look at Moodstocks and get inspired to build something with this service!

3. You can use it to hack games as you can put breakpoints with Charles ( Menu > Proxy > Breakpoints ) 🙂 It works the same as putting breakpoints in code … it stops the request when it leaves your computer and it stops the response just before you receive it.  So you are in total control how the response leaves your computer and what comes in … I won’t say more 😉

4. A very neat other feature is the fact to throttle your bandwidth. This means that you can simulate your connection speed. This is a very handy tool to test preloaders or how time-outs are handled in your code!

Any downsides?

Nothing I can think of. Maybe it’s price … but then again, it will save you lots of time when debugging HTTP requests/responses! So it’s really worth the 50 euro and you can try it for free for 30 days!