CHARLES: Web Debugging Proxy Application

To begin with, let’s see what a Proxy Server is. A proxy server is a hardware or software system that acts as an intermediary between an endpoint device and another server from which that device is requesting a service.

Wiki: In computer networks, a proxy server is a server (a computer system or an application) that acts as an intermediary for requests from clients seeking resources from other servers. A client connects to the proxy server, requesting some service, such as a file, connection, web page, or other resource available from a different server and the proxy server evaluates the request as a way to simplify and control its complexity.

A reverse proxy (or surrogate) is a proxy server that appears to clients to be an ordinary server. Requests are forwarded to one or more proxy servers which handle the request. The response from the proxy server is returned as if it came directly from the origin server, leaving the client no knowledge of the origin servers.

What is Charles?

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). 

In Web and Internet development you are unable to see what is being sent and received between your web browser / client and the server. Without this visibility it is difficult and time-consuming to determine exactly where the fault is. Charles makes it easy to see what is happening, so you can quickly diagnose and fix problems.

Charles makes debugging quick, reliable and advanced; saving you time and frustration!

Why Charles?

• Records all traffic between your browser and the Internet
• Reveals the contents of all requests, responses, cookies and headers
• Supports SSL and HTTPS
• Saves valuable time
• Simulates slower internet connections
• Download statistics
• Easily Configurable
• Quickly find and eliminate bugs

A little detail on Charles Features that help in Development/Debugging & Testing.

BREAKPOINTS TOOL

The Breakpoints tool lets you intercept requests and responses before they are passed through Charles. You can examine and edit the request or response and then decide whether to allow it to proceed or to block it.

Each breakpoint matches a URL using location matching patterns. Each breakpoint is also assigned to either the request, or response, or both so you break exactly where you want.

BANDWIDTH THROTTLE / BANDWIDTH SIMULATOR

Charles can be used to adjust the bandwidth and latency of your Internet connection. This enables you to simulate modem conditions using your high-speed connection.

The bandwidth may be throttled to any arbitrary bytes per second. This enables any connection speed to be simulated.

SSL PROXYING

Charles can be used as a man-in-the-middle HTTPS proxy, enabling you to view in plain text the communication between web browser and SSL web server.

Charles does this by becoming a man-in-the-middle. Instead of your browser seeing the server’s certificate, Charles dynamically generates a certificate for the server and signs it with its own root certificate (the Charles CA Certificate).

REVERSE PROXY

A reverse proxy is useful if you have a client application that doesn’t support the use of an HTTP proxy, or you want to avoid configuring it to use a proxy. Create a reverse proxy to the original destination web server and then connect the client application to the local port; the reverse proxy is transparent to the client application and enables you to view the traffic in Charles where you previously may not have been able to.

PORT FORWARDING

Any TCP/IP or UDP port can be configured to be forwarded from Charles to a remote host using the Port Forwarding tool. This enables debugging of any protocol in Charles.

This is especially useful when debugging XML Socket connections in Macromedia Flash.

OTHER HANDY & USEFUL TOOLS IN CHARLES

No Caching Tool: The No Caching tool prevents client applications, such as web browsers, from caching any resources.

Block Cookies Tool: The Block Cookies tool blocks the sending and receiving of cookies. It can be used to test websites as if you have cookies disabled in your browser.

Map Remote Tool: The Map Remote tool changes the request location, per the configured mappings, so that the response is transparently served from the new location as if that was the original request.

Map Local Tool: The Map Local tool enables you to use local files as if they were part of a remote website. You can develop your files locally and test them as if they were live.

Rewrite Tool: The Rewrite tool enables you to create rules that modify requests and responses as they pass through Charles.

Black List Tool: The Blacklist tool enables you to enter domain names which should be blocked.

DNS Spoofing Tool: If you have set up a virtual host but the IP address change hasn’t propagated through DNS yet, you can spoof it and test your virtual hosting immediately.

Mirror Tool: The Mirror tool saves responses to disk as they are received, creating a mirror copy of websites as you browse them.

Auto Save Tool: The Auto Save tool automatically saves and clears the recording session at set intervals.

Client Process Tool: The Client Process tool shows the name of the local client process that is responsible for making each request.

Repeat Tool: This is useful if you are making back-end changes and want to test them without having to repeat the request in the browser (or other client).

Repeat Advanced Tool: The Repeat Advanced tool extends the Repeat tool with options for the number of iterations and concurrency. This is mostly useful for Load Testing.

Edit Tool: The Edit tool builds on the Repeat tool by allowing you to change the contents of the request before repeating it. When editing you can edit different parts of the request including the URL, headers, query string or form contents.

Validate Tool: Charles can validate the recorded responses by sending them to the W3C HTML validator, W3C CSS validator and W3C Feed validator. Because Charles tests the responses that it records it can test scenarios that aren’t easily tested, such as the presentation of error messages after submitting a form.

FOOTNOTE

There is more to Charles than what can be described in a blog. The best way to learn how it can help you is just to install it and see how it works. Charles comes as a paid tool, but you can get your hands on a Trial Version and see how it can revolutionize Development & Testing.

Happy Debugging…!