15a-Network Debugging with Charles Proxy

15a-Network Debugging with Charles Proxy

Overview

This lecture covers the use of Charles Proxy for network debugging, focusing on its setup, configuration, and practical QA testing scenarios for web and mobile applications.

Introduction to Charles Proxy

• Charles Proxy is an HTTPS web proxy tool used to monitor and manipulate network traffic.
• Unlike Chrome DevTools (browser only), Charles Proxy works with both web browsers and mobile devices.
• Charles acts as a “middleman,” capturing all data exchanged between client and server.

Key Features of Charles Proxy

• Can view SSL requests and responses in plain text for easier debugging and validation.
• Offers a throttling feature to simulate slow or unstable internet connections for testing.
• Allows editing of requests/responses using the breakpoint feature for advanced testing scenarios.

Installing and Configuring Charles Proxy

• Download Charles Proxy from charlesproxy.com and install the version for your operating system.
• The free version works for 30 days without limitations; after that, it prompts you to restart sessions but remains usable.
• Install the Charles root certificate: Help > SSL Proxying > Install Charles Root Certificate, then set “Always Trust” in your OS’s certificate manager.
• Setup proxy settings: HTTP Proxy port 8888; enable SSL Proxying for domains under Proxy > SSL Proxying Settings (e.g., yelp.com, port 443).

Using Charles Proxy: Desktop & Mobile

• The Structure tab shows accessed domains; the Sequence tab shows individual network calls.
• Readable data appears only after proper SSL and proxy configuration.
• For QA on web, use Chrome DevTools; for mobile, use Charles Proxy.

Charles Proxy and Mobile Devices

• To test on iOS: Connect to the same Wi-Fi as your computer, set manual proxy (server: computer IP, port: 8888), and trust the Charles certificate.
• Android devices after 2017 cannot use Charles due to security restrictions; older devices may still work.

Practical QA Testing with Charles Proxy

• Example 1: Validate that the “user reservation” endpoint includes fields like name, city, address, state, and country in the API response.
• Example 2: Use throttling to ensure the app times out under 30 seconds during poor network and displays an error screen (“something weird happened”).

Key Terms & Definitions

• Charles Proxy — A desktop tool for capturing and manipulating network traffic between a device and internet.
• SSL Proxying — Decoding encrypted HTTPS traffic to view it in plain text.
• Breakpoint — A feature allowing modification of requests/responses before forwarding.
• Throttling — Simulating slow or unstable network speeds for testing.
• Endpoint — A specific API URL that the client calls to retrieve or send data.

Action Items / Next Steps

• Practice setting up Charles Proxy using the provided video and step-by-step instructions.
• Attempt sample QA test cases with the Yelp app as shown in the demo.
• Review the glossary for interview preparation.
• Watch the post-class video for a step-by-step walkthrough.