Logging, Inspecting & Replaying traffic with ngrok | ngrok blog
February 22, 2022
Testing code is a tedious task that takes a lot of time, especially if certain conditions are required – such as trigger webhooks, API requests, or web pages with specific cookies/headers/session context.
Three months ago, I developed a webhook listener that updates my database anytime a user signs a contract in DocuSign. While the initial coding was easy due to DocuSign's great doc, I spent the entire day tweaking my code logic to grab various fields from the JSON payload.
That happened because I spent 10+ minutes on each test cycle tweaking my code and then uploading and eSigning docs, and waiting for the webhook.
That was before I joined ngrok and learned about the Request Inspector and the Replay functionality — which is one of the coolest tools to save some time ❤️:
Fig 1. Development workflow: before and after using request inspection and replay
Request Inspector
When you launch ngrok, you can see two links: One for the tunnel to your app (it ends up in ngrok.io unless you're using custom domains) and a local URL (http://localhost:4040) for the Request Inspector.
The Request Inspector shows all the requests made through your tunnel. When you click a request, you can see details of both requests and responses.
Seeing requests are an excellent way for validating the data sent to and retrieved by your app via the ngrok tunnel. That alone can save you some time dissecting and logging HTTP request and response headers, methods, bodies, and response codes within your app just to confirm you are getting what you expect.
Request Replays (with and without modifications)
For each request, the dashboard also gives you a replay button with two options:
You can replay your requests without any modification by just clicking Replay
Fig 2. Request replay in the inspector
This takes the entire request - both payload and headers - and replays it directly into your application. It does not mimic requestor IP address or recreate signing information — especially important for verifying webhooks — but the payload and headers will be intact for your code to use as you need.
Alternatively, you can also click the down arrow > Replay with Modifications. This allows you to use the same request as a template and make adjustments in the request method, header, and body:
Fig 3. Modifying a request before replay
Ready to get started?
Request introspections and replays are available to any ngrok user. To get it going, launch your tunnel (i.e., ngrok http 80) and then go to your introspection address (i.e., http://localhost:4040).
If you're not a ngrok user yet, just download and sign-up for free.