Use Charles to Rewrite Responses While Developing iOS Apps

You don’t need a backend (right now)

Image for post
Image for post

Difficulty: Beginner | Easy | Normal | Challenging
This article has been developed using Xcode 12, and Swift 5.3

Prerequisites:

Terminology

Charles: A HTTP proxy for development

A warning

Be careful because many guides instruct developers to turn off the mac proxy, but using this simulator this prevents the developer seeing the data from their target App!

Image for post
Image for post

The original App: The original App makes a network call and prints the following to the console:

We are going to change that response!

  1. Download Charles. It has a free trial, and after that has run it’s course you are able to still use it (with restrictions)
  2. Get the Root Certificate for iOS simulators (this downloads the certificate straight to the simulator, without any work from you). This is avaliable from the menu Help>SSL Proxying
Image for post
Image for post

This is confirmed with the following notification:

Image for post
Image for post

Now open the iOS simulator an enable the proxy certificate through Settings>General>About>Certificate Trust Settings you can then click the toggle to enable the proxy

Image for post
Image for post

3. You will be asked to confirm that you wish to do this in the simulator. Of course you should agree to this

4. Then run the App. You might like to run your own app that makes an API call, but I’ve created a usable App in the repo

5. Run on both Xcode and Charles
You can now run the App from Xcode, and at the same time run Charles.

If you press the request button on the App, you should see a request for regres.in.

Image for post
Image for post

You can now see the request and the response! Right-click on the regres.in request and enable SSl proxying (This is also avaliable from Proxy>SSL Proxying Settings).

6. Enable rewriting
To mock Tools > Rewrite. Check Enable Rewrite.

Edit the location (this is the correct protocol, host and path for regres.in)

Image for post
Image for post

We can then modify the query parameter

Image for post
Image for post

and then remember to click apply

Image for post
Image for post
  1. Run again — and we should have a result in the console of

And remember…

If you want to use your usual backend (so to speak) do turn Charles off. If not, you know, you won’t be using your usual backend.

Also remember…

Caching goes on when using URLSession. When playing with the proxy this might mean that you don’t see the requests. In this case, you might choose to use URLSession ignoring the local cache — something like the following might help:

And..remember…

If you want to mock a new host, make sure to pick one with an existing SSL certificate. That is, pick an already existing host!

Conclusion

Charles is a great way of changing responses

If you’ve any questions, comments or suggestions please hit me up on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store