Debugging with a Proxy Tool

Guide For Web & In-App Debugging

• Charles - www.charlesproxy.com
• Fiddler - www.telerik.com/fiddler

To debug a creative in a webpage, like our previewer or a live website, use the following instructions.

Charles

1. Setup Charles to be used in your browser.
2. Refresh the page you want to debug.
3. In Charles, look at the URLs that are loaded.
4. Right click the file you wish to map, choose 'Map local', select your local file and save.
5. If you refresh a page and a match is found, you will see it being highlighted line in the session list.
6. From now you can do local changes and see its effects directly.

Fiddler

1. Install Fiddler on your computer.
2. Configure Fiddler and Client if needed using the help site.
3. Now you can capture traffic and use the AutoResponder to make a match and respond rule.
4. A simple way of doing this is drag and dropping a local file on the AutoRespond panel.
5. If you refresh a page and a match is found, you will see it as a highlighted line in the session list.
6. From now you can do local changes and see its effects directly.

Set-up device

1. Lookup the IP address of your computer its network, this can be done by using (among other) Charles. Go to Help > Local IP Addresses
2. On your mobile device, go to your Wi-Fi settings, make sure you select the same network.
   • On iOS:
     
     • Select the information icon to go to the specific details of the Wi-Fi network.
     • Go to the HTTP Proxy section, and select the Manual tab.
     • Enter the local IP address in the Server field.
     • Enter 8888 in the Proxy port field.
   • On Android:
     
     • Tab and hold your Wi-Fi network, and select Modify Network.
     • Select Show advanced options.
     • Set Proxy settings to Manual.
     • Enter the local IP address in the Proxy hostname field.
     • Enter 8888 in the Proxy port field.
3. Download and install Charles and Fiddler root certificate:
   • On iOS:
     • Download Fiddler certificate:
       • Start Fiddler on your computer. On your device, in Safari, goto http://local_ip:port (e.g. http://192.168.1.10:8888) and download 'FiddlerRoot' certificate.
     • Download Charles certificate:
       • Start Fiddler on your PC. On your device, in Safari, goto http://chls.pro/ssl and download the certificate.
     • Install root certificate:
       • Go to the device Settings > General > Profiles and you'll see the downloaded 'DO_NOT_TRUST_FiddlerRoot' profile. Click on in to install it.
       • Then go to the device Settings > General > About > Certificate Trust Settings (all the way down). Enable the newly installed root certificate.

Your device setup is now completed. When you open an application on your mobile device, Charles will retrieve the network traffic data of that specific application.

Note: using a mobile device that connects with your computer using Charles for the first time, it will ask for permission within the Charles application. Allow the incoming data.

In-App