Sometimes, you use broadpeak.io to stream on mobile devices. In contrast to web browsers, there is no easy way to enable "developer mode" and generate .har files, which are critical for efficient troubleshooting. This article describes a technique to capture troubleshooting network captures on mobile devices.

Purpose

We will describe how Charles Proxy to capture network traffic generated by a specific application installed on mobile devices. This is usually intended for troubleshooting purposes. The Charles logs (.chls) can then be saved and shared with those who require them.

Connectivity diagram

First, this is how you should set up your system to succeed. Your laptop and mobile devices should be connected to the same Wifi (see step 1 below). Step 2 will describe the configuration on the computer, while Step 2 will describe what to do on the mobile device.

How to setup

📘

This guide was written with a Windows laptop (Step 2 below) and an iOS phone (Step 3 below) in mind, but the general concept is still the same if you are using other OS.

For Android phone, developers typically must prepare a ‘debug’ version of the application before it can be used with Charles. This debug version will need to be installed on the Android phone manually by installing the given .apk, and any new app update will require a similar ‘debug’ version to be prepared. This was mainly due to the security control to only have the app trust the SSL certificate generated by Charles. Refer to the section here, specifically under ‘Android’.

Generally, the steps below will be sufficient to set up Charles on the laptop to capture traffic coming from the iPhone, and additional information can be found at the given links, if required.

1. Wifi connected to the Internet should have access to the location/country where the application is allowed to operate. If the application is geo-blocked in a selected country, the Wifi connection should have VPN access to that country. This usually would require some configuration on the access points themselves. Similarly, if a typical mobile phone were used as a Wifi hotspot/tethering, it may have a VPN software installed on it that can connect to that specific country, and other devices, e.g., an iPhone and a laptop, can then be connected to this ‘hotspot’. If the application does not have geo-block restrictions, then this VPN connectivity is not required.

2. On the laptop

   1. Install Charles Logs – download it here. Follow the installation instructions here. Take note of the Configuration here , but a few pointers described below should suffice.

   2. Select ‘Proxy Settings’. Leave the ‘HTTP Proxy’ port as 8888. Check ‘Support HTTP/2’.

      

   3. Uncheck ‘Windows Proxy’, so it does not capture activities on Windows.

      

   4. Select ‘SSL Proxying Settings’. Check ‘Enable SSL Proxying’ and add . into location.

      

   5. After Step 3.i. below, Charles SSL Certificate will be installed onto the mobile phone. Note that the IP address below will differ depending on what’s captured. In the example below, it’s 192.168.0.119 on my laptop. This IP and port will be required to set up as a proxy in the mobile phone’s Wifi connection in Step 3.a below – so, note it down.

      

   6. Connect the laptop to the same Wifi.

3. On the Mobile Devices e.g. Phone or Tablet, iOS or Android

   1. As described in Step 2.v. above, it’s essential to ‘manually’ configure the mobile devices to use Charles as a proxy. This is vital so that application traffic will be routed through it to capture the network activities. It is better to ensure only the application is running and no web pages are loaded on the phone’s browser to limit the amount of traffic.

      1. Manually configure the proxy, under the same Wifi connection on the phone.

         

      2. Allow the connection and trust Charles’ SSL certificate in your iOS device. Go to Settings > General > About > Certificate Trust Settings. Under "Enable full trust for root certificates", turn on trust for the Charles certificate.

         

Capture and Save the Charles Logs

1. Start the mobile application and try to reproduce the issue.

2. Note that the activities from the mobile application should be captured on Charles. Check the log activities to ensure the app’s URL request is successful without error. If there is no activity on Charles, the setup is not correctly done. In such a case, check the following:

   1. The proxy was correctly configured on the iPhone. This is done by manually configuring the Wifi connection.

   2. Trust the Charles’ SSL certificate on the iPhone.

   3. No anti-virus software or firewall that may block the communication between the laptop and the iPhone.

   4. Check all steps from 2.ii. above.

      1. Once the issue is reproduced, ‘save session’ or ‘save session as’ or ‘export session’ and provide the logs to those who require them.

         

      2. The file can be re-imported using Charles on any laptop to open it for analysis.