Reversee, yet another web debugger?

#webdev #desktop #network #electron

A while ago I have started a project named Reversee. On first sight, it looks just like another web debugger. So, why bother developing yet another web debugger?

At the time, I used Charles Proxy and WireShark on a mac and Fidler on windows. Those tools are great!

But, Fiddler was never great on platforms other than Windows. WireShark felt like using a surgical knife to slice bread.

All of the above tools sometimes just give you too much information, for some, it takes too long to get them running. If you are dealing with non standard clients, like CLIs, microservices, web applications etc, you must know how to configure a proxy for them to work.

All I needed is a tool to debug apis between client and server, I wanted it to take 2 seconds to start and get some data, and as a side bonus, I wanted it to work on Mac Windows and Linux. That is why I decided to write my own as a side project.

So, I fired up my computer and started writing. Luckily, Electron was there when I started. So, after the first night (I work during the days), I had the basic functionality running!

What can you do with Reversee?
The core functionality is something like the network tab on chrome. You have a client, a server, and Reversee in the middle. You can see http requests, body, headers, responses. Basically, what you would expect from a web debugger.

So, what is the difference?

In Reversee, reverse proxy is a first class citizen. Internally Reversee uses reverse proxy to get the requests from the client and fire them to the server, just like NGINX does.

Charles and Fidler mostly uses forward proxy, which has its benefits and drawbacks.

This gives you the ability to simplify many things, consider the following use case.

You are developing a web service that consumes info from some other web service (can be a public service, your own lambda function or whatever).

We will call the first web service the client, and the other one the server. Assume the server can only accept https. Now, you want to see the traffic between those services.

Using Charles, Wireshark or Fiddler, you will have to add some certificates for SSL/TLS proxy.

Using Reversee you only need to set Reversee up to listen on http traffic and send https traffic, and to configure the client to use http://localhost:. No certificates headache is involved.

Another cool feature of Reversee is request and response interceptors, you can run Javascript code on requests and responses. For example, assume you need to rename a header, change the response body, go to a different URL, etc. All can be easily achieved with a couple lines of code.

Let's see an example how to use Reversee.
We will work with https://jsonplaceholder.typicode.com/ as an example API.

Start Reversee.
Select http for the client protocol.
Select a random high port that is not in use on your computer. We will use 9000 in our example.
Select https for the server protocol.
Switch it to on.

See below:

We will use cURL for our example.

Run the following command from commandline:

curl http://localhost:9000/todos/1

Look in Reversee and see your request:

This shows you how fast it is to start using Reversee. Notice that we are debugging an https endpoint. In most tools, this is not trivial! In other tools, you will have to install certificate in your machine and trust it. Here, we are using a trick. the client is using http and Reversee is using https to talk to the server, that is how we can see traffic going out from the client and coming back from the server.

For clients that will not support http, but only https, you can also install Reversee's root certificate, but this is for another time.

Request/Response modifications - With Reversee you can change the Request or the Response using a few lines of code. This is useful for example if you want to add/modify header, change the request or response body, add a request query parameter, etc.

For example, assume you are developing the client in this client-server and you need to develop a new feature that requires a new field in the response named rating. We can add it easily to the response.