How to Replay any request in Chrome 📤 🔄 📤

#webdev #javascript #programming #tutorial

Have you ever wanted to quickly modify a browser request and resend it?

If you haven't, here are some reasons why you might want to eventually! It's important to keep trying new things and adding more tools to your tool belt.

Debugging and Testing: This can include altering headers, query parameters, or body content to see how changes affect the response.
Security Testing: Penetration testers use manual modification of requests to test for vulnerabilities such as SQL injection, XSS (Cross-Site Scripting), and access control issues.
API Interaction: When working with APIs, you might manually modify requests to test API endpoints for correct responses and error handling.
Educational Purposes: Learning how web technologies work often involves manually altering requests to better understand HTTP protocols, client-server interactions, and web application behaviors.

Firefox has always made this super simple. You can just right-click on any request and either resend it, or modify and resend it.

With Chrome it's a bit more work. Here is a quick demo to showcase what I mean, before I go through the steps involved.

Here are the steps to resend a request in Chrome!

Right-click on the request and click copy -> copy as fetch. You could also copy it as a curl request, but you might run into other issues if you try to rerun the request outside of the context of the browser you are currently in.
Open your console, on your browser. You might have to type "allow pasting" in order to allow pasting. Before you paste, add an await so that the request is awaited.
Hit enter and watch the request happen! If you go back into your Network tab, you will see that the request was successful!

This is how you would resend the exact same request. If you want to edit the request, you would just need to do that between steps 2 and 3! edit the raw fetch request that you had pasted into the console.

That is essentially it! Just remember to use your new found power for good, since you are no longer bound by the restrictions of frontend UI. You can modify request payloads from the browser, to include what you want. This is also why it is super important to verify request payloads on your backend and not your frontend.

Hope this helps and that you've learned something new. Cheers!

Oh and one last shameless plug. If you work in an agile dev team and have meetings for your sprint retrospectives, or planning poker, consider checking out my app Kollabe!