Setup for Charles Proxy for Web Debugging

When it comes to Web Debugging I have a preference to using Fiddler. However, Fiddler is best using Windows 10. They are working on a Mac version, but it is currently in Beta and doesn't have all of the functionality. If you are using a Mac and want to avoid installing an entire virtual machine for just this one application I would suggest Charles.

Setup the Charles Proxy Server

Once you have Charles downloaded we need to set this up for your local network. That way, you can test with multiple devices using various browsers and screen sizes. Charles is not free, so after 30 days you will need to purchase a license. But you can at least follow these instructions and test this out for yourself before you make this decision!

In the top menu, go to Proxy and check ✓ macOSProxy. (Shortcut: ⇧⌘P)

Again in Proxy, go to Proxy Settings... and in HTTP Proxy write a simple enough number in Port, such as 8888. Make sure to to also check ✓ Support HTTP/2 before you hit OK.

Your mac will not trust Charles to work right away so you will need a certificate set up for every device you plan to use. For every device, go to this link to download the certificate Charles provides.

Next you will need to manually configure the IP address on the machine that is running Charles. That way, it's not dynamically changing and breaking the connection for your devices to you this proxy. I set mine from 192.168.1.6 to 192.168.1.123 for example.

Using the Certificate on a Mac

Once you have downloaded this cert, double click this to be added to your mac's keychain app. You might need to go into this app and filter for "Charles" and make sure the certificate is trusted. You will know if it's not trusted when there's red text. Just double-click, select Trust in the modal, and set to Always.

Configure Network Settings for Mac

For every mac's top bar including the mac running Charles, select the Wi-Fi icon, select Open Network Preferences, and in the modal select Advanced....

Go to the Proxies tab and check ✓ both Web Proxy and Secure Web Proxy. For each of them, use the IP you manually set for your mac that is running Charles and for Port the four digits you provided in Charles Proxy Settings (Example ~ Server: 192.168.1.123, Port: 8888)

Using the Certificate on a iPhone

If you didn't download this on your phone yet, you can always airdrop the same certificate you downloaded on your mac to your device and it will be recognized. You will see a pop-up to let you know you need to do a little extra.

In your iPhone's Settings, go to General, find Profiles and you should see Charles Proxy CA. Click this profile and change this to be trusted.

While you are still in General, find About, and at the bottom select Certificate Trust Settings to make sure this new cert is toggled on.

Configure Network Settings for iPhone

In your iPhone's Settings main menu, select Wi-Fi, select your network and at the bottom click Configure Proxy. Click Manual and for server use the IP you manually set for your mac that is running Charles and for Port the four digits you provided in Charles Proxy Settings (Example ~ Server: 192.168.1.123, Port: 8888)

Using Rewrite

Select Tools in the top bar and click Rewrite. On the lower left-hand side click Add.

In Name, give the name of the project.

In the first panel for Location, click Add. Set the Protocol to HTTPS. Set Host to the url of the project (For example: www.example.com). Leave Port empty. And in Path, you can be specific or use * for any path.

In the second panel, click Add. For Type, choose Body. For Where, check ✓ Request and check ✓ Response. For Value type in </body>. Skip everything else all the way until you reach Value for Replace and use the example code below.

<script data-cfasync="false" id="ExampleScript">
    setTimeout(function () {
        var script = document.createElement('script');
        script.src = 'example.com/script';
        script.setAttribute('crossorigin', 'anonymous');
        document.getElementsByTagName('head')[0].appendChild(script);
    }, 2000);
</script>
</body>

Check ✓ Replace All and hit OK twice to get out of the Rewrite modal.

Start capturing traffic by clicking the Start Recording icon in Charles and in Filter (located in the lower left-hand side) search for the url. Right-click and check ✓Enable SSL Proxying. After this you're set!

Copyright © 2020. Jake Birkes