Skip to content

Constructor's SDK and Charles

Jimmy Li edited this page Mar 29, 2021 · 7 revisions

Debugging Constructor's SDK with Charles Proxy

​ Constructor's SDK communicates with Constructor's servers using HTTPS requests. This tutorial will allow you to spy on requests and responses to validate that tracking events and requests for results work as expected.
​ Your computer and your test device will need to be on the same WiFi network for this to work. We will be proxying traffic from your device to Constructor's servers through your computer so that we can view the requests and responses in plain text.

Make sure that you are connected to whatever VPN you need to be connected to in order to access other domains outside of Constructor i.e (http://staging.yourdomain.com) ​

Install and start Charles Proxy

Screen Shot 2021-03-16 at 2 11 55 PM

Screen Shot 2021-03-16 at 2 12 44 PM

Get the IP Address and port to send traffic from your device through your computer

  • Option + click on the WiFi symbol on macOS to get your local IP Address (192.168.x.x)
  • Go to Proxy / Proxy Settings > to discover the port to connect your device to (8888)
Screen Shot 2021-03-16 at 2 08 26 PM

Screen Shot 2021-03-16 at 1 34 41 PM

Connect your iPhone to your computer

  • Go to your WiFi settings and select your current WiFi network to configure your proxy settings
Screen Shot Mobile 1 Screen Shot Mobile 2 Screen Shot Mobile 3

  • Edit your proxy settings from None to Manual
  • Set your proxy server to your local IP Address
  • Set your proxy port to the port Running Charles
Screen Shot Mobile 4

Install SSL Certificate

  • In Charles, allow the incoming connection from your iPhone Device
  • Using Safari, visit http://chls.pro/ssl and download the SSL certificate from Charles and install it
Screen Shot Charles 5 Screen Shot Charles 0 Screen Shot Charles 8 Screen Shot Charles 7 Screen Shot Charles 6 Screen Shot Charles 5 Screen Shot Charles 4

  • If you are on iOS 10.3 or later, open the Settings.app and navigate to General > About > Certificate Trust Settings, and find the Charles Proxy certificate, and switch it on to enable full trust for it
Screen Shot Charles 0 Screen Shot Charles 3 Screen Shot Charles 2 Screen Shot Charles 1

From Charles Proxy

  • Clear existing traffic
  • Toggle to sequence instead of structure
Screen Shot 2021-03-16 at 2 51 56 PM

  • Filter traffic on cnstrc.com
  • Snoop on HTTPS traffic
  • Trigger events/requests within the app
  • Make sure that you can see both requests and responses (responses will be in plain text if the SSL certificate installed correctly)
Screen Shot 2021-03-18 at 2 51 50 PM

When you are done

  • Remove the proxy setting on your device