Edit and replay XHR chrome/firefox etc?

Google ChromeFirefoxBrowserXmlhttprequest

Google Chrome Problem Overview


I have been looking for a way to alter a XHR request made in my browser and then replay it again.

Say I have a complete POST request done in my browser, and the only thing I want to change is a small value and then play it again. This would be a lot easier and faster to do directly in the browser.

I have googled a bit around, and haven't found a way to do this in Chrome or Firefox.

Is there some way to do it in either one of those browsers, or maybe another one?

Google Chrome Solutions


Solution 1 - Google Chrome

Chrome :

  • In the Network panel of devtools, right-click and select Copy as cURL
  • Paste / Edit the request, and then send it from a terminal, assuming you have the curl command

See capture :

enter image description here

Alternatively, and in case you need to send the request in the context of a webpage, select "Copy as fetch" and edit-send the content from the javascript console panel.


Firefox :

Firefox allows to edit and resend XHR right from the Network panel. Capture below is from Firefox 36:

enter image description here

Solution 2 - Google Chrome

Chrome now has Copy as fetch in version 67:

> ## Copy as fetch Right-click a network request then select Copy > Copy As Fetch to copy the fetch()-equivalent code for that request to your clipboard.

https://developers.google.com/web/updates/2018/04/devtools#fetch

Sample output:

fetch("https://stackoverflow.com/posts/validate-body", {
  credentials: "include",
  headers: {},
  referrer: "https://stackoverflow.com/",
  referrerPolicy: "origin",
  body:
    "body=Chrome+now+has+_Copy+as+fetch_+in+version+67%3A%0A%0A%3E+Copy+as+fetch%0ARight-click+a+network+request+then+select+**Copy+%3E+Copy+As+Fetch**+to+copy+the+%60fetch()%60-equivalent+code+for+that+request+to+your+clipboard.%0A%0A&oldBody=&isQuestion=false",
  method: "POST",
  mode: "cors"
});

The difference is that Copy as cURL will also include all the request headers (such as Cookie and Accept) and is suitable for replaying the request outside of Chrome. The fetch() code is suitable for replaying inside of the same browser.

Solution 3 - Google Chrome

Updating/completing zszep answer:

After copying the request as cUrl (bash), simply import it in the Postman App:

enter image description here

Solution 4 - Google Chrome

My two suggestions:

  1. Chrome's Postman plugin + the Postman Interceptor Plugin. More Info: Postman Capturing Requests Docs

  2. If you're on Windows then Telerik's Fiddler is an option. It has a composer option to replay http requests, and it's free.

Solution 5 - Google Chrome

For Firefox the problem solved itself. It has the "Edit and Resend" feature implemented.

For Chrome Tamper extension seems to do the trick.

Solution 6 - Google Chrome

5 years have passed and this essential requirement didn't get ignored by the Chrome devs.
While they offer no method to edit the data like in Firefox, they offer a full XHR replay.
This allows to debug ajax calls.
enter image description here
"Replay XHR" will repeat the entire transmission.

Solution 7 - Google Chrome

Microsoft Chromium-based Edge supports "Edit and Replay" requests in the Network Tab as an experimental feature:

enter image description here

In order to enable the option you have to "Enable Experimental Features".
Control+Shift+I (Windows, Linux) or Command+Option+I (macOS)
and tick the checkbox next to "Enable Network Console".

More details about how to Enable Experimental Tools and the feature can be found here

Solution 8 - Google Chrome

Solution 9 - Google Chrome

There are a few ways to do this, as mentioned above, but in my experience the best way to manipulate an XHR request and resend is to use chrome dev tools to copy the request as cURL request (right click on the request in the network tab) and to simply import into the Postman app (giant import button in the top left).

Solution 10 - Google Chrome

No need to install 3rd party extensions!

There exists the javascript-snippet, which you can add as browser-bookmark and then activate on any site to track & modify the requests. It looks like:

enter image description here

For further instructions, review the github page.

Solution 11 - Google Chrome

Firefox have this feature quite well! And see the response in Raw or Formatted JSON. I like the Firefox dev tools better than chrome.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmadsobelView Question on Stackoverflow
Solution 1 - Google ChromeMichael P. BazosView Answer on Stackoverflow
Solution 2 - Google ChromeJosh LeeView Answer on Stackoverflow
Solution 3 - Google ChromeeleuteronView Answer on Stackoverflow
Solution 4 - Google ChromezszepView Answer on Stackoverflow
Solution 5 - Google ChromeJari TurkiaView Answer on Stackoverflow
Solution 6 - Google ChromeJohnView Answer on Stackoverflow
Solution 7 - Google ChromeArikView Answer on Stackoverflow
Solution 8 - Google ChromeSeanView Answer on Stackoverflow
Solution 9 - Google ChromequinloView Answer on Stackoverflow
Solution 10 - Google ChromeT.ToduaView Answer on Stackoverflow
Solution 11 - Google ChromekarimView Answer on Stackoverflow