The Fastest Way To Debug Network Requests

So you're working on a project with a client and a server and you stumble into a bug.

The server doesn't seem to respond in the way you think it would.

Is it a server bug? Is it a client bug? Am I sending the wrong parameters? Is my authentication headers correctly spelled? There are so many things that can cause the issue..

I've found the easiest, fastest way to debug these kind of issues using a nifty little app called Charles.

Charles is a Web Debugging Proxy that runs on your computer and monitors all network traffic. It lets you view each request and response, its headers, content and much more in a very convinient way. More over, you can replay and edit requests and even responses.

Let's say you're developing an iOS or an Android app. You are running the iOS Simulator or the Android Emulator and you are sending an API network request.
You get an error from the server and you want to figure out why. Here are the steps to get clarity over what's going on:

1. Launch Charles.
2. Re-do the action on the Simulator that triggers the network request.
3. Locate the network request in Charles.
4. Inspect the request.
5. Look for common errors like:
   • Spelling errors.
   • Wrong parameter names.
   • camelCase vs snake-case field names.
   • Invalid payload structure.
   • Redundent parameters.
6. Fix the error by editing the request in Charles.
7. Execute the amended request through Charles and repeat until server responds as expected.

The benefits:

1. Clarity over what's going on under the hood.
2. No need to re-run Simulator after every small change in request parameters.
3. Much faster iterations when trying to locate the issue.

Extra Tip: If the issue is a server-side issue and someone else is developing the server, simply Save the Charles session and send it to them. They will be able to replay the request that causes the issue and you both save tons of ping-pong time.

Just to be clear: the main advantage when using a web debugging tool like Charles is the clarity of what your client app is sending and what the server is responding.

Charles can also inspect HTTPS traffic. Just follow this guide to enable it: SSL.

So here is the Download Link: https://www.charlesproxy.com

Happy coding!
Or