How to monitor the network traffic of a mobile application

Charles Proxy and Safari Web Inspector for your mobile devices and/or simulators

Photo by Penfer on Unsplash

If you have ever sought to enhance the performance of a project you’ve been involved in, chances are you’ve encountered the challenge of optimising network requests. Despite the assumption that network traffic monitoring is a standard feature in every programming language or framework, the reality is quite different. More often than not, developers find themselves installing third-party software to fulfill this need.

In this article, we will explore two methods of monitoring network traffic, on the macOS:

1. Charles Proxy
2. Safari Web Inspector

Charles Proxy

“Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information)”

I will show you how to download and use Charles Proxy:

Use on iOS Simulator

I will narrow it down to 8 easy steps.

1. Go to Charles Proxy and press on the download button

2. Download by selecting the macOS hyperlink

In my case, I am using the macOS. Charles is also available for Windows and Linux.

3. Install Charles using the downloaded .dmg file

4. Access Charles — once installed, you should find it using the spotlight

Lots of Charles found, but the first result is the one that we’re looking for 🥴

5. Using Charles Proxy

Charles starts monitoring data as soon as the app is opened, but you can only see junk, some binary dump data. In order to have complete access to every request, we have to enable SSL Proxying for the simulator/device that we want to use. How can we do this?

6. Downloading the Root Certificate

In my case, I will download the Certificate for iOS Simulators. You can see that there are other options such as Java VMs, Mobile Devices and Remote Browsers.

To be honest, this did not work for me. However, there is another easily accessible option, and by saving the certificate on my device, I was just able to drag and drop it into the simulator.

7. Enabling SSL Proxying for the wanted IP

8. Time to monitor 😎

Use on iOS Devices

This one is similar to the configuration for iOS simulators, but due to the fact that the network traffic monitored comes from another device, another proxy needs to be setup.

1. Configure iOS Proxy

Get the IP of the device hosting the Charles Proxy tool and keep the IPv4 address in mind. You will need to enter this here:

2. Using Charles Proxy

If you have done everything correctly, you should be greeted by these two screens:

On the device hosting Charles Proxy:

On the iOS device:

After you allow access, you can monitor the requests, but they will look like the screenshot from step 5, from above. From here on, you can follow steps 6–8 from the simulator tutorial and you are good to go!

This is necessary to monitor the network traffic of native mobile applications. However, if your application runs inside a webview, there is a simpler method.

Safari Web Inspector

Safari and macOS also offer a network monitoring solution that comes with the operating system. It is only available for web contexts. Question is: how can I use it?

1. Enable developer settings in Safari

Go to advanced settings and select the “Show features for web developers” checkbox:

2. Go to the “Develop” tab

If you have done step one correctly, a develop tab should appear in the upper part of the screen. There, you can access the web inspector for your device:

3. Use the web inspector

In the left part of the screen, you can see the web inspector showing all the requests necessary to access “drive.google.com” in my search bar. You have detailed info for every request, easily accessible.

Conclusions

Charles Proxy and Safari Web Inspector are both tools commonly used by developers for debugging and monitoring network traffic during web development. However, they serve different purposes and are best suited for different scenarios.

1. Charles Proxy:

• Purpose: Charles Proxy is a powerful HTTP proxy/monitoring tool that allows developers to intercept and inspect HTTP/HTTPS traffic between a client (e.g., web browser or mobile app) and a server.
• Features: It provides features such as SSL proxying, request/response modification, bandwidth throttling, and more. Charles Proxy offers a user-friendly interface with detailed information about each request/response, including headers, bodies, and timings.
• When to Use:
• Charles Proxy is ideal for debugging and troubleshooting issues related to network communication, such as debugging API requests/responses, identifying performance bottlenecks, and testing how an application behaves under different network conditions.
• It is particularly useful for mobile app development, as it allows developers to inspect network traffic from mobile devices by configuring the device to use Charles Proxy as a proxy server.

2. Safari Web Inspector:

• Purpose: Safari Web Inspector is a built-in developer tool provided by Apple’s Safari browser for debugging and inspecting web content.
• Features: It offers a wide range of features for debugging web applications, including inspecting HTML/CSS, debugging JavaScript, analysing network activity, and auditing web page performance.
• When to Use:
• Safari Web Inspector is primarily used for debugging web applications running in Safari browser on macOS or iOS devices.
• It is particularly useful for front-end developers who need to debug client-side issues, such as JavaScript errors, layout problems, CSS issues, and DOM manipulation.
• While Safari Web Inspector provides network monitoring capabilities, it may not offer the same level of detailed information and control over network traffic as Charles Proxy.

In summary, developers should use Charles Proxy when they need advanced capabilities for monitoring and manipulating network traffic, especially in scenarios involving API debugging and mobile app development. On the other hand, Safari Web Inspector is the go-to tool for debugging web applications running in Safari browser, particularly for front-end debugging and web performance analysis.