Skip to content

Constructor's SDK and Charles

Jump to bottom
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)

Note: Android apps may have additional network configuration in production builds to make this work. ​

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 device's 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 Android to your computer

  • Go to your WiFi settings, select your current WiFi network, and edit your proxy settings from None to Manual
Screen Shot Mobile 1 Screen Shot Mobile 2 Screen Shot Mobile 3 Screen Shot Mobile 4 Screen Shot Mobile 6 Screen Shot Mobile 7

  • Set your proxy hostname to the IP Address of the device that has Charles running (192.168.x.x)
  • Set your proxy port to the port that Charles is running on (8888)
Screen Shot Mobile 5

  • In Charles, allow the incoming connection from your Android Device
  • From a browser on your device, visit http://chls.pro/ssl and download the SSL certificate from Charles
  • Go to Settings > Security > Scroll down and click on Advanced > Encryption & credentials > Install a certificate > CA certificate > Install anyway
  • Find the file and click on it to install (It should be located in the Downloads folder. Click on the hamburger menu on the top left to access it) ​

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
Clone this wiki locally