Core Architecture and Traffic Flow

Charles functions as an HTTP-based proxy server, positioning itself between the client and the server to monitor and manipulate data. The request-response cycle follows a structured path:

1. The client (mobile device or desktop) sends a network request.
2. Charles receives the request and forwards it to the destination server.
3. The server returns the response to Charles.
4. Charles passes the response back to the client.

This architecture enables developers to inspect traffic, identify bottlenecks, and debug communication errors between front-end and back-end systems.

Key Functionalities

• Protocol Support: Handles both HTTP and HTTPS traffic.
• Bandwidth Throttling: Simulates various network conditions, including weak or unstable connections (e.g., 3G, 4G, or high latency).
• Breakpoint Debugging: Allows for the modification of request or response data on the fly to test edge cases.
• Request Replay: Supports repeating network requests without requiring user interaction from the client side.
• Concurrent Testing: Facilitates parallel API request testing.

User Interface Overview

Toolbar Controls

• Clean (Broom Icon): Clears all captured session data from the current view.
• Record (Red Circle Icon): Toggles traffic capturing on or off.
• Throttle (Turtle Icon): Activates bandwidth throttling to simulate slow networks.
• Breakpoints (Pen Icon): Enables editing of request data before sending or response data before rendering.
• Validate (Checkmark Icon): Verifies HTML structure against W3C standards.

View Modes

• Structure: Organizes captured traffic by domain name.
• Sequence: Displays requests in chronological order.
• Filter: Allows selective capturing based on specific domain criteria.

Proxy Configuration and Access Control

Port Configuration

The listening port is configured via the menu: Proxy → Proxy Settings → Proxies. The default port is usually 8888, but this can be modified to suit local network restrictions.

Access Control Settings

Security settings determine which clients can use the proxy. These are managed under Proxy → Access Control Settings.

• Allowed IPs: Clients with IP addresses in this list automatically connect without prompts.
• Unknown IPs: When a client with an unlisted IP attempts to connect, Charles prompts the user for permission to allow the connection.

Local vs. Remote Debugging

If Charles and the client application run on the same machine, no explicit proxy configuration is usually required. For remote debugging (e.g., capturing traffic from a mobile device on the same LAN):

1. Server (PC A): Install Charles and ensure the firewall allows connections on the proxy port. Configure Access Control to accept connections from the client's IP range.
2. Client (PC B): Configure the network proxy settings to point to PC A's IP address and the specific port defined in Charles.

Once configured, PC B routes its internet traffic through PC A, allowing Charles to capture and inspect all network activity from PC B.

HTTPS Interception

To inspect encrypted traffic, SSL/TLS certificates must be installed. This involves installing the Charles Root Certificate on the client device (desktop or mobile) to enable the decryption of HTTPS payloads.

Advanced Filtering

To reduce noise during debugging, specific domains can be isolated using the Focus feature. By pressing Ctrl + Shift + O, users can define target domains. Once set, the Sequence view will primarily display traffic related to the focused websites, hiding unrelated background noise.